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

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

其它主要标签,以下所有标志用在<BODY></BODY>中:
<A,HREF="…"></A>,链接标志,"…"为链接的文件地址
<IMG,SRC="…">,显示图片标志,"…"为图片的地址
<BR>,换行标志
<P>,分段标志
<B></B>,采用黑体字
<I></I>,采用斜体字
<HR>,水平画线
<TABLE></TABLE>,定义表格,HTML中重要的标志
<TR></TR>,定义表格的行,用在<TABLE></TABLE>中
<TD></TD>,定义表格的单元格,用在<TR></TR>中
<FONT></FONT>,字体样式标志

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

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

<center>表示绝对居中.

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

<br>强制换行
<font></font>文本标识的开始和结束
属性:
face=字体
color=颜色
<b></b>加粗文字标识的开始和结束
属性:
style=font-size:40pt;,用样式表方式控制字体大小,这里是40点
<div></div>,分区标识的开始和结束
属性:
align=|center|left|right|水平对齐方式
<marquee></marquee>动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动
属性:
scrollamount=1~60,滚动速度
direction=|left|right|up|down|,滚动方向
scrolldelay=滚动延时,单位:毫秒
<P>段落标识,
空格符,
<img>贴图标识
属性:
src=../../图片链接地址,贴图标识必备属性
style=filter:Alpha(opacity=100,style=2);
filter:样式表滤镜;
Alpha:透明滤镜,
opacity:不透明度100(0~100);
style:样式2(0~3),
rules="none"不显示内框"
<embed,src="…">多媒体文件标识
属性:
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,
设定控制面板的样子,
<bgsound,src="…">,背景音乐标识,只能用于.wav和.mp3格式.
属性:
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.

表单标签:
<form></form>表格标识的开始和结束,表单的内容都放在这里.
下边的标签放在表单内:
<select>下拉选择框
<option></option>
</select>
属性:
Multiple,多选
<textarea></textarea>,大量文字输入的编辑块
属性:
Cols="",行;
Rows="",列;
<input,type="text">,文本框
<input,type="password">,密码框
<input,type="submit">,提交按扭
<input,type="checkbox">,复选框
<input,type="radio">,单选框
<input,type="reset">,重置按扭
<input,type="image">,图片按扭
<input,type="hidden">,隐藏域
<input,type="button">,按扭
<input,type="file">,浏览文件
公共属性:
Name="";
Value=""
Size=""

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

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

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

基本标签:
<html></html>,创建一个HTML文档;
<head></head>,设置文档标题和其它在网页中不显示的信息;
<title></title>,设置文档的标题;
<h1></h1>,最大的标题;
<pre></pre>,预先格式化文本;
<u></u>,下划线
<b></b>,黑体字;
<i></i>,斜体字;
<tt></tt>,打字机风格的字体;
<cite></cite>,引用,通常是斜体;
<em></em>,强调文本(通常是斜体加黑体);
<strong></strong>,加重文本(通常是斜体加黑体);
<font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
<BASEFONT></BASEFONT>,基准字体标记;
<big></big>,字体加大;
<SMALL></SMALL>,字体缩小;
<STRIKE></STRIKE>,加删除线;
<CODE></CODE>,程式码;
<KBD></KBD>,键盘字;
<SAMP></SAMP>,范例;
<VAR></VAR>,变量;
<BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
<DFN></DFN>,述语定义;
<ADDRESS></ADDRESS>,地址标记;
<sup></SUP>,上标字;
<SUB></SUB>,下标字;
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号);
<listing>...</listing>,固定宽度小字体;
<font,color=00ff00>...</font>字体颜色;
<font,size=1>...</font>最小字体;
<font,style,='font-size:100,px'>...</font>无限增大.

格式标签:

<p></p>,创建一个段落;
<p,align="">,将段落按左、中、右对齐;
<br>,换行,插入一个回车换行符;
<blockquote></blockquote>,从两边缩进文本;

<dl></dl>,列表标签,定义列表;
<dt>,定义列表标题;
<dd>,定义列表内容;
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>

<ol></ol>,列表标签,定义一个标有数字的列表;

<ul></ul>,列表标签,定义一个标有圆点的列表;
<li>,放在每个列表项之前;
放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;

<div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
<MENU>,选项清单;
<DIR>,目录清单;
<nobr></nobr>,强行不换行;
<hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
<center></center>,水平居中.

链接标签:
<a,href="URL"></a>,创建超文本链接;
<a,href="mailtEMAIL">
</a>,创建自动发送电子邮件的链接;
<a,name="name"></a>,创建位于文档内部的书签;
<a,href="#name"></a>,创建指向位于文档内部书签的链接;
<BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
<LINK>,定义一个链接和源之间的相互关系;

链接标签注解:
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).

