html+css知识点总结（田彦霞）

DOCTYPE是document type（文档类型）的简写，用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

title就是说这个网页是干什么的，公司名、产品名、功能名等等，全是给浏览器，以方便用户能快速准确得了解到这个网页要介绍的内容。
title的特点：

title标签只能在head标签内出现；

标签内的内容通常在浏览器的标题栏中显示；
浏览器中收藏夹内书签的名称是title的内容；
title的内容可以方便搜索引擎索引页面；
从搜索引擎搜索到的内容的标题往往是网页title的内容；
title通常体现了网页的主题内容，所以记得一定要加上。

<meta>元素可提供有关页面的原信息（meta-information）,比如针对搜索引擎和更新频率的描述和关键词。位于head标签内，单独出现，必须被正确地关闭<meta name=" " content="" />meta属性主要非为两组：

1）name属性与content属性

name属性的值所描述的内容（值）通过content属性表示，便于爬虫查找、分类。其中最重要的是description、keywords和robots。

2）http-equiv属性和content属性

1、所有标签都必须要有相应的结束标签；

2、标签与标签的属性都必须使用小写；

3、所有标签都必须合理嵌套；

4、<img>标签的alt属性：搜索引擎会比较重视，要充分利用它来放置关键词。它的好处包括：

1）获取或设置在图像不可用或当前正在下载且尚未完成的情况下浏览器显示的替换标题；

2）搜索引擎把alt属性里的内容当了那个图片的关键词，关键词写得好，图片被搜索到的几率也是非常大的。

块属性标签（块元素）

<div></div>可以把文档分割为独立的、不同的部分
<h1></h1>…<h6></h6>可定义标题。<h1>定义最大的标题，<h6>定义最小的标题
<ol></ol>定义有序列表，必须嵌套<li>
<ul></ul>定义无序列表，必须嵌套<li>
<li></li>定义列表项目，是有序列表和无序列表的子标签
<dl></dl>定义自定义列表
<dt></dt>一般用于定义列表标题
<dd></dd>定义自定义列表内容
<table></table>定义表格

<tr></tr>定义表格行

<th></th>定义表头

<p></p>定义段落

<br/>换行符

<from></from>用于为用户输入创建HTML表单

<var></var>定义变量，在浏览器中一般会斜体显示
<em></em>把文本定义为强调内容，浏览器一般以斜体显示
<a></a>锚文本，最重要的属性是href，指定连接的目标
<img/>是单标签，链接图片，有src和alt属性
<textarea></textarea>定义多行文本输入控件，可通过cols和rows属性来规定textarea的尺寸,y也可以用css的

width和height属性来控制。

<select></select>可创建单选或多选菜单 ，子标签是select
<option></option>定义下拉列表中的一个选项，位于select元素内部
<input>用于搜集用户信息。根据不同的tpye属性值，输入字段拥有很多种形式。输入字段可以是文本字段text，复选框 checkbox，掩码后的文本控件，单选按钮radio，按钮button，submit提交，重置reset，空白hidden等等
<strong></strong>把文本定义为更强的强调的内容

块属性标签特点： 标签默认撑满整行，总是在新的一行开始；

高度、行高以及顶底边距都可控制；

未设定宽度时，宽度为容器的100%；

行内属性标签特点

行内属性标签可在一行显示；

宽高即顶底边距不可控制；

内容撑开宽高；

1、外部引入：在HTML的head部分<link rel="stylesheet" type="text/css" href="http://blog.163.com/html5_12/所需的CSS文件路径">，引入外部的CSS文件；（优缺点：使用最广泛，一个css文件可控制多个页面，从整站来讲，减少代码数量，提高加载速度，便于维护。）
2、头部引入：在head部分加入<style type="text/css"></style>标签，CSS代码就写在标签内（style是表明引入文件类型的标签；type是表明文件类型；（优缺点：使用也比较多，加载速度快，一般用于访问量较大的网站或首页，但是整站代码较多，不利于维护）
3、在标签内直接写CSS:直接把css标签写在页面标签里；（优缺点：用得比较少，权重最高，代码多，加载慢，不利于维护）
4、使用@import引入css（优缺点：适合大型网站css架构）

1、标签名选择器：如：p{}，即直接使用HTML标签作为选择器，在实际的应用中，我们习惯用它设置标签的一些默认属性或者和后代选择器一起使用；
2、类选择器：如 .polaris();前端开发者最常用。

