常用的HTML标签和属性解释、css实用小技巧_css常用技巧和经验总汇

 

基本结构标签:
,表示该文件为HTML文件
,包含文件的标题,使用的脚本,样式定义等
,包含文件的标题,标题出现在浏览器标题栏中
,的结束标志
,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
,的结束标志
,的结束标志

 

其它主要标签,以下所有标志用在中:
,链接标志,"…"为链接的文件地址
,显示图片标志,"…"为图片的地址

,换行标志

,分段标志
,采用黑体字
,采用斜体字

---

,水平画线
,定义表格,HTML中重要的标志
,定义表格的行,用在中
,定义表格的单元格,用在中
,字体样式标志

 

属性:
属性是用来修饰标志的,属性放在开始标志内.
例:属性bgcolor="BLACK"表示背景色为黑色.
引用属性的例子:
表示页面背景色为黑色;
表示表格背景色为黑色.

 

常用属性:
对齐属性,范围属性:
ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.
ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.
ALIGN=RIGHT,右对齐.
色彩属性:
COLOR=#RRGGBB,前景色,参考色彩对照表.
BGCOLOR=#RRGGBB,背景色.

 

表示绝对居中.

 

表格标识的开始和结束.
属性:
cellpadding=数值单位是像素,定义表元内距
cellspacing=数值单位是像素,定义表元间距
border=数值单位是像素,定义表格边框宽度
width=数值单位是像素或窗口百分比,定义表格宽度
background=图片链接地址,定义表格背景图
表格中一个表格行的开始和结束;
表格中行内一个单元格的开始和结束
属性:
Colspan="",单元格跨越多列;
Rowspan="",单元格跨越多行;
Width="";定义表格宽度
Height="";定义表格高度
Align="";对齐方式
Valign="";
Border="",边框宽度;
Bgcolor="",背景色;
Bordercolor="",边框颜色;
Bordercolorlight="",边框明亮面的颜色;
Bordercolordark="",边框暗淡面的颜色;
Cellpadding="",内容与边框的距离(默认为2);
Cellspacing="",单元格间的距离(默认为2);

 

强制换行
文本标识的开始和结束
属性:
face=字体
color=颜色
加粗文字标识的开始和结束
属性:
style=font-size:40pt;,用样式表方式控制字体大小,这里是40点

,分区标识的开始和结束
属性:
align=|center|left|right|水平对齐方式
动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动
属性:
scrollamount=1~60,滚动速度
direction=|left|right|up|down|,滚动方向
scrolldelay=滚动延时,单位:毫秒

段落标识,
 空格符,
贴图标识
属性:
src=../../图片链接地址,贴图标识必备属性
style=filter:Alpha(opacity=100,style=2);
filter:样式表滤镜;
Alpha:透明滤镜,
opacity:不透明度100(0~100);
style:样式2(0~3),
rules="none"不显示内框"
多媒体文件标识
属性:
SRC="../../FILENAME",
设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav等音频,还可播放.swf和.mov等视频.
AUTOSTART=TRUE/FALSE,
是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.
STARTIME="分:秒",
设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20
VOLUME=0-100,
设定音量的大小.如果没设定的话,就用系统的音量.
WIDTH,HEIGHT,
设定控制面板的大小,都设为0可隐藏播放器
HIDDEN=TRUE,
隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE,
设定控制面板的样子,
,背景音乐标识,只能用于.wav和.mp3格式.
属性:
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.

 

表单标签:

表格标识的开始和结束,表单的内容都放在这里.
下边的标签放在表单内:
下拉选择框


属性:
Multiple,多选
,大量文字输入的编辑块
属性:
Cols="",行;
Rows="",列;
,文本框
,密码框
,提交按扭
,复选框
,单选框
,重置按扭
,图片按扭
,隐藏域
,按扭
,浏览文件
公共属性:
Name="";
Value=""
Size=""

 

框架标签:
...,定义框架.
,放在框架标签内,定义每个框架的内容.
属性:
Cols=""
Rows=""
Frameborder=""
Framespacing=""
src=""
Scrolling="",滚动条(No,Yes);
Noresize,框加大小不可变;
Marginhight="",高度空余空间;
Marginwidth="",宽度空余空间;
Target="",目标框架.

 

其他标签:
,背景音乐;
Src=""
Loop="",循环次数;
,媒体播放块;
Src=""
Loop="",循环次数;
,滚动部分;
属性:
Bgcolor=""
Behavior,设置或获取文本如何在字幕中滚动.
Direction="",滚动方向;
Height=""
Width=""
Loop="",环次数;
scrollAmount="",设置或获取介于每个字幕绘制序列之间的文本滚动像素数.
scrollDelay="",设置或获取字幕滚动的速度.
scrollHeight="",获取对象的滚动高度;
scrollLeft="",设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离.
scrollTop="",设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离.
trueSpeed="",设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时.

 

,注释标记,在""之间的内容将不在浏览器中显示.

 

--

 

基本标签:
,创建一个HTML文档;
,设置文档标题和其它在网页中不显示的信息;
,设置文档的标题;

,最大的标题;

,预先格式化文本;
,下划线
,黑体字;
,斜体字;
,打字机风格的字体;
,引用,通常是斜体;
,强调文本(通常是斜体加黑体);
,加重文本(通常是斜体加黑体);
,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
,基准字体标记;
,字体加大;
,字体缩小;
,加删除线;
,程式码;
,键盘字;
,范例;
,变量;

,向右缩排;
,述语定义;

