3-常见标签，h1~h6,p,strong,em,ul,ol,li,dl,dt,dd,mark

1. ，标题标签，h1也可以表示logo，避免重复使用h1

2. ,段落

3. ，强调

4. ，斜体，强调重音

5. 自定义列表

自定义列表

自定义列表标题（只能有一个）

自定义列表项

1. ，标记标签

2. , 图片标签

4-标签样式初始化

1. 浏览器开发者工具中：user agent stylesheet 项目表示的是元素的浏览器默认样式

2. 不要使用浏览器的默认样式，因为每个浏览器的默认样式都不一样

3. 需要重置的样式：

4. 与盒模型相关的样式

5. 标签自有的样式

6. css Reset

body, h1, h2, h3, h4, h5, h6, p, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { border: none; vertical-align: top; } a { text-decoration: none; }

1. 用到什么标签就清除什么标签的默认样式，没必要全部清除，清除默认样式的时候统一清除

5-id选择器、类选择器、标签选择器、群组选择器

1. id选择器（#id），每个页面的id选择器中应该每个id选择器都保持不一样

2. class选择器（.class），一个元素可以有多个class，不同class用空格隔开

3. 标签选择器（标签名）

4. 群组选择器，用“,”将每个选择器隔开，每个选择器都会被选择

6-包含选择器、通配符

1. 后代选择器：用空格将选择器隔开，表示第一个选择器选中的元素是第二个选择器的祖先，最终选择到的是第二个选择器。可以嵌套使用

2. 通配符：“*”，在选择器后接“*”，选择所有符合要求的元素。不建议使用，范围太广容易误操作，性能不好

7-选择器优先级

1. 行间样式 > id选择器 > 伪类和类选择器 > 伪元素和标签选择器

2. 优先级四元组（a, b, c, d）

• 计算优先级 = a * base^3 + b * base^2 + c * base + d

• a为行间样式的个数， b为id选择器的个数，c为伪类和类选择器的个数，d为伪元素和标签选择器的个数

8-块元素和内联元素

1. 块级元素特征：

2. 默认独占一行

3. 没有宽度时，撑满一行

4. 支持所有css命令

5. 内嵌（内联，行内）元素的特征：

6. 可以同排排放

7. 内容撑开宽度

8. 不支持设置宽高

9. 不支持设置上下margin

10. 代码换行（两个标签之间的换行）被解析

11. 块元素与内联元素的转换

12. 用css将块级元素转化为内联元素：` dispaly: inline`

13. 用css将内联级元素转化为块级元素：` dispaly: block`

14. display转化标签的显示类型，不会转化标签原本的类型

HTML5高级

内联块

2-inline-block、翻页按钮组布局

1. dispaly: inline-block; 内联块

2. 使块元素具有同行排列的特性

3. 使内联元素具有宽高可设置的特性

4. 内联元素和块元素在不设置宽度的时候由内容撑开宽度

浮动

1-浮动介绍及基本语法

1. 浮动： float: left | right | none | inherit;使元素脱离文档流往指定方向移动遇到父级边界和相邻浮动元素停下

2-浮动的特性、clear、多种清浮动的方法

1. `clear: left | right | both | none | inherit;`元素的某个方向不能有浮动元素

2. 浮动的特征：

3. 块在一排显示

4. 内联支持宽高

5. 默认内容撑开宽度

6. 脱离文档流

7. 提升层级半层

8. 清除浮动方法：

9. 父级增加高度，缺点：扩展性不好

10. 父级加浮动。缺点：每个祖先都会被加浮动，margin左右会失效

11. 父级inline-block，缺点：父级margin左右失效

12. 空标签清除浮动（在浮动元素设置兄弟标签，标签设置clear）。缺点：IE6最小高度为19px解决后仍有2px误差

13. 浮动元素设置兄弟标签：
    ,缺点：不符合工作中，样式，结构，行为分离的标准

3- after伪类、overflow

1. 用after清除float：

.clearfix :after{ content: ""; display: block; clear: both; } .clearfix { /* ie6*/ *zoom:1; }

1. BFC标准浏览器（除了ie）:

2. float值不为none

3. overflow不为visible

4. display为table-cell，table-caption，inline-block中的任意一个

5. position的值不为relative和static

6. width | height | min-width | min-height: (!auto)

7. haslayout :

8. wirting-mode: tb-rl

9. -ms-writing-mode: tb-rl

