1、html制作页面的结构，由head和body构成。

2、CSS为页面的显示样式，可以控制页面中的元素的位置，颜色，大小等。

3、html代码注释方式

4、CSS注释方式 ：/*CSS代码注释*/

5、CSS的样式添加方式：（1）直接以style=“color：red;”的方式添加在标签中（内联样式）。（2）在头部中的用选择器的方式添加样式（嵌入样式）。（3）将CSS写在另一个文档中B，在文档头部中以link链接的方式将文档B加入（外部样式）。

6、样式优先级：内联>嵌入>外部。多个同样选择器的嵌入样式时，取最后一个的样式。也可以在属性值后加!important来增加优先级。

7、CSS选择器：（1）标签选择器q{}，权重001。（2）类选择器.class{}，权重010。（3）id选择   器#id{}，权重100。（4）子选择器p>span{}。(5)后代选择器p  span{}。（6）通用选择器*{}。（7）伪类选择器a:hover{};a:link{};a:actived{};a:visited{}。（8）分组选择器p,h1{}等。

8、继承：某些样式会继承父类的样式，比如font-size,color等。但是某些样式则不会继承，比如border。

9、CSS样式：font-family、font-size、font-style、color、text-decoration、text-indent、letter-spacing、line-height、text-align等。

10、盒子模型：由四部分组成，分别为content、padding、border、margin。长度：margin-left+border+padding-left+content+padding-right+border+margin-right。填充是盒子中的padding、边界是border部分。

11、元素分类：（1）块级样式：block，宽度是父类宽度，可以设置样式的宽度、高度等，每个块级元素占据一行。（2）内联样式：inline,宽度是由文本内容决定的，不能设置样式的高度和宽度等，多个内联样式可以在一行显示。（3）内联块状样式：inline-block，其宽度有文本内容决定，多个可以显示在一行，并且具备块级样式可以设置高度和宽度的功能。

12、布局模型：（1）流动模型：块级元素各占一行；内联元素可以多个显示在一行。（2）浮动模型：float:left/right。（3）层模型：absolute定位参照物是父类对象；relative定位参照物是自身；fixed定位父类，但是下拉条形框会一直随之移动。（4）absolute和relative组合：现在父类设置position:relative,，然后子类元素设置position：absolute，则子类的定位参照物是刚设置的父类对象。

13、缩写：border:10px 20px 10px 20px为border:10px 20px;border:10px 20px 20px 20px为border:10px 20px 20px。

14、长度值：px；em是参照父类的长度，%也是参照父类的长度。

15、居中设置：行内元素里文本的居中：text-align:center。定宽块状元素：margin:0 auto（由于有宽度，块状元素没有独占完整的一行，可以移动）。不定宽块状元素：由于每个块状元素宽度都是父类宽度，独占一行，不能自由移动。（1）添加在table里，然后再table里设置margin：0 auto；（2）display：inline。将块状元素设置为行内元素，在使用text-algin:center来设置。（3）先在父类设置floa:left;position:relative;left:50%;然后在子类设置 floa:left;margin:0;padding:0;position:relative;left:-50%。margin:0 auto;不能用于inline中，可以用于display：table中。

16、垂直居中：（1）单行：父元素height:100px;line-height:100px;行间距类似于信纸的一行，包括了字体大小和字体之间空白的间距。（2）多行：将多行文本或者图片放置在标签中，再使用vertical-align:middle；td标签下默认设置了vertical-align:middle。（3）多行：将

盒模型设置为display:table-cell；激活vertical-align:middle。

17、绝对定位和浮动后，即position:absolute;和float:left/right;内联元素会自动设置成inline-block，即可设置宽度和高度了，且元素不会和块级元素那样占用一整行。