表格标签:
<table></table>,创建一个表格;
<tr></tr>,表格中的每一行;
<td></td>,表格中一行中的每一个格子;
<th></th>,设置表格头:通常是黑体居中文字;
<table,cellspacing="">,设置表格格子之间空间的大小;
<table,border="">,设置边框的宽度;
<table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
<table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
<table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
<tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
<tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
<td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
<td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
<td,nowrap>,禁止表格格子内的内容自动断行;
<CAPTION></CAPTION>,表格的标题;
<COLGROUP></COLGROUP>,定义多个列为一组列;
<TABLE></TABLE>,创建一个表格;
<THEAD></THEAD>,定义表格的页眉;
<COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;
<TBODY></TBODY>,定义一个表格的实体;
<TFOOT></TFOOT>,定义一个表格的页脚;

表单标签:
<form></form>,创建表单;
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
οnsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
<select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
<option>,设置每个表单项的内容;
<select,name="name"></select>,创建下拉菜单;
<textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
<input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
<input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
<input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
<input,type="submit",value="name">,创建提交(submit)按钮;
<input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
<input,type="reset">,创建重置(reset)按钮;
<BUTTON></BUTTON>,创建一个按钮;
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
<FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
<ISINDEX>,提示用户输入;
<LABEL></LABEL>,为一个控件提供标签;
<LEGEND></LEGEND>,为FIELDSET元素指定一标题;
<SELECT></SELECT>,为用户做选择创建各个选项;
<TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.

表单标签注解:
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
οnfοcus="...",当元素获得焦点时发生的事件;
οnblur="...",当元素失去焦点时发生的事件;
οnselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.

帧标签(框架标签):
<frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
<frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
<frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
<frame>,定义一个帧内的单一窗或窗区域;
<noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
<frame,src="URL">,规定帧内显示的HTML文档;
<frame,name="name">,命名帧或区域以便别的帧可以指向它;
<frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
<frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
<frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
<frame,noresize>,禁止用户调整一个帧的大小;
<IFRAME></IFRAME>,创建一个内联的帧;
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
<marquee>...</marquee>,普通卷动;
<marquee,behavior=slide>...</marquee>,滑动;
<marquee,behavior=scroll>...</marquee>,预设卷动;
<marquee,behavior=alternate>...</marquee>,来回卷动;
<marquee,direction=down>...</marquee>,向下卷动;
<marquee,direction=up>...</marquee>,向上卷动;
<marquee,direction=right></marquee>,向右卷动;
<marquee,direction='left'></marquee>,向左卷动;
<marquee,loop=2>...</marquee>,卷动次数;
<marquee,width=180>...</marquee>,设定宽度;
<marquee,height=30>...</marquee>,设定高度;
<marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
<marquee,scrollamount=30>...</marquee>,设定卷动距离;
<marquee,scrolldelay=300>...</marquee>,设定卷动时间;
<img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".

文档整体属性标签:
<body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
<body,background="">,设置背景图片;
<body,bgsound="">,设置背景音乐;
<body,bgproperties="fixed">,固定背景图片(IE适用);
<body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
<body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
<body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
<body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
<body,topmargin="">,设置页面的上边距;
<body,leftmargin="">,设置页面的左边距.

如何清除图片下方出现几像素的空白间隙？

方法1：

1	img{display:block;}

方法2：

1	img{vertical-align:top;}

除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

方法3：

1	#test{font-size:0;line-height:0;}

#test为img的父元素

如何让文本垂直对齐文本输入框？

方法：

1	input{vertical-align:middle;}

　　如何让单行文本在容器内垂直居中？

方法：

1	#test{height:25px;line-height:25px;}

只需设置文本的行高等于容器的高度即可

如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

方法：