10. zoom: (!normal)

11. overflow: hidden | scroll ； 当子元素内容超过父级范围时

12. 用overflow清除浮动：在父级样式用使用：`overflow: hidden`

定位

1-定位的思考、相对定位的特征、偏移量

1. position: relative; 相对定位

2. 不影响元素本身特性

3. 不使元素脱离文档流（移动后原始位置被保留）

4. 不设置偏移量则对元素原来的定位没有影响

5. 提升层级

6. position: absolute;绝对定位

7. 使元素完全脱离文档流

8. 使内嵌支持宽高

9. 块级属性标签内容撑开高度

10. 有定位父级则相对定位父级偏移，没有定位父级则相对于document偏移

11. 相对定位一般配合绝对定位元素使用

12. 提升层级

13. position: fixed; 固定定位

14. position: static; 默认值

15. position: inherit; 继承父元素的值（不兼容）

3-透明度、定位的应用

1. 透明度：opacity; (0~1); 字体颜色也会变透明，子元素通过继承也会变透明

2. z-index: (num); 层级，层级高的覆盖层级低的

3. 定位元素默认后一个设置的元素高于前一个元素

4. 建议在兄弟标签间比较

5. ie6,7的透明度设置：filter: alpha(opacity=(1 ~ 100))

表格表单

1- table、表格的组成

1. 表格标签：

2. ，表格。可以设置\`border="1"\`行间属性来设置总体的边框。
3. ，表格头
4. ，表格主体
5. ，表格行
6. 表头
7. 表格单元

8. 单元格间隙合并：

table { border-collapse: collapse; }

1. 清除表格默认样式：

th, td { padding: 0; }

2- 单元格合并、表单、输入框、密码框、单选框

1. 跨行合并单元格：

2. 跨列合并单元格：

3. 跨行合并单元格时行末会多出一个单元格

4. 跨列合并单元格时被跨的行会多出一个单元格

5. 表单：

   。action属性内填写要提交的地址

7. type="text"，文本框

8. type=“password”，密码

9. type=“radio”，单选。设置两个name属性为相同值的单选，这样这两个单选不能同时被选中

3-复选框、自定义按钮、提交按钮、重置按钮、上传控件

2. type=“checkbox”，复选

3. type=“submit”，提交

4. type=“reset”，重置

5. type=“button”，按钮

6. type=“image”，图片

7. type=“file”，上传文件

8. type=“hidden”，隐藏

4-表单实现仿淘宝搜索应用、select、textarea

1. <label for="“>，for属性的值指向与for属性值相等的id名称对应的输入框，点击后使之获得焦点

2. 选项框默认选中：设置checked属性值为checked。checked="checked"

3. 禁用输入框：设置disabled属性为disabled。disable="disable"

4. 下拉选框：

giao iaog aogi ogia

1. textarea,文本域：<textarea>文本输入框，可用css设置宽高

兼容性

1-兼容性介绍、H5标签兼容

1. 不支持H5标签

2. 可以用js：`document.createElement("");`来添加要用到的标签，但自定义标签默认是内联元素，所以需要根据需要设置css：display

3. 也可以直接调用扩展的js库

2-元素浮动兼容性

1. （在ie6中元素浮动了以后，如果子元素是块元素，并且设置了高度，则浮动的父元素会被撑开宽度，占满一行。（有争议））

2. 元素浮动之后，能设置宽度就设置宽度。需要宽度为内容撑开，给子元素设置float

3. 第一块元素浮动以后，第二块元素加margin值为第一块宽度。理论上会贴合并排，但在ie6中会后间隙。

4. 不推荐这么排列元素，会导致层级错误

5. 给两个元素都设置float

3-子级超出父级宽高、p标签嵌问题、margin传递

1. ie6下子元素超出父级宽高会把父级撑开

2. 不要让子元素宽高超出父级

3. 不能包含块标签

4. margin：

5. margin-top传递

6. 触发BFC、haslayout

7. margin合并

8. 使用同一方向的margin，都用top或者bottom

9. ie6不支持display: inline-block;

10. ` *display: inline; *zoom: 1;`

11. ie6最小高度为19px；

12. `*overflow: hidden`

13. ie6，最左边浮动元素margin-left会放大一倍

14. `*display: inline;`

15. ie6，

16. 里元素都浮动，
17. 间会有4px的间隙

18. 给

19. 加上`*vertical-align: top;`