当项目文件和css初始化完成之后，就是静态页面的书写了。当然，在书写静态页面的之前，有几点是需要注意的：
1.之前提到过，在书写页面的时候，要注重标签使用的语义化。
2.其次在页面布局的时候，一般都是从上到下，从左到右。
3.在写页面的时候，一般考虑使用标准流的元素，其次才使用浮动或是定位。在标 准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin。
4.注意写注释。
这几点要求虽然说不是强制规定的，但是也是书写页面的规范。一个页面的规范化可以大大减少维护的成本。
在编写页面的过程中，也用到了很多知识点和小技巧。
<meta>标签：
<meta>对于一个简单的页面来说，<meta>标签用到的地方就很少了，最主要的就是设置页面的编码格式
<meta charset="UTF-8">
绝大多数情况下，用的都是utf-8。当然<meta>标签还可以用来做网页的SEO，以下两个分别可以用来设置页面的描述和关键字。
<meta name="description" content=""/>
<meta name="keywords" content=""/>
Css选择器：
关于css有哪些选择器就不多赘述了，因为相对来说比较简单。容易出错的地方主要是在复合选择器中，复合选择器主要有三类：标签指定式选择器（交集选择器），后代选择器和并集选择器。
标签指定式选择器（交集选择器）：注意，交集选择器中两个选择器之间是没有空格的。 语法结构为：标签选择器+class选择器或者id选择器 {属性：属性值;...}
选择原理：选择既是标签选择器选中，又是class或者id选择器选中的标签
p.one{
color: red;
}
后代选择器：后代选择器中每个选择器用空格隔开
语法结构：选择器1 + 空格 + 选择器2 + 空格 + ...{属性：值;}
选择原理：先找到选择器1，找到选择器1下的符合选择器2的条件的后代元素
div div div{
color: red;
}
并集选择器：并集选择器之间用逗号隔开；
语法结构：选择器1+逗号+选择器2+逗号+选择器3..... { 属性：值;}
选择原理：只要满足任意一个选择器的选择条件，就可以被影响
div,p,a{
color: red;
}
三种符合选择器其实不难，关键就是在用的时候要注意用空格还是逗号还是连在一起写。
网站标题制作小技巧
<h1><a href="网站首页地址" title="">网站标题</a></h1>
在网站制作中，一般会在h1标签中嵌套一个a来提升他的权重，并且给文字设置一个text-indent：-2000em的首行缩进属性来让文字隐藏。
font连写
特点：
font-style，font-weight 可以省略
font-style，font-weight 可以交换顺序
background连写
背景的连写： 顺序不论，都可以省略。
伪类的使用
1 a:link
作用：控制a标签所指向的地址，被浏览器访问前的样式
2 :hover
控制标签当鼠标移动到它的范围内时的样式
3 a:active
控制标签被激活（鼠标按下，没有松开）时的样式
4 a:visited
控制a标签被访问过后的样式
使用的顺序：
love hate
link,visited,hover,active
否则可能会不起效果
5 :focus
控制input获得焦点时的样式
Css三大特性
1 层叠性：
属性冲突：多个选择器都设置了这个属性。
当多个选择器修饰同一个标签，并且发生属性冲突的时候，某个选择器的属性最终会作用在这个标签上 --- 层叠性
2 继承性：
发生嵌套关系的时候，子元素会从父元素那里得到一部分属性 ---- 继承性
color，text-系列，font-系列，line-系列
a不继承color，text-decoration：none
h系列，不继承font-weight
3 优先级：
当选择器作用在标签上的时候，是存在优先级的
继承 < 标签 < class选择器 < id选择器 < 行内样式 < !important
权重：0 1 10 100 1000 10000
1 存在优先级
2 权重可以叠加
3 继承的权重总是为0
4 优先级的权重数值只是用来大概描述选择器的优先级的，并不是说十个标签选择器就大于一个类选择器了。
5 通配符的优先级在继承和标签选择器之间。
关于盒模型
不得不说，这张图片是最能明白的展示盒模型概念的。在我刚学习html的时候听老师讲过一句话，就是在html中，万物皆盒子。盒模型从内向外分别是content内容部分，padding内边距部分，border边框部分，margin外边距部分。很多人在页面布局的时候总觉得padding和margin用着很混乱，不知道什么时候用padding，什么时候用margin。其实多半都是因为对盒模型不熟悉的缘故。