特点：（1）可以给不同标签设置同一个类，从而用一条CSS命令控制几个标签，减少代码量，使页面修改简单，易维护、易改版。（2）后台工作人员几乎不会用到有关class的相关设置，不需要跟后台人员之间进行交互；（3）可以通过js等动态改变标签的classname，从而改变整个标签的样式，使前端动态效果实现起来更为容易。
命名规范：第一个字符不能使用数字，在Mozilla或firefox中不起作用。

4、后代选择器：如 .polaris span img{}，后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。

5、群组选择器：.polaris ， span ， img{}，实际上是对CSS的一种简化写法，是把具有相同CSS样式的不同选择器放在一起，减少代码量。

CSS选择器中的属性顺序

显示属性：display, list-style, position, float, clear

自身属性：width, height, margin, padding,border,background

文本属性：color, font, text-decoration, text-align,vertical-align, white-space, content

符合浏览器的渲染顺序，最终达到提高执行效率目的

所谓优先级是指CSS样式在浏览器中被解析的先后顺序。
(1) CSS不同引入方式的优先级：标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。
(2) CSS选择器的优先级：id > class > tagname.
(3) 多个选择器混用时的优先级：例子.a .b c{}和.a c{},它们指向的目标都是c，但是前者的优先级高于后者。
注：当指向同一目标选择器的优先级相同时，后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件中各个类选择器的排列有关。

4、利用！important提升优先级：通过在css属性后面标明！important的方法提升该条属性的优先级。被！important注明的css属性具有最高的优先级，是不能被覆盖的。在IE6中！important具有一个BUG，就是同一组CSS属性中，！important是没有作用的。
例如： .outer{
color:blue !important; color:red;
}
在IE6下文字的最终显示效果为红色，！important没有起作用。

语法：
font-family：宋体，Arail,Tabhoma,sans-serif;
font-size : px | baifenshu | em; (em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是16像素，所以1em的默认尺寸是16像素，可以通过公式将像素转换为em：px/16=em)
font-style: normal | italic(斜体) | oblique（倾斜），通常情况下italic和oblique文本在web浏览器中看上去完全一样。
font-weight : normal | bold | bolder | lighter | number;(后两种不常用，只做了解)
缩写：font : font-style | font-variant | font-weight | font-size | font-family ; 一般情况下我们不采用简写的形式。
color： red | #fff ；
text-decoration：none | underline | overline | line-though | blink | inherit ;
line-height : normal | length ;

语法:
text-indent : px | em ;
text-align : left | right | center | justify(两端对齐) ;
vertical-align ： top | bottom | middle ；
word-spacing：px；（改变词之间的距离）；
letter-spacing：px；（改变字母之间的距离）；

background-color：red | #fff；
background-img：none | url( ) ;
background-repeat : repeat | no-repeat | repeat-x | repeat-y ;
background-position : x轴坐标值 y轴坐标值；
background-attachment：scroll | fixed ；
简写：background：color url（） position repeat ；

完整的盒模型是由content（内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成。
margin属性：
语法：
margin-Top | right | bottom | left : px或em ;
margin的几种不同写法：

（1） .main{margin:10px 20px 10px 20px;}

（2） .main{margin:10px 20px ;}这两个值分别设定类名为main的模块的上下、左右的外边距值；

（3） .main{margin:10px 20px 10px ;}第一个值设定上外边距，第二个值设定左右外边距，第三个值设定下外边距；

（4） .main{margin:10px;}如果就一个值的话，就设定了四个方向的外边距都10px。

（5） .main{20px auto;}上下两个方位的外边距为20px；左右两个方位的外边距自动适应居中。

margin的使用事项及bug：

竖向margin的叠加：

如果两块都有margin，margin横向上是加法，但是竖向上会产生叠加现象。上下间距两者之间取其大者生效。但是这仅针对未浮动的元素，如果是浮动元素，上下键的margin仍然会采取加法而不是取其大者。

IE6下的横向双倍margin bug：

在特定条件下，IE6浏览器中，横向margin值变成双倍。4个特定条件：（1）元素浮动；（2）元素有横向的margin；（3）元素为块状元素；（4）浏览器为IE6。解决这个问题的办法就是为这个元素定义的CSS最后加上display：inline；行内元素在使用了display:block;使行元素变成块元素，也会触发这个bug。

语法：
padding-top | left | bottom | right: px | em |百分比；
padding的几种写法：