a:link{color:#03c;}

a:visited{color:#666;}

a:hover{color:#f30;}

a:active{color:#c30;}

　按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

为什么Standard mode下IE无法设置滚动条的颜色？

方法：

html{

scrollbar-3dlight-color:#999;

scrollbar-darkshadow-color:#999;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eee;

scrollbar-arrow-color:#000;

scrollbar-face-color:#ddd;

scrollbar-track-color:#eee;

scrollbar-base-color:#ddd;

}

将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

如何使文本溢出边界不换行强制在一行内显示？

方法：

1	#test{width:150px;white-space:nowrap;}

设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

如何使文本溢出边界显示为省略号？

方法（此方法Firefox5.0尚不支持）：

1	#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

如何使连续的长字符串自动换行？

方法：

1	#test{width:150px;word-wrap:break-word;}

word-wrap的break-word值允许单词内换行

如何清除浮动？

方法1：

1	#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2：

1	#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3：

1 2	#test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

方法：

1	#test{cursor:pointer;}

　　若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

如何让已知高度的容器在页面中水平垂直居中？

方法：

1	#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}

#test p{*position:absolute;*top:50%;*left:50%;margin:0;}

#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

#test是img的祖父节点，p是img的父节点。

如何设置span的宽度和高度（即如何设置内联元素的宽高）？

方法：

1	span{display:block;width:200px;height:100px;}

要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。

如何给一个元素定义多个不同的css规则？

方法：

.a{color:#f00;}

.b{background:#eee;}

.c{background:#ccc;}

多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

如何让某个元素充满整个页面？

方法：

1 2	html,body{height:100%;margin:0;} #test{height:100%;}

如何让某个元素距离窗口上右下左4边各10像素？

方法：

html,body{height:100%;margin:0;}

html{_padding:10px;}

#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

如何去掉超链接的虚线框？

方法：

1	a{outline:none;}

IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"

如何容器透明，内容不透明？

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}

.inner{width:200px;height:200px;margin-top:-200px;}

<div>我是不透明的内容</div>

原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}

.outer .inner{position:relative\9;}

<div>

<div>我是不透明的内容</div>

</div>

高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

如何让整个页面水平居中？

方法：

1 2	body{text-align:center;} #test2{width:960px;margin:0 auto;text-align:left;}

定义body的text-align值为center将使得IE5.5也能实现居中

如何做1像素细边框的table？

方法1：

#test{border-collapse:collapse;border:1px solid #ddd;}

#test th,#test td{border:1px solid #ddd;}

</table>

方法2：

#test{border-spacing:1px;background:#ddd;}

#test tr{background:#fff;}

</table>

IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

如何使页面文本行距始终保持为n倍字体大小的基调？

方法：

1	body{line-height:n;}

注意，不要给n加单位。

标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

方法：

标准模式下：Element width = width + padding + border

怪异模式下：Element width = width

为什么2个相邻div的margin只有1个生效？

方法：

.box1{margin:10px 0;}

.box2{margin:20px 0;}

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:

外边距合并只出现在块级元素上；
浮动元素不会和相邻的元素产生外边距合并；
绝对定位元素不会和相邻的元素产生外边距合并；
内联块级元素间不会产生外边距合并；
根元素间不会不会产生外边距合并（如html与body间）；
设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

如何在文本框中禁用中文输入法？

方法：

1	input,textarea{ime-mode:disabled;}

ime-mode为非标准属性，写该文档时只有IE和Firefox支持

如何解决列表中list-style-image不能精准定位的问题？

方法：

不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位

如何解决伪对象:before和:after在input标签上的怪异表现的问题？

现象：

在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

以图换字的几种方法及优劣分析

思路1：使用text-indent的负值，将内容移出容器

.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}

<div>以图换字之内容负缩进法</div>

该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

思路2：使用display:none或visibility:hidden将内容隐藏；

.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}

.test span{visibility:hidden;/* 或者display:none */}

<div><span>以图换字之内容隐藏法</span></div>

摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

思路3：使用padding或者line-height将内容挤出容器之外；

.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}

.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}

<div>以图换字之内容排挤法</div>

该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack

思路4：使用超小字体和文本全透明法；

1 2	.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;} <div>以图换字之超小字体+文本全透明法</div>

该方法结构简单易用，推荐使用

如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？

现象：

在编写本条目时，除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果这个过渡或动画效果是必须，可以考虑使用真实对象。

css+html 总结+归纳

趁着清明的3天时间，我专门看了xhtml的一套视频，虽然是xhtml但是也隐喻了很多经验，巩固了一下自己的基础，我自己也写了很多大大小小的东西，但是越写我越发觉自己基础的薄弱，果然没错！还是学到了一些我以前没理解、不知道的一些概念和一些经验之谈，这里我写一篇文章做一个总结。

一、首先W3C标准

结构、表现、动作与 html、css、javascript相对应，它本意是结构表现分离，而且按照html规范编写结构。

标签方面：

-所有标签都要小写、关闭、并且合理嵌套，id不能重复

-标签要有属性，属性必须有值，并且用“”表示

-img标签不能忽略alt属性

-表格标签不适用height属性

-尽量减少ifream的使用会影响浏览器响应速度，虽然在html5中也能使用ifream

内容模型：

-body、form、blockquote仅能包含块级元素

-文本、图像、链接等内联元素不能直接暴露在body标签中，必须用其他标签包裹

-内联元素不能包含块级元素

其他方面：

-特殊字符用编码表示

番外：

初学者的误区：

1、div是万能的！

2、table是丢人的！

3、为标准而标准

1、div严格意义上称作容器，大家有一些页面的装饰可以通过嵌套div来实现，但是千万不能整个页面全都用div来编写，很多标签是有特定含义的，比如说h1~h3，p，strong等，在html5中就更加语义化了比如，footer、head、nav、article、section等标签，还有很多标签，我这里只说常用的一些标签，而且如果整个页面全都用div来写不便于搜索引擎搜索到你的网站。

