构建项目
第一件事–设计页面架构
在使用HTML&CSS在构建现在很流行的扁平化风格的页面的时候（或者其它所有的静态页面的时候），第一件事就是需要进行页面结构的设计，不要一上来就手撸代码，有时候重新架构一个项目的难度远远大于从头开始写这个项目。
需要语义化的使用各种HTML标签，不要将所有的标签都用<div>来设置，这样会使后面的维护变得越来越困难。
下面是简书的一个页面的部分HTML标签：
可以看到里面使用了许多语义化的标签<li>、<span>、<em>等，这些语义化标签可以更好的帮助我们来结构化我们的代码，并且使得维护更加轻松。
下面是一些常用的语义化标签的说明和适用条件：
-
<a>：超链接，用于支持跳转的文本内容。 -
<address>：文档或者文章的作者的联系信息。 -
<article>：块级元素，表示一篇文章或者一个文档。 -
<blockquote>：引用块，表示这部分内容是引用别人的。 -
<caption>：定义表格的标题。 -
<button>：按钮，这个就不多说了。 -
<code>：代码块，表示里面是一部分代码块。 -
<div>：division，表示一个部分，基本没有什么语义性。 -
<figure>&<figcaption>：分别为图片块以及内部的图片标题。 -
<footer>：页脚，一般使用在页面最底部的较短的一块。 -
<img>：图片元素。 -
<input>：表单输入框。 -
<li>&<ol>&<ul>：列表元素、有序列表块和无序列表块，在出现一列相同样式元素的时候使用。 -
<nav>：导航链接部分，适用于页面中的导航栏。 -
<option>&<select>：表示下拉菜单的选择框和各个供选择的条目。 -
<p>：paragraph，段落，表示文章的某一个段落。 -
<pre>：源代码，这个标签中的内容会用等宽字体显示，并且会保留所有的tab、空格以及换行等样式。 -
<progress>：进度，HTML5新特性，可以用来显示一个任务当前的进度。高度语义化的一个标签。 -
<section>：文档中的区段或者某一个部分。 -
<big>&<small>：标签内的字号会大一号或者小一号。 -
<span>：组合文档中的行内元素，并且为其添加样式。 -
<del>：带有删除线的文本。 -
<sub>&<sup>：下标文本和上标文本，用来进行设置上下标的，高度语义化。 -
<table><td><tr><th><tfoot><thead>：与表格相关的一些标签，具体使用方法可以自行查看HTML表格
用CSS来实现样式
使用语义化的HTML标签是为了让我们更容易理解自己页面的架构，但是并不是用来为元素添加样式的，由于各个浏览器对于标签的渲染是不一样的，所以为了样式可以在各种浏览器上都做到兼容，仍旧需要使用CSS来添加样式，这时，就需要首先移除掉所有标签原本的样式。
比如，在初始化的HTML中，body会有一定的边距，这种样式对我们来说是完全无用的。怎么移除这些无用的样式呢？
可以使用normalize.css这个样式表，normalize.css可以帮助我们移除无用的默认样式。
normalize.css
A modern, HTML5-ready alternative to CSS resets