（1）padding：10px 20px 20px 5px；

（2）padding：10px 5px 6px；

（3）padding：10px 5px；

（4）padding：10px；

padding不能用负值，padding-top和padding-bottom不会改变标签的高度。

语法：
border-top | left | bottom | right ；
border-top：border-top-width | border-top-style | border-top-color； 例如：border-top：1px solid red；
border-left：border-top-width | border-top-style | border-top-color；
border-bottom：border-top-width | border-top-style | border-top-color；
border-right：border-top-width | border-top-style | border-top-color；
border-style：solid（实线） | dotted（点化线） | dashed（虚线） | none；
border-width：px

border-top-width：
border-bottom-width：
border-left-width：
border-right-width：

border-top-color：

border-right-color：

border-bottom-color：

border-left-color：

float属性：
语法： float：left | right | none；
任何浮动元素自动被设置为一个“块级元素”，这表示它可以设置宽高；
float对标签的影响：

（1） float对行内属性标签的影响：span、var、em、strong等行内标签默认是不支持宽高设置的，靠内容撑开大小。在float后都能很好的支持width和height属性的设置；
（2）float对块属性标签的影响：默认占满行的块属性标签在没有宽高的情况下设置浮动后变成内容撑开宽度，但是同样支持宽高设置。
（3）float能很好的解决浏览器之间解析标签时，enter键（标签换行）造成的显示间隙问题。
（4）具有float属性的对象在父标签中是不占有空间的，浏览器在解析时这个位置就是空的，下面的内容就会移动到浮动过的对象下面。

解决这个兼容性问题的方法有四种：

第一 给父标签这是高度；
第二 给父标签页设置高度，但是这种方法只适用于高度固定的情况；
第三 在父标签的关标签前清除浮动；
第四 直接给父标签设置一个“overflow：hidden”，具有清除内部浮动的作用。

选择清浮动位置时应注意以下：1、清浮动一定要在浮动标签完成浮动布局以后添加，否则会影响到浮动标签布局；2、清除浮动必须与前面的标签属于同级关系。

①clear属性定义了元素某个方向上不允许出现浮动元素：none（允许两边都可以有浮动对象）/left（…）/right（不允许右边有浮动对象）/both（不允许有浮动对象）;

②空标签清除浮动：在HTML页面中加入一个空标签用来清除浮动。

HTML：<div class="clear"> </div>

CSS:.clear{clear:both;hegiht:0;overflow:hidden;}

clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。

但是空标签清浮动会增加多余的代码。

③overflow：在需要清除浮动的腹肌标签中加入overflow即可，在IE6中不认识此属性则加入zoom：1；或者height：1%；css样式改为：.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时，IE6/7、遨游则以下拉框形式出现，而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。

overflow:visible属性只能对IE6/7、遨游起作用，对火狐、谷歌、欧鹏、IE8无清浮作用。

overflow:visible(不剪切内容也不添加滚动条)/auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）/hidden（超出部分隐藏）/scroll（总是显示滚动条）;

④after清浮动：css样式为：.out{zoom:1;}/*==for IE6/7 Maxthon2==*/

.outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;只清除所有浮动；content:"";display:block;对于FF/chrome/opera/IE8不能缺少，content（）可以取空值。

⑤子标签浮动时，给父标签浮动

⑥下一标签直接清浮动：兄弟标签浮动时，下一标签直接写入清除clear：both；就可以。

⑦使用position：absolute；清除浮动。

clear属性
语法：clear： none | left | right |both ；
none：允许两边都可以有浮动对象；
both：不允许有浮动对象；
left：不允许左边有浮动对象；
right ：不允许右边有浮动对象；

overflow属性：规定了当内容溢出元素框时的样式。
语法：overflow：visible | auto | hidden | scroll ；
visible：不见且内容也不添加滚动条；
auto：是body和textarea的默认值，在需要时剪切内容并添加滚动条；
hidden：超出部分隐藏；
scroll：总是显示滚动条。
相关属性：overflow-x：visble | auto | hidden | scroll ；
overflow-x：visble | auto | hidden | scroll ；
display属性： display：block | none | inline |table ；

display：该元素以块属性显示；
none：此元素不会被显示；
inline：以行内属性显示；
table：此元素会作为块级表格来显示（类似<table>）,表格前后带有换行符。

语法：visibility：inherit | visible | hidden ；

inherit：继承上一个父标签的可见性；