,地址标记;
,上标字;
,下标字;
...固定宽度字体(在文件中空白、换行、定位功能有效)
...</plaintext>固定宽度字体(不执行标记符号);<br><listing>...</listing>,固定宽度小字体;<br><font,color=00ff00>...</font>字体颜色;<br><font,size=1>...</font>最小字体;<br><font,style,='font-size:100,px'>...</font>无限增大.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">格式标签</span>:</p> <h3> </h3> <p class="p"><p></p>,创建一个段落;<br><p,align="">,将段落按左、中、右对齐;<br><br>,换行,插入一个回车换行符;<br><blockquote></blockquote>,从两边缩进文本;</p> <h3> </h3> <p class="p"><dl></dl>,列表标签,定义列表;<br><dt>,定义列表标题;<br><dd>,定义列表内容;<br><span style="font-family: 微软雅黑;">例</span>:<br><dl><br><dt>标题1</dt><br><dd>内容11</dd><br><dd>内容12</dd><br><dt>标题2</dt><br><dd>内容21</dd><br><dd>内容22</dd><br></dl></p> <h3> </h3> <p class="p"><ol></ol>,列表标签,定义一个标有数字的列表;</p> <h3> </h3> <p class="p"><ul></ul>,列表标签,定义一个标有圆点的列表;<br><li>,放在每个列表项之前;<br><span style="font-family: 微软雅黑;">放在</span><ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;</p> <h3> </h3> <p class="p"><div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;<br><MENU>,选项清单;<br><DIR>,目录清单;<br><nobr></nobr>,强行不换行;<br><hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);<br><center></center>,水平居中.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">链接标签</span>:<br><a,href="URL"></a>,创建超文本链接;<br><a,href="mailtEMAIL"><br></a>,创建自动发送电子邮件的链接;<br><a,name="name"></a>,创建位于文档内部的书签;<br><a,href="#name"></a>,创建指向位于文档内部书签的链接;<br><BASE>,文档中不能被该站点辨识的其它所有链接源的URL;<br><LINK>,定义一个链接和源之间的相互关系;</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">链接标签注解</span>:<br>target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);<br>rel="...",发送链接的类型;<br>rev="...",保存链接的类型;<br>accesskey="...",指定该元素的热键;<br>shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);<br>coord="...",使用像素或者长度百分比来定义形状的尺寸;<br>tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表格标签</span>:<br><table></table>,创建一个表格;<br><tr></tr>,表格中的每一行;<br><td></td>,表格中一行中的每一个格子;<br><th></th>,设置表格头:通常是黑体居中文字;<br><table,cellspacing="">,设置表格格子之间空间的大小;<br><table,border="">,设置边框的宽度;<br><table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;<br><table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;<br><table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);<br><tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);<br><tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);<br><td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);<br><td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);<br><td,nowrap>,禁止表格格子内的内容自动断行;<br><CAPTION></CAPTION>,表格的标题;<br><COLGROUP></COLGROUP>,定义多个列为一组列;<br><TABLE></TABLE>,创建一个表格;<br><THEAD></THEAD>,定义表格的页眉;<br><COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;<br><TBODY></TBODY>,定义一个表格的实体;<br><TFOOT></TFOOT>,定义一个表格的页脚;</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表单标签</span>:<br><form></form>,创建表单;<br>action="...",接收数据的服务器的URL;<br>method="...",HTTP的方法(get,,post),其中get是被反对使用的;<br>enctype="...",指定MIME(Internet媒体类型);<br>οnsubmit="...",当提交表单时发生的内部事件;<br>noreset="...",在重新设置表单时发生的内部事件;<br>target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)<br><select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;<br><option>,设置每个表单项的内容;<br><select,name="name"></select>,创建下拉菜单;<br><textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;<br><input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;<br><input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;<br><input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;<br><input,type="submit",value="name">,创建提交(submit)按钮;<br><input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;<br><input,type="reset">,创建重置(reset)按钮;<br><BUTTON></BUTTON>,创建一个按钮;<br>disabled="...",把按钮的状态设置为不能;<br>name="...",按钮的控制名,value="...",按钮的值;<br>type="...",按钮的类型(button,,submit,,reset);<br><FIELDSET></FIELDSET>,把相互关联的控件组合成一组;<br><ISINDEX>,提示用户输入;<br><LABEL></LABEL>,为一个控件提供标签;<br><LEGEND></LEGEND>,为FIELDSET元素指定一标题;<br><SELECT></SELECT>,为用户做选择创建各个选项;<br><TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表单标签注解</span>:<br>type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);<br>name="...",控件的控制名(要求是除了submit和reset之外的任何名字);<br>value="...",控件的初始值;<br>checked="...",把一个单选钮设置为选中的状态;<br>disabled="...",把控件的状态设置为不能使用;<br>readonly="...",只对输入密码的文本框使用;<br>size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;<br>src="...",一个图像控件的URL;<br>maxlength="...",指定可以输入的最多的字符数目;<br>alt="...",另外一种文本描述;<br>usemap="...",到客户端图形镜像的URL;<br>align="...",被反对.控制对齐方式(left,,center,,right,,justify);<br>tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;<br>οnfοcus="...",当元素获得焦点时发生的事件;<br>οnblur="...",当元素失去焦点时发生的事件;<br>οnselect="...",当元素被选中时发生的事件;<br>onchang="...",当元素状态被改变时发生的事件;<br>accept="...",允许上载的文件类型.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">帧标签</span>(框架标签):<br><frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;<br><frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;<br><frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;<br><frame>,定义一个帧内的单一窗或窗区域;<br><noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;<br><frame,src="URL">,规定帧内显示的HTML文档;<br><frame,name="name">,命名帧或区域以便别的帧可以指向它;<br><frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;<br><frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;<br><frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";<br><frame,noresize>,禁止用户调整一个帧的大小;<br><IFRAME></IFRAME>,创建一个内联的帧;<br>scr="...",定义在帧中显示的内容的来源;<br>frameborder="...",定义帧之间的边界(0或1);<br>align="...",被反对,控制对齐方式(left,,center,,right,,justify);<br>height="...",帧的高度,width="..."帧的宽度;<br><marquee>...</marquee>,普通卷动;<br><marquee,behavior=slide>...</marquee>,滑动;<br><marquee,behavior=scroll>...</marquee>,预设卷动;<br><marquee,behavior=alternate>...</marquee>,来回卷动;<br><marquee,direction=down>...</marquee>,向下卷动;<br><marquee,direction=up>...</marquee>,向上卷动;<br><marquee,direction=right></marquee>,向右卷动;<br><marquee,direction='left'></marquee>,向左卷动;<br><marquee,loop=2>...</marquee>,卷动次数;<br><marquee,width=180>...</marquee>,设定宽度;<br><marquee,height=30>...</marquee>,设定高度;<br><marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;<br><marquee,scrollamount=30>...</marquee>,设定卷动距离;<br><marquee,scrolldelay=300>...</marquee>,设定卷动时间;<br><img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">文档整体属性标签</span>:<br><body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;<br><body,background="">,设置背景图片;<br><body,bgsound="">,设置背景音乐;<br><body,bgproperties="fixed">,固定背景图片(IE适用);<br><body,text="">,设置文本颜色.使用名字或RGB的十六进制值;<br><body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;<br><body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;<br><body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;<br><body,topmargin="">,设置页面的上边距;<br><body,leftmargin="">,设置页面的左边距.</p> <h3> </h3> <p> </p> <h3><strong><span style="font-family: 宋体;">如何清除图片下方出现几像素的空白间隙？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>img{display:block;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>img{vertical-align:top;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">除了</span>top<span style="font-family: 宋体;">值，还可以设置为</span><span style="font-family: Verdana;">text-top | middle | bottom | text-bottom</span><span style="font-family: 宋体;">，甚至特定的</span><span style="font-family: Verdana;"><length></span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;"><percentage></span><span style="font-family: 宋体;">值都可以</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>3<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{font-size:0;line-height:0;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的父元素</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让文本垂直对齐文本输入框？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>input{vertical-align:middle;}</p> </td> </tr> </tbody> </table> <h3><strong><span style="font-family: 宋体;">　　</span></strong><strong><span style="font-family: 宋体;">如何让单行文本在容器内垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{height:25px;line-height:25px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">只需设置文本的行高等于容器的高度即可</span></p> <h3><strong><span style="font-family: 宋体;">如何让超链接访问后和访问前的颜色不同且访问后仍保留</span>hover<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">active</span><span style="font-family: 宋体;">效果？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>a:link{color:#03c;}</p> <p>a:visited{color:#666;}</p> <p>a:hover{color:#f30;}</p> <p>a:active{color:#c30;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　按</span>L-V-H-A<span style="font-family: 宋体;">的顺序设置超链接样式即可，可速记为</span><span style="font-family: Verdana;">LoVe</span><span style="font-family: 宋体;">（喜欢）</span><span style="font-family: Verdana;">HAte</span><span style="font-family: 宋体;">（讨厌）</span></p> <h3><strong><span style="font-family: 宋体;">为什么</span>Standard mode<span style="font-family: 宋体;">下</span><span style="font-family: 'Times New Roman';">IE</span><span style="font-family: 宋体;">无法设置滚动条的颜色？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </td> <td valign="top" width="0"> <p>html{</p> <p>    scrollbar-3dlight-color:#999;</p> <p>    scrollbar-darkshadow-color:#999;</p> <p>    scrollbar-highlight-color:#fff;</p> <p>    scrollbar-shadow-color:#eee;</p> <p>    scrollbar-arrow-color:#000;</p> <p>    scrollbar-face-color:#ddd;</p> <p>    scrollbar-track-color:#eee;</p> <p>    scrollbar-base-color:#ddd;</p> <p>}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">将原来设置在</span>body<span style="font-family: 宋体;">上的滚动条颜色样式定义到</span><span style="font-family: Verdana;">html</span><span style="font-family: 宋体;">标签选择符上即可</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使文本溢出边界不换行强制在一行内显示？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;white-space:nowrap;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">设置容器的宽度和</span>white-space<span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">nowrap</span><span style="font-family: 宋体;">即可，其效果类似</span><span style="font-family: Verdana;"><nobr></span><span style="font-family: 宋体;">标签</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使文本溢出边界显示为省略号？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法（此方法</span>Firefox5.0<span style="font-family: 宋体;">尚不支持）：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">首先需设置将文本强制在一行内显示，然后将溢出的文本通过</span>overflow:hidden<span style="font-family: 宋体;">截断，并以</span><span style="font-family: Verdana;">text-overflow:ellipsis</span><span style="font-family: 宋体;">方式将截断的文本显示为省略号。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使连续的长字符串自动换行？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;word-wrap:break-word;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">word-wrap<span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">break-word</span><span style="font-family: 宋体;">值允许单词内换行</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何清除浮动？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{clear:both;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的下一个兄弟元素</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{display:block;zoom:1;overflow:hidden;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的父元素。</span><span style="font-family: Verdana;">zoom:1</span><span style="font-family: 宋体;">也可以替换为固定的</span><span style="font-family: Verdana;">width</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">height</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>3<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>#test{zoom:1;}</p> <p>#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的父元素</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何定义鼠标指针的光标形状为手型并兼容所有浏览器？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{cursor:pointer;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　若将</span>cursor<span style="font-family: 宋体;">设置为</span><span style="font-family: Verdana;">hand</span><span style="font-family: 宋体;">，将只有</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">Opera</span><span style="font-family: 宋体;">支持，且</span><span style="font-family: Verdana;">hand</span><span style="font-family: 宋体;">为非标准属性值</span></p> <h3><strong><span style="font-family: 宋体;">如何让已知高度的容器在页面中水平垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <h3><strong><span style="font-family: 宋体;">如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}</p> <p>#test p{*position:absolute;*top:50%;*left:50%;margin:0;}</p> <p>#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">是</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的祖父节点，</span><span style="font-family: Verdana;">p</span><span style="font-family: 宋体;">是</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的父节点。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何设置</span>span<span style="font-family: 宋体;">的宽度和高度（即如何设置内联元素的宽高）？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>span{display:block;width:200px;height:100px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置</span>display<span style="font-family: 宋体;">属性，也可以设置</span><span style="font-family: Verdana;">float</span><span style="font-family: 宋体;">属性，或者</span><span style="font-family: Verdana;">position</span><span style="font-family: 宋体;">属性等等。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何给一个元素定义多个不同的</span>css<span style="font-family: 宋体;">规则？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> <td valign="top" width="0"> <p>.a{color:#f00;}</p> <p>.b{background:#eee;}</p> <p>.c{background:#ccc;}</p> <p> </p> <p><div>测试1</div></p> <p><div>测试2</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">多个规则之间使用空格分开，并且只有</span>class<span style="font-family: 宋体;">能同时使用多个规则，</span><span style="font-family: Verdana;">id</span><span style="font-family: 宋体;">不可以</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让某个元素充满整个页面？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>html,body{height:100%;margin:0;}</p> <p>#test{height:100%;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">如何让某个元素距离窗口上右下左</span>4<span style="font-family: 宋体;">边各</span><span style="font-family: 'Times New Roman';">10</span><span style="font-family: 宋体;">像素？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>html,body{height:100%;margin:0;}</p> <p>html{_padding:10px;}</p> <p>#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">如何去掉超链接的虚线框？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>a{outline:none;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">IE7<span style="font-family: 宋体;">及更早浏览器由于不支持</span><span style="font-family: Verdana;">outline</span><span style="font-family: 宋体;">属性，需要通过</span><span style="font-family: Verdana;">js</span><span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">blur()</span><span style="font-family: 宋体;">方法来实现，如</span><span style="font-family: Verdana;"><a onfocus="this.blur();"</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何容器透明，内容不透明？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> <td valign="top" width="0"> <p>.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}</p> <p>.inner{width:200px;height:200px;margin-top:-200px;}</p> <p> </p> <p><div><!--我是透明的容器--></div></p> <p><div>我是不透明的内容</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">原理是容器层与内容层并级，容器层设置透明度，内容层通过负</span>margin<span style="font-family: 宋体;">或者</span><span style="font-family: Verdana;">position</span><span style="font-family: 宋体;">绝对定位等方式覆盖到容器层上</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> <td valign="top" width="0"> <p>.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}</p> <p>.outer .inner{position:relative\9;}</p> <p> </p> <p><div></p> <p>    <div>我是不透明的内容</div></p> <p></div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">高级浏览器直接使用</span>rgba<span style="font-family: 宋体;">颜色值实现；</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让整个页面水平居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>body{text-align:center;}</p> <p>#test2{width:960px;margin:0 auto;text-align:left;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">定义</span>body<span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">text-align</span><span style="font-family: 宋体;">值为</span><span style="font-family: Verdana;">center</span><span style="font-family: 宋体;">将使得</span><span style="font-family: Verdana;">IE5.5</span><span style="font-family: 宋体;">也能实现居中</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何做</span>1<span style="font-family: 宋体;">像素细边框的</span><span style="font-family: 'Times New Roman';">table</span><span style="font-family: 宋体;">？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> <td valign="top" width="0"> <p>#test{border-collapse:collapse;border:1px solid #ddd;}</p> <p>#test th,#test td{border:1px solid #ddd;}</p> <p> </p> <p><table id="test"></p> <p>    <tr><th>姓名</th><td>Joy Du</td></tr></p> <p>    <tr><th>年龄</th><td>26</td></tr></p> <p></table></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> <td valign="top" width="0"> <p>#test{border-spacing:1px;background:#ddd;}</p> <p>#test tr{background:#fff;}</p> <p> </p> <p><table id="test" cellspacing="1"></p> <p>    <tr><th>姓名</th><td>Joy Du</td></tr></p> <p>    <tr><th>年龄</th><td>26</td></tr></p> <p></table></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">IE7<span style="font-family: 宋体;">及更早浏览器不支持</span><span style="font-family: Verdana;">border-spacing</span><span style="font-family: 宋体;">属性，但是可以通过</span><span style="font-family: Verdana;">table</span><span style="font-family: 宋体;">的标签属性</span><span style="font-family: Verdana;">cellspacing</span><span style="font-family: 宋体;">来替代。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使页面文本行距始终保持为</span>n<span style="font-family: 宋体;">倍字体大小的基调？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>body{line-height:n;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">注意，不要给</span>n<span style="font-family: 宋体;">加单位。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">标准模式</span>Standard mode<span style="font-family: 宋体;">和怪异模式</span><span style="font-family: 'Times New Roman';">Quirks mode</span><span style="font-family: 宋体;">下的盒模型区别？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <p class="pre"><span style="font-family: 宋体;">标准模式下：</span>Element width = width + padding + border</p> <p class="pre"><span style="font-family: 宋体;">怪异模式下：</span>Element width = width</p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">为什么</span>2<span style="font-family: 宋体;">个相邻</span><span style="font-family: 'Times New Roman';">div</span><span style="font-family: 宋体;">的</span><span style="font-family: 'Times New Roman';">margin</span><span style="font-family: 宋体;">只有</span><span style="font-family: 'Times New Roman';">1</span><span style="font-family: 宋体;">个生效？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> <td valign="top" width="0"> <p>.box1{margin:10px 0;}</p> <p>.box2{margin:20px 0;}</p> <p> </p> <p><div>box1</div></p> <p><div>box2</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">本例中</span>box1<span style="font-family: 宋体;">的底部</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">10px</span><span style="font-family: 宋体;">，</span><span style="font-family: Verdana;">box2</span><span style="font-family: 宋体;">的顶部</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">20px</span><span style="font-family: 宋体;">，但表现在页面上</span><span style="font-family: Verdana;">2</span><span style="font-family: 宋体;">者之间的间隔为</span><span style="font-family: Verdana;">20px</span><span style="font-family: 宋体;">，而不是预想中的</span><span style="font-family: Verdana;">10+20px=30px</span><span style="font-family: 宋体;">，结果是选择</span><span style="font-family: Verdana;">2</span><span style="font-family: 宋体;">者之间最大的那个</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">，我们把这种机制称之为</span><span style="font-family: Verdana;">“</span><span style="font-family: 宋体;">外边距合并</span><span style="font-family: Verdana;">”</span><span style="font-family: 宋体;">；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。</span></p> <p class="p"><span style="font-family: 宋体;">简单列举几点注意事项</span>: </p> <p><span style="font-family: 宋体;">外边距合并只出现在块级元素上；</span> <br><span style="font-family: 宋体;">浮动元素不会和相邻的元素产生外边距合并；</span> <br><span style="font-family: 宋体;">绝对定位元素不会和相邻的元素产生外边距合并；</span> <br><span style="font-family: 宋体;">内联块级元素间不会产生外边距合并；</span> <br><span style="font-family: 宋体;">根元素间不会不会产生外边距合并（如</span>html与body间）； <br><span style="font-family: 宋体;">设置了属性</span>overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；</p> <p class="p"> </p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何在文本框中禁用中文输入法？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>input,textarea{ime-mode:disabled;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">ime-mode<span style="font-family: 宋体;">为非标准属性，写该文档时只有</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">Firefox</span><span style="font-family: 宋体;">支持</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何解决列表中</span>list-style-image<span style="font-family: 宋体;">不能精准定位的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <p class="p"><span style="font-family: 宋体;">不使用</span>list-style-image<span style="font-family: 宋体;">来定义列表项目标记符号，而用</span><span style="font-family: Verdana;">background-image</span><span style="font-family: 宋体;">来代替，并通过</span><span style="font-family: Verdana;">background-position</span><span style="font-family: 宋体;">来进行定位</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何解决伪对象</span>:before<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">:after</span><span style="font-family: 宋体;">在</span><span style="font-family: 'Times New Roman';">input</span><span style="font-family: 宋体;">标签上的怪异表现的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">现象：</span></strong></p> <p><span style="font-family: 宋体;">在编写本条目时，除了</span>Opera<span style="font-family: 宋体;">，在所有浏览器下</span><span style="font-family: Verdana;">input</span><span style="font-family: 宋体;">标签使用伪对象</span><span style="font-family: Verdana;">:before</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">:after</span><span style="font-family: 宋体;">都没有效果，即使</span><span style="font-family: Verdana;">Opera</span><span style="font-family: 宋体;">的表现也同样令人诧异。大家可以试玩一下。浏览器版本：</span><span style="font-family: Verdana;">IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">以图换字的几种方法及优劣分析</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">思路</span>1<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">text-indent</span><span style="font-family: 宋体;">的负值，将内容移出容器</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}</p> <p> </p> <p><div>以图换字之内容负缩进法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法优点在于结构简洁，不理想的地方：</span>1.<span style="font-family: 宋体;">由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；</span><span style="font-family: Verdana;">2.</span><span style="font-family: 宋体;">当该元素为链接时，在非</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">下虚线框将变得不完整；</span><span style="font-family: Verdana;">3.</span><span style="font-family: 宋体;">如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>2<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">display:none</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">visibility:hidden</span><span style="font-family: 宋体;">将内容隐藏；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}</p> <p>.test span{visibility:hidden;/* 或者display:none */}</p> <p> </p> <p><div><span>以图换字之内容隐藏法</span></div></p> </td> </tr> </tbody> </table> <p class="p"><span style="text-decoration: underline;"><span style="font-family: 宋体;">摄图网</span></span>https://www.wode007.com/sites/73204.html <span style="text-decoration: underline;">VJ<span style="font-family: 宋体;">师网</span></span>https://www.wode007.com/sites/73287.html</p> <p class="p"><span style="font-family: 宋体;">该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>3<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">padding</span><span style="font-family: 宋体;">或者</span><span style="font-family: Verdana;">line-height</span><span style="font-family: 宋体;">将内容挤出容器之外；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}</p> <p>.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}</p> <p> </p> <p><div>以图换字之内容排挤法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法优点在于结构简洁，缺点在于：</span>1.<span style="font-family: 宋体;">由于使用场景不同，</span><span style="font-family: Verdana;">padding</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">line-height</span><span style="font-family: 宋体;">的值可能会不一样，不易抽象成公用样式；</span><span style="font-family: Verdana;">2.</span><span style="font-family: 宋体;">要兼容</span><span style="font-family: Verdana;">IE5.5</span><span style="font-family: 宋体;">及更早浏览器还得</span><span style="font-family: Verdana;">hack</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>4<span style="font-family: 宋体;">：使用超小字体和文本全透明法；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}</p> <p><div>以图换字之超小字体+文本全透明法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法结构简单易用，推荐使用</span></p> <h3><strong><span style="font-family: 宋体;">如何解决伪对象</span>:before<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">:after</span><span style="font-family: 宋体;">无法在</span><span style="font-family: 'Times New Roman';">Chrome,Safari,Opera</span><span style="font-family: 宋体;">上定义过渡和动画的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">现象：</span></strong></p> <p><span style="font-family: 宋体;">在编写本条目时，除了</span>Firefox<span style="font-family: 宋体;">，在所有浏览器下伪对象</span><span style="font-family: Verdana;">:before</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">:after</span><span style="font-family: 宋体;">无法定义过渡和动画效果。浏览器版本：</span><span style="font-family: Verdana;">IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51</span><span style="font-family: 宋体;">。如果这个过渡或动画效果是必须，可以考虑使用真实对象。</span></p> <p class="p"> </p> <p><strong> </strong></p> <h1>css+html 总结+归纳</h1> <p class="p"><span style="font-family: 'Segoe UI';">趁着清明的</span>3天时间，我专门看了xhtml的一套视频，虽然是xhtml但是也隐喻了很多经验，巩固了一下自己的基础，我自己也写了很多大大小小的东西，但是越写我越发觉自己基础的薄弱，果然没错！还是学到了一些我以前没理解、不知道的一些概念和一些经验之谈，这里我写一篇文章做一个总结。</p> <p class="p"> </p> <p class="p"><strong><span style="font-family: 'Segoe UI';">一、首先</span>W3C标准</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">结构、表现、动作</span>  与  html、css、javascript相对应，它本意是结构表现分离，而且按照html规范编写结构。</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">标签方面：</span></strong></p> <p class="p">-所有标签都要小写、关闭、并且合理嵌套，id不能重复</p> <p class="p">-标签要有属性，属性必须有值，并且用“”表示</p> <p class="p">-img标签不能忽略alt属性</p> <p class="p">-表格标签不适用height属性</p> <p class="p">-尽量减少ifream的使用会影响浏览器响应速度，虽然在html5中也能使用ifream</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">内容模型：</span></strong></p> <p class="p">-body、form、blockquote仅能包含块级元素</p> <p class="p">-文本、图像、链接等内联元素不能直接暴露在body标签中，必须用其他标签包裹</p> <p class="p">-内联元素不能包含块级元素</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">其他方面：</span></strong></p> <p class="p">-特殊字符用编码表示</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">番外：</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">初学者的误区：</span></p> <p class="p">1、div是万能的！</p> <p class="p">2、table是丢人的！</p> <p class="p">3、为标准而标准</p> <p class="p">1、div严格意义上称作容器，大家有一些页面的装饰可以通过嵌套div来实现，但是千万不能整个页面全都用div来编写，很多标签是有特定含义的，比如说h1~h3，p，strong等，在html5中就更加语义化了比如，footer、head、nav、article、section等标签，还有很多标签，我这里只说常用的一些标签，而且如果整个页面全都用div来写不便于搜索引擎搜索到你的网站。</p> <p class="p">2、table并不丢人，只不过很少用而已，table是用来装载数据的，所有标签只要合理应用就不会丢人。</p> <p class="p">3、我们写网站网页其实说白了是为了客户和用户来看的，根据他们的需求我们学出对应的网站，我们强调页面应该灵活编写，不能死板的来。</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">二、你必须掌握的</span></strong></p> <p class="p"><strong>1、块状元素和内联元素</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>1）块状元素</p> <p class="p"><span style="font-family: 'Segoe UI';">块元素一般是其他元素的的容器元素，块元素一般从新的一行开始，它可以容纳文本、内联元素和其他块状元素，通过</span>width和height属性可以设置其大小，常见的块元素有 h标签 和p标签、div标签</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span>form标签也属于块标签并且只能容纳块级标签</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>2）内联元素</p> <p class="p"><span style="font-family: 'Segoe UI';">内联元素非块级元素。内联元素只能容纳文本或者其他内联元素，不会独占一行，</span>width和height对其不起作用，常见的内联元素有 a img span 等</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span> <span style="font-family: 'Segoe UI';">这里我提一下</span> w3c为了让开发人员更方便 增加了一个 inline-block 属性值 ，包含块状元素的特点：能够改变元素大小，也包含内联元素的特点：大小只有盒内元素大小</p> <p class="p"><strong>2、盒子模型</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">下图能代表所有，具体和深入请看各种大神技术博：</span></p> <p class="p"> </p> <p class="p"><strong>3、css页面控制样式方法</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>1）行内式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>2）内嵌式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>3）链接式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>4）导入式</p> <p class="p"><span style="font-family: 'Segoe UI';">优先级：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">就近元素，行内</span>>内嵌>链接>导入，在国内经前端经常用的是 链接式。</p> <p class="p"><strong>4、常用选择器</strong></p> <p class="p">-标签选择器（div、p）</p> <p class="p">-id选择器（#）</p> <p class="p">-类选择器（.）</p> <p class="p">-通用选择器（*）</p> <p class="p">-伪类选择器（:link,:active,:hover,:visited）</p> <p class="p"><span style="font-family: 'Segoe UI';">优先级：</span></p> <p class="p">ID>类>标签>通用</p> <p class="p"><strong>5、文本流</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">文本流讲述的是一个概念性的东西，页面内的元素是：从上至下、从左自右的顺序进行排列的。</span></p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">如何脱离文本流？</span></p> <p class="p"><span style="font-family: 'Segoe UI';">我们为了方便布局，通常使用浮动和定位的方式布局</span></p> <p class="p"><strong>6、命名方法</strong></p> <p class="p">-骆驼命名法</p> <p class="p">-帕斯卡命名法</p> <p class="p">-匈牙利命名法</p> <p class="p">-或者全首字母大写</p> <p class="p"><span style="font-family: 'Segoe UI';">命名规则：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">头：</span>head/header</p> <p class="p"><span style="font-family: 'Segoe UI';">内容：</span>content/container</p> <p class="p"><span style="font-family: 'Segoe UI';">尾：</span>foot/footer</p> <p class="p"><span style="font-family: 'Segoe UI';">导航：</span>nav/navigation</p> <p class="p"><span style="font-family: 'Segoe UI';">侧栏</span>: sidebar</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">三、</span>css的控制能力</strong></p> <p class="p"><strong>1、首行缩进</strong></p> <p class="p">text-indent:2em; </p> <p class="p"><span style="font-family: 'Segoe UI';">如果文字是英文，也是缩进</span>2个汉字的宽度</p> <p class="p"><span style="font-family: 'Segoe UI';">知识点：</span></p> <p class="p">px 像素</p> <p class="p">rem 相对浏览器的单位</p> <p class="p">% 百分比单位</p> <p class="p">cm、mm 绝对单位</p> <p class="p"><strong>2、增强页面文字灵活性</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">在</span>body中设置文字大小font-size：62.5% 在需要设置12px的地方设置文字大小为1.2em以此类推14px相对1.4em</p> <p class="p"><span style="font-family: 'Segoe UI';">因为任意浏览器默认字体高度为</span>16px   1em=16px</p> <p class="p">1px=1/16em   10px=10/16em=0.625em=0.625*1em=62.5%*1em</p> <p class="p">12px=62.5%*1.2em</p> <p class="p">14px=62.5%*1.4em</p> <p class="p">16px=62.5%*1.6em</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p">ie下设置1.2em会比12px大，为什么？ 怎么处理？</p> <p class="p"><span style="font-family: 'Segoe UI';">因为</span>ie浏览器总是吧 62.5 小数点换算错所以我们以后设置页面大小直接设置为63%就可以兼容所有浏览器</p> <p class="p"><strong>3、浮动和定位</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">浮动：</span></p> <p class="p">float：left</p> <p class="p">float：right</p> <p class="p"><span style="font-family: 'Segoe UI';">定位：</span></p> <p class="p">position:absolute</p> <p class="p">position:relative</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">清除浮动：</span></p> <p class="p">-clear：both</p> <p class="p">-clear：left</p> <p class="p">-clear：right</p> <p class="p"><span style="font-family: 'Segoe UI';">浮动清除的并不是本元素的浮动，清除的是上级元素对于本元素的影响，我们可以讲页面整体分为三级</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第一级是文本流</span> <span style="font-family: 'Segoe UI';">也就是页面默认的显示方式</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第二级是浮动</span> <span style="font-family: 'Segoe UI';">它脱离文本流向上一层</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第三级是定位</span> <span style="font-family: 'Segoe UI';">它是比浮动更高一级的为第三级</span></p> <p class="p"><strong>4、position</strong></p> <p class="p">-absolute</p> <p class="p">-relative</p> <p class="p">-static</p> <p class="p">-Inherit</p> <p class="p">-Fixed</p> <p class="p">Absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，绝对定位比较灵活如果你想，可以定位到浏览器的任意点</p> <p class="p">Relative: 相对定位，相对与父级盒子定位</p> <p class="p">static：默认的元素定位方式</p> <p class="p">inherit：继承父级盒子的position属性   这个没多大用，如果我们要继承的话，倒不如自己重写一个省的自己再找一遍元素。</p> <p class="p">Fixed：元素固定在浏览器body的一个位置，浏览器上拉下拉都不会改变位置</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：一般网站都是都是以浮动为主，定位为辅，你们可以看看现在的淘宝网站。</span></p> <p class="p"><strong>5、CSS Reset </strong></p> <p class="p">css样式具有继承和重置的作用</p> <p class="p"><span style="font-family: 'Segoe UI';">常用的</span>CSS Reset</p> <p class="p">*{ margin:0,padding:0 }</p> <p class="p">body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}</p> <p class="p">table {border-collapse: collapse; border-spacing: 0;}</p> <p class="p">img {border: 0;}</p> <p class="p">ol,ul{list-style: none;}</p> <p class="p">h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">四：页面调试</span>/纠错方法</strong></p> <p class="p">1、页面debug调试</p> <p class="p">2、排除法</p> <p class="p">3、设置背景法</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">番外：</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">网站的页面的加载顺序是按照文本流的顺序加载，</span></p> <p class="p"><span style="font-family: 'Segoe UI';">我们编写页面优先考虑：</span></p> <p class="p">1、搜索引擎加载</p> <p class="p">2、便于浏览者观察</p> <p class="p">3、页面结构简单整洁</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">最后</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">告诉大家一个调试神器：</span>http://getf5.com/</p> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1296095926204571648"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(常用的HTML标签和属性解释、css实用小技巧_css常用技巧和经验总汇)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1884178960275795968.htm" title="python 执行时 命令行传入参数" target="_blank">python 执行时 命令行传入参数</a> <span class="text-muted">托马斯-木</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>例如要执行test文件，想要将aaa和123传入test作为一个变量传入执行pythontest.pyaaa123方法1使用argparseimportargparseif__name__=="__main__":parser=argparse.ArgumentParser()parser.add_argument('--aa',type=str,default=None)parser.add_a</div> </li> <li><a href="/article/1884178455889768448.htm" title="C# --什么时候用迭代器（Iterator）？" target="_blank">C# --什么时候用迭代器（Iterator）？</a> <span class="text-muted">guorui24ggg</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/%E8%BF%AD%E4%BB%A3%E5%99%A8/1.htm">迭代器</a><a class="tag" taget="_blank" href="/search/Iterator/1.htm">Iterator</a><a class="tag" taget="_blank" href="/search/%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8/1.htm">什么时候用</a> <div>C#--什么时候用迭代器（Iterator）？1.前言2.迭代器简介3.什么时候用4.总结1.前言众所周知，完成一个软件功能，方法可能有很多种。从某种角度看，似乎只要能够实现这个功能，那么任务就完成了。刚开始写代码的时候，很多人都是这么想的，心里甚至还会自我鼓励，功能都搞定了，还管那么多干啥。随着时间和水平的推进，学习到了一些新特性和方法，突然发现之前的代码还可以这样写。此时是选择回去重构之前的代</div> </li> <li><a href="/article/1884177951323385856.htm" title="100个高质量ChatGPT学术论文写作提示词分享--系列（一）" target="_blank">100个高质量ChatGPT学术论文写作提示词分享--系列（一）</a> <span class="text-muted">迪娜学姐</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E9%98%85%E8%AF%BB/1.htm">论文阅读</a> <div>我是娜姐@迪娜学姐，一个SCI医学期刊编辑，探索用AI工具提效论文写作和发表。ChatGPT学术论文写作高质量提示词分享，今天先分享50个，涵盖论文写作、文献综述、研究方法设计、数据分析、学术演讲准备等方面。1.论文写作(ThesisWriting)1.为[研究主题]制定一个引人入胜的论文标题，突出其创新性和重要性。Craftanengagingthesistitlefor[researchtop</div> </li> <li><a href="/article/1884177951994474496.htm" title="100个高质量ChatGPT学术论文写作提示词分享--系列（二）" target="_blank">100个高质量ChatGPT学术论文写作提示词分享--系列（二）</a> <span class="text-muted">迪娜学姐</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E9%98%85%E8%AF%BB/1.htm">论文阅读</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E7%AC%94%E8%AE%B0/1.htm">论文笔记</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a> <div>我是娜姐@迪娜学姐，一个SCI医学期刊编辑，探索用AI工具提效论文写作和发表。ChatGPT学术论文写作高质量提示词分享，之前分享过50个，涵盖论文写作、文献综述、研究方法设计、数据分析、学术演讲准备等方面：100个高质量ChatGPT学术论文写作提示词分享--系列（一）今天继续分享50个，包括论文修改与编辑、写作技巧与提升、参考文献引用及编辑、论文投稿和课题申请：6论文修改与编辑(ThesisR</div> </li> <li><a href="/article/1884177697228255232.htm" title="Spring Boot 接口防抖 + AOP注解 + 自定义异常处理 (防重复提交)的实现方案" target="_blank">Spring Boot 接口防抖 + AOP注解 + 自定义异常处理 (防重复提交)的实现方案</a> <span class="text-muted">cherry5230</span> <a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>前言在开发后端Java业务系统，包括各种管理后台和小程序等。在这些项目中，我设计过单/多租户体系系统，对接过许多开放平台，也搞过消息中心这类较为复杂的应用，但幸运的是，我至今还没有遇到过线上系统由于代码崩溃导致资损的情况。这其中的原因有三点：一是业务系统本身并不复杂；二是我一直遵循某大厂代码规约，在开发过程中尽可能按规约编写代码；三是经过多年的开发经验积累，我成为了一名熟练工，掌握了一些实用的技巧</div> </li> <li><a href="/article/1884177318876868608.htm" title="【附源码】基于flask框架奶茶连锁管理系统 (python+mysql+论文)" target="_blank">【附源码】基于flask框架奶茶连锁管理系统 (python+mysql+论文)</a> <span class="text-muted">JAVA程序设计</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>本系统（程序+源码）带文档lw万字以上文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景：</div> </li> <li><a href="/article/1884177064286810112.htm" title="常用的前端4种请求方式" target="_blank">常用的前端4种请求方式</a> <span class="text-muted">紫水木鱼</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录一、GET请求1.1使用方式1.2优缺点1.3应用场景二、POST请求2.1使用方式2.2优缺点2.3应用场景三、PUT请求3.1使用方式3.2优缺点3.３应用场景四、DELETE请求4.1使用方式4.2优缺点4.3应用场景五.总结一、GET请求GET请求用于向指定资源发出请求，请求中包含了资源的URL和请求参数。服务器端通过解析请求参数来返回相应的资源，不会修改服务器端的状态。1.1使用</div> </li> <li><a href="/article/1884176178982481920.htm" title="Python json.load() 和 json.loads()及json.dump()和json.dumps()的区别" target="_blank">Python json.load() 和 json.loads()及json.dump()和json.dumps()的区别</a> <span class="text-muted">知识的宝藏</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>json.load()和json.loads()json.load()和json.loads()都是Python中用于处理JSON数据的函数，它们之间的主要区别在于它们从何处读取JSON数据。json.load():这个函数用于从文件对象（例如，通过open()函数打开的文件）中读取JSON数据，并将其解析为Python对象。它通常用于从文件中读取JSON数据。例如：importjsonwitho</div> </li> <li><a href="/article/1884175926766399488.htm" title="python传入命令行参数" target="_blank">python传入命令行参数</a> <span class="text-muted">Mett_Smith</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>1.pycharm要想快速调出命令行参数设置面板，快捷键为alt+shift+F10，之后按下0即可2.pycharm输入的命令行参数默认为字符型变量（默认设置可能随编辑器变化而变化），例如：a=sys.argv[1]b=sys.argv[2]在参数变量中输入5和6，等同于：a='5'b='6'3.究其原因，是由于python语言本身的限制，导致变量没有固定的类型，IDE不能自动识别参数类型所致，</div> </li> <li><a href="/article/1884175797690888192.htm" title="python split() 和 chunk() 的区别" target="_blank">python split() 和 chunk() 的区别</a> <span class="text-muted">Joyner2018</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在编程中，使用split()和chunk()的选择取决于具体的应用场景和需求。两者的功能有所不同：1.在python中split()方法作用:通常用于将字符串分割成子字符串列表。例如，在Python中：split()是基于一个分隔符（如空格、逗号等）分割字符串。优点:简单直观:用于处理基于某些字符或模式分割的字符串。高效:对于解析固定格式的字符串非常高效，例如CSV数据或日志解析。广泛支持:几乎所</div> </li> <li><a href="/article/1884175671387811840.htm" title="一文讲解Java中Object类常用的方法" target="_blank">一文讲解Java中Object类常用的方法</a> <span class="text-muted">Journey_CR</span> <a class="tag" taget="_blank" href="/search/JavaSE/1.htm">JavaSE</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Java中，经常提到一个词“万物皆对象”，其中的“万物”指的是Java中的所有类，而这些类都是Object类的子类；Object主要提供了11个方法，大致可以分为六类：对象比较：publicnativeinthashCode():native方法，用于返回对象的哈希码；publicnativeinthashCode();publicinthashCode(){returnObjects.hash</div> </li> <li><a href="/article/1884175670926438400.htm" title="边缘存储如何高效存储和调用数据?" target="_blank">边缘存储如何高效存储和调用数据?</a> <span class="text-muted">Jtti</span> <a class="tag" taget="_blank" href="/search/%E8%BE%B9%E7%BC%98%E8%AE%A1%E7%AE%97/1.htm">边缘计算</a> <div>边缘存储(EdgeStorage)是将数据存储和处理推向网络的边缘设备，而不是将所有数据都发送回中心化的数据中心。它的主要优势在于减少延迟、节省带宽，并提高数据处理效率。要高效存储和调用数据，边缘存储需要结合合理的技术架构、存储策略和管理机制。以下是实现高效边缘存储和数据调用的几个关键策略：1.数据分层存储(1)边缘层边缘设备通常具有限制的计算和存储资源。将不需要实时访问的数据或低频访问的数据保存</div> </li> <li><a href="/article/1884174157755772928.htm" title="在Visual Studio Code中配置C/C++开发环境——从零开始" target="_blank">在Visual Studio Code中配置C/C++开发环境——从零开始</a> <span class="text-muted">HYP_Coder</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>如何在VisualStudioCode中配置C/C++开发环境——从零开始引言在学习C/C++编程时，一个高效的开发环境可以极大地提升你的编程体验和效率。VisualStudioCode（VSCode）是一个流行的代码编辑器，它以其强大的功能和灵活的配置而闻名。即使你之前从未编写过任何代码，这篇文章也将带你一步步了解如何在VSCode中配置C/C++开发环境，让你能够顺利地开始编写、编译和调试C/</div> </li> <li><a href="/article/1884172646610956288.htm" title="机房局域网聊天客户端1.0" target="_blank">机房局域网聊天客户端1.0</a> <span class="text-muted">InF-POP</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>importsocketimportthreading#客户端的地址和端口SERVER_HOST='10.177.32.18'SERVER_PORT=19198#创建一个socket连接到服务器client_socket=socket.socket(socket.AF_INET,socket.SOCK_STREAM)client_socket.connect((SERVER_HOST,SERVER</div> </li> <li><a href="/article/1884172142308814848.htm" title="Android Studio APK打包(签名)，【大牛系列教学】" target="_blank">Android Studio APK打包(签名)，【大牛系列教学】</a> <span class="text-muted">2401_84150187</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>release版本的未签名的apk文件，在某些手机上无法安装，比如OPPOdebug版和release版的区别：debug版包含调试信息，往往没有任何优化，适合程序调试release版是发布版，供用户使用，往往进行了各种优化一、新建项目本着实践的态度，新建一个GenerateAPK项目创建完成后，你可以运行一下，运行在趁机或者虚拟机都可以二、生成Debug和Release包当你看到这个页面的时候，</div> </li> <li><a href="/article/1884171890054983680.htm" title="Python下3种文字识别工具的源码和效果比较" target="_blank">Python下3种文字识别工具的源码和效果比较</a> <span class="text-muted">eybk</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.pytesseractimportpytesseractfromPILimportImageim=Image.open(r'C:/Users/YBK/Pictures/35005.jpg')string=pytesseract.image_to_string(im,lang='chi_sim')print(string)2.paddleocrfrompaddleocrimportPaddleO</div> </li> <li><a href="/article/1884170503422275584.htm" title="AI智能获客工具的意义是什么" target="_blank">AI智能获客工具的意义是什么</a> <span class="text-muted">雪叶雨林</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%9A%E8%B5%84%E8%AE%AF/1.htm">行业资讯</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>在当今竞争激烈的市场环境中，企业需要高效、精准的获客策略来维持增长和竞争力。AI智能获客工具的出现，为企业提供了一种全新的解决方案，通过自动化和智能化手段提高获客效率和质量。一、AI智能获客工具的核心价值1.1提高获客效率AI智能获客工具通过自动化流程，如自动筛选潜在客户、自动发送营销信息等，大幅减少了人力投入和时间成本，从而提高了获客效率。1.2精准定位潜在客户利用机器学习和大数据分析技术，AI</div> </li> <li><a href="/article/1884170377094033408.htm" title="git Bash通过SSH key 登录github的详细步骤" target="_blank">git Bash通过SSH key 登录github的详细步骤</a> <span class="text-muted">Better Bench</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90/1.htm">学习资源</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>1问题通过在windows终端中的通过git登录github不再是通过密码登录了，需要本地生成一个密钥，配置到gihub中才能使用2步骤（1）首先配置用户名和邮箱gitconfig--globaluser.name"用户名"gitconfig--globaluser.email"邮箱"（2）其次在本地生成SSH的密钥ssh-keygen-trsa-b4096-C"邮箱"这一步会提示，生成的SSH公</div> </li> <li><a href="/article/1884170125045723136.htm" title="详解 Python 中的json.loads和json.dumps方法：中英双语" target="_blank">详解 Python 中的json.loads和json.dumps方法：中英双语</a> <span class="text-muted">阿正的梦工坊</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>中文版详解Python中的json.loads和json.dumps方法在Python的标准库中，json模块用于处理JSON数据格式。JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，广泛用于前后端交互以及数据存储。json.loads和json.dumps是json模块中最常用的两个方法，分别用于解析JSON字符串和将Python对象序列化为JSON字符串</div> </li> <li><a href="/article/1884168866108600320.htm" title="分布式组件底层逻辑是什么?" target="_blank">分布式组件底层逻辑是什么?</a> <span class="text-muted">Jtti</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>分布式组件的底层逻辑围绕如何在多节点系统中实现协调、通信和可靠性展开，其核心目标是通过协作提供高可用、高性能和容错能力的服务。以下是分布式组件的核心底层逻辑：1.核心概念与原理1.1数据一致性分布式系统中，多个节点可能会同时处理数据，如何保持一致性是核心问题。CAP定理：C(Consistency)：所有节点对同一数据的视图一致。A(Availability)：每个请求都能得到响应(不保证最新数据</div> </li> <li><a href="/article/1884168110223716352.htm" title="MySQL安装后设置和测试" target="_blank">MySQL安装后设置和测试</a> <span class="text-muted">Run Out Of Brain</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>本节讨论安装MySQL后应执行的任务：1、如有必要，初始化数据目录并创建MySQL授权表。对于一些MySQL安装方法，数据目录初始化可能会自动为您完成：由MSI安装程序和MySQL配置程序执行的Windows安装操作。安装在Linux使用从Oracle下载的服务器rpm或Debian发行。在许多平台上使用本机打包系统安装，包括DebianLinux、UbuntuLinux、GentooLinux等</div> </li> <li><a href="/article/1884167479631081472.htm" title="【STM32】直接内存访问DMA" target="_blank">【STM32】直接内存访问DMA</a> <span class="text-muted">大雨淅淅</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/1.htm">嵌入式开发</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a> <div>目录一、工作原理二、组成部分三、优缺点3.1优点3.2缺点四、基于STM32的DMA驱动程序4.1硬件准备4.2软件准备4.3使用STM32CubeMX进行配置4.3.1选择芯片4.3.2配置时钟4.3.3配置串口4.3.4配置DMA4.3.5生成代码4.4编写DMA驱动代码4.5.代码解释4.6编译和下载4.7DMA中断处理（可选）直接内存访问（DirectMemoryAccess，简称DMA）</div> </li> <li><a href="/article/1884167478045634560.htm" title="【前端】Node.js使用教程" target="_blank">【前端】Node.js使用教程</a> <span class="text-muted">大雨淅淅</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录一、Node.js开发环境和编译1.1安装Node.js1.2创建一个Node.js项目1.3编写Node.js程序1.4运行Node.js程序1.5使用Node.js模块二、高级的Node.js编程概念和示例2.1异步编程2.2错误处理2.3网络请求2.4构建Web服务器2.5数据库交互三、Node.js开发中重要方面和概念3.1环境变量和配置文件3.1.1使用环境变量3.1.2使用配置文件</div> </li> <li><a href="/article/1884167225804386304.htm" title="LeetCode：70. 爬楼梯" target="_blank">LeetCode：70. 爬楼梯</a> <span class="text-muted">xiaoshiguang3</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E9%9A%8F%E6%83%B3%E5%BD%95-%E8%B7%9F%E7%9D%80Carl%E5%AD%A6%E7%AE%97%E6%B3%95/1.htm">代码随想录-跟着Carl学算法</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a> <div>跟着carl学算法，本系列博客仅做个人记录，建议大家都去看carl本人的博客，写的真的很好的！代码随想录LeetCode：70.爬楼梯假设你正在爬楼梯。需要n阶你才能到达楼顶。每次你可以爬1或2个台阶。你有多少种不同的方法可以爬到楼顶呢？示例1：输入：n=2输出：2解释：有两种方法可以爬到楼顶。1阶+1阶2阶示例2：输入：n=3输出：3解释：有三种方法可以爬到楼顶。1阶+1阶+1阶1阶+2阶2阶+</div> </li> <li><a href="/article/1884165966888235008.htm" title="人物传记之新月篇" target="_blank">人物传记之新月篇</a> <span class="text-muted">暮雨哀尘</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%89%A9%E4%BC%A0%E8%AE%B0%E7%AF%87/1.htm">人物传记篇</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>相关故事链接（及时更新）：Python的那些事第四篇：编程中的智慧之光控制结构-CSDN博客目录1.C语言程序：增强版加密与解密工具2.Python程序：增强版加密与解密工具功能对比表格详细功能解释人物传记简介新月，25世纪的杰出女性，以其在编程、人工智能和军事战略领域的卓越成就而闻名。她不仅是一位才华横溢的科学家，还是一位深受尊敬的军事领袖。新月的故事是关于智慧、勇气和创新精神的传奇。早年生活新</div> </li> <li><a href="/article/1884165588855615488.htm" title="软件设计中的“后悔药”-备忘录模式" target="_blank">软件设计中的“后悔药”-备忘录模式</a> <span class="text-muted">晚秋贰拾伍</span> <a class="tag" taget="_blank" href="/search/%E5%A4%87%E5%BF%98%E5%BD%95%E6%A8%A1%E5%BC%8F/1.htm">备忘录模式</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AE%89%E5%85%A8/1.htm">系统安全</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E9%9C%80%E6%B1%82/1.htm">软件需求</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91/1.htm">运维开发</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>行为型模式的名称、定义、学习难度和使用频率如下表所示：1.如何理解备忘录模式备忘录模式（MementoPattern）：在不破坏封装的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，这样可以在以后将对象恢复到原先保存的状态。它是一种对象行为型模式，其别名为Token。在代码中，备忘录模式通常包含三个主要的角色：原发器（Originator）、备忘录（Memento）和负责人。原发器是需</div> </li> <li><a href="/article/1884164832320614400.htm" title="python的优劣势-Python语言的优缺点是什么呢?" target="_blank">python的优劣势-Python语言的优缺点是什么呢?</a> <span class="text-muted">weixin_39777488</span> <div>Python目前是比较流行的语言，深受广大程序员的喜爱，不仅仅是因为其语言本身突出的优势，也是由目前Python的语言地位决定的，很多人可能已经了解过Python是什么?但是并不清楚Python语言的优缺点是什么?今天我们就一起来探讨一下这个问题，希望各位小伙伴能清楚的了解Python语言的优缺点。Python这门语言的魅力和影响力已经远超Java、C、C++等编程语言前辈，2018年主流的十大编</div> </li> <li><a href="/article/1884164829636259840.htm" title="【Java基础-41.5】深入解析Java异常链：构建清晰的错误追踪体系" target="_blank">【Java基础-41.5】深入解析Java异常链：构建清晰的错误追踪体系</a> <span class="text-muted">AllenBright</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Java%E5%9F%BA%E7%A1%80/1.htm">Java基础</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Java编程中，异常处理是保证程序健壮性和可维护性的重要部分。然而，在实际开发中，异常往往不是孤立发生的，而是由一系列相关的异常引发的。为了更好地理解和处理这种复杂的异常场景，Java引入了异常链（ExceptionChaining）的概念。本文将深入探讨异常链的原理、使用方法以及在实际开发中的最佳实践。1.什么是异常链？异常链是指将一个异常与另一个异常关联起来，形成一个链条，从而保留异常的完整</div> </li> <li><a href="/article/1884163822470623232.htm" title="MicroAI™将人工智能培训引入RENESAS MCU" target="_blank">MicroAI™将人工智能培训引入RENESAS MCU</a> <span class="text-muted">sinat_41698914</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/mcu/1.htm">mcu</a><a class="tag" taget="_blank" href="/search/big/1.htm">big</a><a class="tag" taget="_blank" href="/search/data/1.htm">data</a> <div>在端点部署的人工智能技术将加快资产密集型行业的上市时间达拉斯--(美国商业资讯)--边缘原生人工智能(AI)和机器学习(ML)产品领域的先驱MicroAITM今天宣布，公司已将其MicroAIAtomML™技术与RenesasRA微控制器(MCU)产品线进行整合。与全球微控制器领导者Renesas合作将机器学习引入MCU，并借助MicroAI直接在嵌入式环境中训练机器学习模型的能力——这在业界尚属</div> </li> <li><a href="/article/1884163317216374784.htm" title="浅谈nRF52840这款芯片" target="_blank">浅谈nRF52840这款芯片</a> <span class="text-muted">一只慵懒的小橘猫</span> <a class="tag" taget="_blank" href="/search/%E8%8A%AF%E7%89%87%E9%80%89%E5%9E%8B/1.htm">芯片选型</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E7%A1%AC%E4%BB%B6/1.htm">智能硬件</a> <div>nRF52840是NordicSemiconductor推出的一款高性能、低功耗无线微控制器，专为物联网和复杂应用设计。以下是其关键特性：1.**核心处理器**基于ARMCortex-M4F内核，主频64MHz，集成浮点单元（FPU），提供高效计算能力。2.**无线功能**-支持蓝牙5.2/5.3（含长距离LECodedPHY和2Mbps高速模式）、蓝牙Mesh、Thread、Zigbee、ANT</div> </li> <li><a href="/article/120.htm" title="web前段跨域nginx代理配置" target="_blank">web前段跨域nginx代理配置</a> <span class="text-muted">刘正强</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>nginx代理配置可参考server部分 server { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; listen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 80; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; server_name&nbsp; localhost; </div> </li> <li><a href="/article/247.htm" title="spring学习笔记" target="_blank">spring学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>一、概述 &nbsp;&nbsp;&nbsp; a&gt;、核心技术 : IOC与AOP b&gt;、开发为什么需要面向接口而不是实现 &nbsp;&nbsp;&nbsp; 接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c&gt;、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式) </div> </li> <li><a href="/article/374.htm" title="Eclipse打开workspace提示工作空间不可用" target="_blank">Eclipse打开workspace提示工作空间不可用</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。 解决办法，删掉.fileTableLock文件，重</div> </li> <li><a href="/article/501.htm" title="Javascript 面向对面写法的必要性？" target="_blank">Javascript 面向对面写法的必要性？</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架 &nbsp; 我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu</div> </li> <li><a href="/article/628.htm" title="js array对象的迭代方法" target="_blank">js array对象的迭代方法</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/array/1.htm">array</a> <div>1.forEach 该方法接受一个函数作为参数， 对数组中的每个元素 使用该函数&nbsp; return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型</div> </li> <li><a href="/article/755.htm" title="对Hibernate缓存机制的理解" target="_blank">对Hibernate缓存机制的理解</a> <span class="text-muted">归来朝歌</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E6%8C%81%E4%B9%85%E5%8C%96/1.htm">对象持久化</a> <div>在hibernate中session一级缓存机制中，有这么一种情况： 问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？ 通过调试后解决方案如下： 对于问题一，如你在数据库里设置了</div> </li> <li><a href="/article/882.htm" title="WebService调用错误合集" target="_blank">WebService调用错误合集</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>&nbsp;Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错， 一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可</div> </li> <li><a href="/article/1009.htm" title="JSP和Servlet的中文乱码处理" target="_blank">JSP和Servlet的中文乱码处理</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Java+Web/1.htm">Java Web</a> <div>JSP和Servlet的中文乱码处理 前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。 一、表单提交时出现乱码： 在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以</div> </li> <li><a href="/article/1136.htm" title="面试经典六问" target="_blank">面试经典六问</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。 以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍 关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。 我的回答：(针对技术面试回答，如果是人事面试，可以就掌</div> </li> <li><a href="/article/1263.htm" title="contentResolver.query()参数详解" target="_blank">contentResolver.query()参数详解</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/query%28%29%E8%AF%A6%E8%A7%A3/1.htm">query()详解</a> <div>收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名 一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]&nbsp; view plain copy &nbsp; public&nbsp;void&nbsp;fetchAllContacts()&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp</div> </li> <li><a href="/article/1390.htm" title="ora-00054:resource busy and acquire with nowait specified解决方法" target="_blank">ora-00054:resource busy and acquire with nowait specified解决方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/kill/1.htm">kill</a><a class="tag" taget="_blank" href="/search/nowait/1.htm">nowait</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句</div> </li> <li><a href="/article/1517.htm" title="web 开发乱码" target="_blank">web 开发乱码</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>以下前端都是 utf-8 字符集编码 一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中； 乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding=&quot;UTF-8&quot;； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，</div> </li> <li><a href="/article/1644.htm" title="【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式" target="_blank">【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源 准备源数据 {&quot;name&quot;:&quot;Jack&quot;, &quot;age&quot;: 12, &quot;addr&quot;:{&quot;city&quot;:&quot;beijing&</div> </li> <li><a href="/article/1771.htm" title="JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss" target="_blank">JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/-Xss/1.htm">-Xss</a><a class="tag" taget="_blank" href="/search/-Xmn/1.htm">-Xmn</a><a class="tag" taget="_blank" href="/search/-Xms/1.htm">-Xms</a><a class="tag" taget="_blank" href="/search/-Xmx/1.htm">-Xmx</a> <div>&nbsp; 堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java&nbsp;-Xmx355</div> </li> <li><a href="/article/1898.htm" title="jqGrid 各种参数 详解(转帖)" target="_blank">jqGrid 各种参数 详解(转帖)</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/jqGrid/1.htm">jqGrid</a> <div>&nbsp; jqGrid 各种参数 详解 分类：&nbsp; 源代码分享&nbsp; 个人随笔请勿参考&nbsp; 解决开发问题 2012-05-09 20:29 &nbsp; 84282人阅读 &nbsp; 评论(22) &nbsp; 收藏 &nbsp; 举报 jquery 服务器 parameters function ajax string &nbsp; </div> </li> <li><a href="/article/2025.htm" title="读《研磨设计模式》-代码笔记-代理模式-Proxy" target="_blank">读《研磨设计模式》-代码笔记-代理模式-Proxy</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面</div> </li> <li><a href="/article/2152.htm" title="应用升级iOS8中遇到的一些问题" target="_blank">应用升级iOS8中遇到的一些问题</a> <span class="text-muted">chenhbc</span> <a class="tag" taget="_blank" href="/search/ios8/1.htm">ios8</a><a class="tag" taget="_blank" href="/search/%E5%8D%87%E7%BA%A7iOS8/1.htm">升级iOS8</a> <div>1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated &nbsp;中写的，最终的解决办法是把判断写在 -(void</div> </li> <li><a href="/article/2279.htm" title="工作流与自组织的关系？" target="_blank">工作流与自组织的关系？</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>&nbsp; 目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？ &nbsp; 这里有篇论文，摘要是：“针对网格中的服务</div> </li> <li><a href="/article/2406.htm" title="Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX" target="_blank">Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一</div> </li> <li><a href="/article/2533.htm" title="二叉树:堆" target="_blank">二叉树:堆</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div>&nbsp;&nbsp;&nbsp; 这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单: &nbsp;&nbsp;&nbsp; 一个节点的父节点下标为: (当前下标 - 1)/2 &nbsp;&nbsp;&nbsp; 一个节点的左节点下标为: 当前下标 * 2 + 1 &nbsp;&nbsp;&</div> </li> <li><a href="/article/2660.htm" title="C语言学习八结构体" target="_blank">C语言学习八结构体</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>为什么需要结构体，看代码 # include &lt;stdio.h&gt; struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,</div> </li> <li><a href="/article/2787.htm" title="centos安装golang" target="_blank">centos安装golang</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>#在国内镜像下载二进制包 wget -c &nbsp;http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz &nbsp; #把golang的bin目录加入全局环境变量 cat &gt;&gt;/etc/profile&lt</div> </li> <li><a href="/article/2914.htm" title="10.性能优化-监控-MySQL慢查询" target="_blank">10.性能优化-监控-MySQL慢查询</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/MySQL%E6%85%A2%E6%9F%A5%E8%AF%A2/1.htm">MySQL慢查询</a> <div>1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径 查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn</div> </li> <li><a href="/article/3041.htm" title="Java父类取得子类类名" target="_blank">Java父类取得子类类名</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB/1.htm">父类</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB/1.htm">子类</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%90%8D/1.htm">类名</a> <div>&nbsp; 在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！ &nbsp; package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao&lt;T&gt; { public void </div> </li> <li><a href="/article/3168.htm" title="Spring3.2新注解@ControllerAdvice" target="_blank">Spring3.2新注解@ControllerAdvice</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/%40Controller/1.htm">@Controller</a> <div>@ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现： &nbsp; @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co</div> </li> <li><a href="/article/3295.htm" title="Java spring mvc多数据源配置" target="_blank">Java spring mvc多数据源配置</a> <span class="text-muted">liuxihope</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 &lt;bean id=&quot;dataSourceA&quot; class=&quot;org.apache.commons.dbcp.BasicDataSource&quot; destroy-method=&quot;close&quo</div> </li> <li><a href="/article/3422.htm" title="第12章 Ajax（下）" target="_blank">第12章 Ajax（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/</div> </li> <li><a href="/article/3549.htm" title="BW / Universe Mappings" target="_blank">BW / Universe Mappings</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>&nbsp; BW Element OLAP Universe Element Cube&nbsp; Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi</div> </li> <li><a href="/article/3676.htm" title="Java开发熟手该当心的11个错误" target="_blank">Java开发熟手该当心的11个错误</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收 测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目 可以在属性文件中配置，那么使它成为</div> </li> <li><a href="/article/3803.htm" title="推行国产操作系统的优劣" target="_blank">推行国产操作系统的优劣</a> <span class="text-muted">yananay</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%BD%E4%BA%A7%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">国产操作系统</a> <div>最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？ 先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>