2、table并不丢人，只不过很少用而已，table是用来装载数据的，所有标签只要合理应用就不会丢人。

3、我们写网站网页其实说白了是为了客户和用户来看的，根据他们的需求我们学出对应的网站，我们强调页面应该灵活编写，不能死板的来。

二、你必须掌握的

1、块状元素和内联元素

（1）块状元素

块元素一般是其他元素的的容器元素，块元素一般从新的一行开始，它可以容纳文本、内联元素和其他块状元素，通过width和height属性可以设置其大小，常见的块元素有 h标签和p标签、div标签

番外：form标签也属于块标签并且只能容纳块级标签

（2）内联元素

内联元素非块级元素。内联元素只能容纳文本或者其他内联元素，不会独占一行，width和height对其不起作用，常见的内联元素有 a img span 等

番外：这里我提一下 w3c为了让开发人员更方便增加了一个 inline-block 属性值，包含块状元素的特点：能够改变元素大小，也包含内联元素的特点：大小只有盒内元素大小

2、盒子模型

下图能代表所有，具体和深入请看各种大神技术博：

3、css页面控制样式方法

（1）行内式

（2）内嵌式

（3）链接式

（4）导入式

优先级：

就近元素，行内>内嵌>链接>导入，在国内经前端经常用的是链接式。

4、常用选择器

-标签选择器（div、p）

-id选择器（#）

-类选择器（.）

-通用选择器（*）

-伪类选择器（:link,:active,:hover,:visited）

优先级：

ID>类>标签>通用

5、文本流

文本流讲述的是一个概念性的东西，页面内的元素是：从上至下、从左自右的顺序进行排列的。

番外：

如何脱离文本流？

我们为了方便布局，通常使用浮动和定位的方式布局

6、命名方法

-骆驼命名法

-帕斯卡命名法

-匈牙利命名法

-或者全首字母大写

命名规则：

头：head/header

内容：content/container

尾：foot/footer

导航：nav/navigation

侧栏: sidebar

三、css的控制能力

1、首行缩进

text-indent:2em;

如果文字是英文，也是缩进2个汉字的宽度

知识点：

px 像素

rem 相对浏览器的单位

% 百分比单位

cm、mm 绝对单位

2、增强页面文字灵活性

在body中设置文字大小font-size：62.5% 在需要设置12px的地方设置文字大小为1.2em以此类推14px相对1.4em

因为任意浏览器默认字体高度为16px 1em=16px

1px=1/16em 10px=10/16em=0.625em=0.625*1em=62.5%*1em

12px=62.5%*1.2em

14px=62.5%*1.4em

16px=62.5%*1.6em

番外：

ie下设置1.2em会比12px大，为什么？怎么处理？

因为ie浏览器总是吧 62.5 小数点换算错所以我们以后设置页面大小直接设置为63%就可以兼容所有浏览器

3、浮动和定位

浮动：

float：left

float：right

定位：

position:absolute

position:relative

番外：

清除浮动：

-clear：both

-clear：left

-clear：right

浮动清除的并不是本元素的浮动，清除的是上级元素对于本元素的影响，我们可以讲页面整体分为三级

第一级是文本流也就是页面默认的显示方式

第二级是浮动它脱离文本流向上一层

第三级是定位它是比浮动更高一级的为第三级

4、position

-absolute

-relative

-static

-Inherit

-Fixed

Absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，绝对定位比较灵活如果你想，可以定位到浏览器的任意点

Relative: 相对定位，相对与父级盒子定位

static：默认的元素定位方式

inherit：继承父级盒子的position属性这个没多大用，如果我们要继承的话，倒不如自己重写一个省的自己再找一遍元素。

Fixed：元素固定在浏览器body的一个位置，浏览器上拉下拉都不会改变位置

番外：一般网站都是都是以浮动为主，定位为辅，你们可以看看现在的淘宝网站。

5、CSS Reset

css样式具有继承和重置的作用

常用的CSS Reset

*{ margin:0,padding:0 }

body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}

table {border-collapse: collapse; border-spacing: 0;}

img {border: 0;}

ol,ul{list-style: none;}

h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}

四：页面调试/纠错方法

1、页面debug调试

2、排除法

3、设置背景法

番外：

网站的页面的加载顺序是按照文本流的顺序加载，

我们编写页面优先考虑：

1、搜索引擎加载

2、便于浏览者观察

3、页面结构简单整洁

最后

告诉大家一个调试神器：http://getf5.com/

posted @ 2020-08-19 14:23 傅凉阅读(522) 评论(0) 收藏举报

刷新页面返回顶部