visible：对象可见；

hidden：对象隐藏；

visibility：hidden与display：none

visibility：hidden在隐藏的时候元素不可见也会占据页面上的空间；

display：none使内容消失且不占据页面空间。

A标签4个伪类的意义及排序
a：link | a：visited | a：hover | a：active ；
a：link 未被访问前的样式表属性，未被访问的链接默认样式是蓝色字体并且带有下划线。
a：visited 链接地址已被访问过的样式表属性，被访问过的字体默认样式是紫色字体并且带有下划线。
a：hover 鼠标悬停时的样式表属性。
a：active 用户激活（在鼠标点击未释放时发生的事件）时的样式表属性。
除了a标签以外的其他标签也都具备伪类，需要注意的是IE6.0不支持a标签以外的标签伪类，所以用伪类的时候尽可能避免使用a标签以外的标签伪类，以便导致不必要的兼容问题。

position：规定元素的定位类型，所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。
语法：position：static | relative | absolute | fixed | inherit ；
定位相关的部分属性： z-index：number | auto ； left：length | auto ；right：length | auto ；top：length | auto ；bottom：length | auto ；
在实际使用中往往会在定位后面加：left | top | bottom | right,来对他们进行精确的定位控制。
static：该值为position的默认值，可以省略不写（static元素会忽略任何top、bottom、left或right声明）。
relative：相对定位，对象不可层叠，依据left、right、top、botttom等属性在正常文档流中偏移位置，其主要作用就是作为绝对定位的父级属性来用，一般不单独使用。
absolute：绝对定位，对象从文档流中拖出，使用left、right、bottom、top等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过left、top、right、bottom属性来规定。不论窗口是否滚动，元素都会留在那个位置。此标签兼容性不好，可以用absolute来取代，实现同样的效果。
在position中relative和absolute一般是配合使用的，如果对父标签设置了relative属性的话，那么absolute则会以其父标签左上角作为起始位置进行定位。如果父标签没有定义relative属性，那么子标签absolute则会以body左上角作为起始位置进行定位。
z-index：设置元素的堆叠顺序， 值可以为负。拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面，仅能在定位元素上奏效。并且只能针对同级的标签有效，也就是说子标签的z-index值对父标签是无效的，因为两者的级别不同，z-index是无法比较的。

语法：filter：alpha（opacity=80）；/*IE支持该属性*/

opacity：0.8；/*非IE浏览器*/
opacity是css3.0支持的属性，filter是ie所特有的滤镜，在css样式中都定义出来是为了浏览器兼容，实现八大浏览器完全兼容。

1. li在IE中底部3像素的BUG
解决方案：在<li>上加float:left；即可解决

2. IE6中奇数宽高的BUG。
解决方案：就是将外部相对定位的div宽度改成偶数。高度也是一样的。

3. IE6文字溢出BUG
引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
4.可以通过外面再包一次DIV解决
由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性

4. 样式中文注释后引发失效。
满足下面条件就会引起 注释下面的样式不起作用：
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码
解决方法：
1. 去掉中文注释，用英文注释
2. 统一css 和 html 的编码
建议采用第二种解决方法
ps： css为uft-8 html 为ANSI 不会出现失效的情况。

5. li在IE中底部空行的BUG。
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方法：
1. 在li a 样式中加入zoom:1；
2. 在li 样式中加入display:inline ；
3. 将<li>标签写成一行；
4. 在li a 样式中加入width:100%或者一个宽度值；
建议采用第4二种解决方法

7. 父级使用padding后子元素绝对定位的BUG。
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
解决方法：
给外层加宽度或zoom:1

8. display:none引起的3像素的BUG
解决方案1：
将最后一个div加一个margin-right:-3px。
如：<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>
解决方案2：
将display: none的div换一个形式隐藏。
如：<divstyle="position:absolute; visibility: hidden "></div>

9. IE6的图片3px问题
IE 6 中 ，DIV 使用背景图片（或直接插入图片在DIV中）的时候，在图片的下端会出现一条空白间隔，经测量，刚好是 3px .
解决：
IE6默认字号是12pt，默认行高是normal。
1. 给DIV加上：font-size: 0px;
2. 设置img为“display:block;”。
3. 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。
4.设置图片的浮动属性，“#sub img {float:left;}”。
5.取消图片标签和其父对象的最后一个结束标签之间的空格，这种方法适用范围比较窄，只限于父对象中只包含一个图片对象，而且和父对象的结束标签之间不能有任何空隙。

