CSS布局基础心得

结构，是由文档中的主体部分，再加上语义化、结构化的标记。

表现，是赋予内容的一种样式。

我们用一个 html 文档来保存内容与结构，用一个 css 文档来控制整个文档的表现。

在开始使用css布局之前，首先要保证我们的Web页面是以标记结构化的方式编写的。

一、带有语义的标记。

下面一段HTML就是为了实现某种表现样式而编写的：

下面一段HTML是为了达到正确的语义而编写的：

 

在第一个代码片段中，所有的HTML标签都是用来表现样式的；而在第二个代码片段中，却没有一点对页面显示样式的说明，但是通过css文档，第二个代码片段同样可以达到一个代码片段相同的效果。

我们选择第二个片段，是应为他们恰如其分地描述了其中的内容。这也是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

一、创建良好的标记

1、选择DOCTYPE

 

声明了文档的根元素是 html，它在公共标识符被定义为"-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD(Document Type Definition)。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

另外，需要知道的是，HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种 XML 文档类型都是：Strict、Transitional 以及 Frameset。

无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必须的，也是你在编写HTML时要做的第一件事情。

2、指定语言和字符集

设置文档的XML语言。这里设置为英语的ISO代码en.

设置文档的字符集，这里为UTF-8.

三、避免过度使用div和span

少量、必要地合理使用div和span可以明显增强文档的结构性，但是过度使用会达到相反的作用。如果用h3更能表示内容的含义，那么就不应该使用div，span也不应该替代lablt作用。

四、尽可能少使用标签

这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高）也可以让浏览器很快完成文档的解析，即得到更快的呈现速度。

应该这样：

而不是这样：