10. IE6双倍浮动BUG
解决：
解决办法是加上display:inline;

11 .IE6的著名3px BUG（断头台bug）：
两个层，一个浮动，一个不浮动，把浮动的一个放在不浮动层中，你会发现两个之间有点间隙，宽度为3px。这个问题是最让人头疼的问题了。
解决方法：
1、所有的层都浮动 把右边那个层也设置成浮动层就可以消除这可恶的3px间隔
2、给左边的层，应用margin-right:-3px;，同样可解决IE 3px bug。

12. Ie6图片导致行距无效
解决方法：对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身高度)/2px 0）

13. IE6使用滤镜使PNG图片透明后，容器内链接失效的问题。
解决方法是为链接定义一个相对定位属性。position:relative

1）、body,div,....{margin:0;padding:0;}

2）、ul，ol，li{list-style-type:none;}

3）、clear{clear:both;height:0;overflow:hidden;}

4）、filter:alpha(opacity = 50)；滤镜设置透明度

5）、a{text-decoration:none;border:none;}

6）、有float，有横向margin时，ie双倍间距，设置display:inline;

* 针对IE6/7。_针对IE6。 +针对IE7。\9针对IE6/7/8。缺点：hack会让代码可读性大大下降，从而降低可维护性。此外hack本身就不存在可扩展性，只是在解决某些棘手问题时的一个快速解决办法。优秀的css不应存在hack。此外使用hack会无形中增加代码的大小。

第一种：type="text"
<input type="text" name="aaa"/>
这是input的所有类型中最常用的type。也就是文本输入框，在注册信息，填写登录用户名等场景用到。
第二种：type="password"
这种类型使用方法与type=”text“一样，与text的不同是在输入文字的时候显示出来的是圆点。在我们输入用户密码的时候就是用的这种类型。
第三种：type=”checkbox“
checkbox是复选框，在相同name的选项中，可以选择多个，各个浏览器对checkbox的样式属性不能很好地兼容。
第四种：type=”redio“
radio是单选，各个浏览器支持大同小异。在相同name的radio中，只能选一个。
第五种：type=”button“
button：按钮，现在大部分已经使用a标签通过css控制样式来做更漂亮的按钮。
第六种：type=”submit“和type=”reset“
submit是用来提交form表单的，reset是用来重置表单的，现在很多时候我们都是用Ajax提交，所以它的用武之地也越来越少。和button一样是按钮的样子，值得注意的是：submit再不设置value的时候，各个浏览器会有一个默认的value值，为了容易效果，只要设置一个value就可以。
第七种：type=”hidden“
是一个隐藏的input，使用的情况较少，通常在比较复杂的js例用来暂存数据。
input所有的类型都支持disabled属性，即不可修改。

border-collapse:separate | collapse | inherit ;
separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性；
collapse：边框会合并为一个单一的边框；
inherit：规定应该从父元素继承border-collapse属性的值。
border-spacing：length length | inherit ；控制表格边框之间的距离。
如果定义一个length参数，那么定义的是水平和垂直间距；如果定义两个length参数，那么第一个设置水平间距，第二个设置垂直间距。
inherit：规定应该从父元素继承border-spacing属性。
border-collapse：可以消除边框间隙，同时合并内外边框。
border-spacing：可以消除边框间隙，不能合并内外边框。

rowspan作用：设置或返回单元格横跨的行数。这一属性可以纵向合并表格单元。
colspan作用：规定单元格可横跨的列数。可以横向合并单元格。

list-style-type：value；
value：none无标记；

disc默认，标记是实心圆；

decimal数字；

decimal-leading-zero 0开头的数字标记（如01、02等）；

low-latin小写拉丁字母（如： a、b等）

使用一幅图像来替换列表项的标记。

value：inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside默认，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

在ie6和ie7中，如果li内部存在设置float属性的标签并且li设置了宽或者高的情况下会出现这种情况：除了第一个li之外，其他li下面都有级像素的间距，为了兼容性考虑，我们要避免这种情况的发生，办法就是让这些条件中有一个不满足即可；
另外还可以对li设置float，不过对于li设置float之后，如果ol或者ul没有设置高度，则会出现margin-bottom不一致现象，解决方法就是对ul、ol设置高度，或者不用margin-bottom，或者利用hack技术解决，但是不建议。