《精通CSS——高级WEB标准解决方案》-设计代码的结构

第一章

1.1语义化

前几天听说，阿里巴巴电话考试题目有一个关于“语义化”的理解，才对语义化这个词，有点概念。其实一直知道的比较模糊。还真不会用文字语言描述。

《精通CSS——高级WEB标准解决方案》第一章讲到了，语义化的关键，有意义的标记为开发人员提供了几个重要的好处，与表现性的页面相比，有意义的页面更容易处理。例如，假设需要修改页面中的一个引用。如果这个引用加上了正确的标记，那么很容易搜索代码，找到第一个块引用元素。但是如果这个引用，只是另一个段落元素标签，那么就很难寻找了。

 除了人容易理解外，程序和其他设备也可以理解有意义的标记（也称为语义标记）。例如，搜索引擎可以识别出标题行（因为它被包围在h1标签中）并给他分配更高的重要度。屏幕阅读器的用户可以依靠标题作为辅助的页面导航措施。

对于本书来说，最重要的是，有意义的标记提供了将元素调整为你所需样式的简单方法。他在文档中添加了结构并且创建一个底层框架。可以直接设置元素的样式，而不需要添加其他标示符，因此避免了不必要的代码膨胀。

XHTML包含了丰富得有意义的元素，如：

h1,h2等

ul,ol,和dl.

strong和em.

blockquote和cite.

abbr,acronym和label

caption,thead,tbady和tfoot.

因此，当存在意义合适的元素时，就应该使用。

1.2 ID和类名

关于这个概念已是老生长谈啦。

但是，有些东西还是再次提醒下自己比较好。

在分配ID和类名时，一定要尽可能保持名称有意义并与表现方式无关。（例如，好的名称，secondaryContent,差的名称，leftColumn）

在写类名和ID名时，需要注意区分大小写，CSS大体上时不区分大小写的。标记中实体是否区分取决于标记语言是否区分，

如果使用XHTML那么类名和ID名是区分大小写的，如果使用常规的HTML,是不区分的。

最好的命名方式，驼峰式大小写，（组成标识符的多个单词除首字母小写外，其余单词首字母均大写。如，leftColumn）

避免多类症，如果发现自己添加了很多类，很可能意味着XHTML文档结构有问题。 

1.3div和span

为了将不必要的标记减少到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如，使用主导航列表，那么不需要将它包围在div中。

避免多DIV症。

div 可以对块级元素进行分组，而span对行内元素进行分组或标识。使用span的情况比div少。

1.4 CSS版本

CSS1在1996年末成为推荐标准。包含最基本的属性。

CSS2在1基础上添加了高级概念，在1998年就已经成为推荐标准。

CSS3发布还有很长的路，所以为了提高开发和浏览器实现的速度。CSS3被分割成了模块。独立发布和实现。选择器模块接近于完成，可能在2006年成为推荐标准。

因为预期，从CSS2.0到CSS3.0的发布之间时间会很长。2002年启动了CSS2.1的开发，是CSS2.0的修订版。纠正一些错误，并且更精确的描述CSS的浏览器实现。

1.5 文档类型、DOCTYPE切换和浏览器模式

为什么声明？

在解析网页时，浏览器将使用这些规则检查页面的有效性并采取相应的措施。

浏览器通过分析页面的DOCTPYE声明来了解要使用哪个DTD，因此知道要使用(X)HTML的哪个版本。

DOCTYPE通常（但不总是）包含指定的DTD文件的URL。浏览器一般不读取这些文件，而是只识别常见的DOCTYPE声明。

有效性检验

浏览器需要知道要使用的DTD才能正确处理页面，所以对页面进行有效性检验要求有DOCTYPE声明。

有效检验的优缺点：

优：有助于找到代码中的BUG, 尽早检验是个好习惯。

缺：太过苛刻，很小的错误，遗留的内容无法通过有效性检验。

虽然有效性检验很重要，但现实生活中，需要一定程度的常识。

浏览器模式

创建原因：浏览器厂商开始创建与标准模式兼容的浏览器时，他们确保向后兼容性。为了实现这一点，创建了两种表现模式

标准模式：浏览器根据规范表现页面。

怪异模式：页面以一种比较宽松的向后兼容的方式显示，怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。

（IE6出现时，在标准模式中使用正确的框架集，在怪异模式中使用老式的专有框架集。）

ie里，如果第一行没有DTD定义那就会变成怪异模式，写了就是标准模式了。

Mozilla和Safari还有第三种模式，称为"几乎标准的模式"除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式相同。

DOCTYPE切换

浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方式。

如果XHTML文档包含的形式完整DOCTYPE,那么它一般以标准模式表现。

对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式表现。

包含过渡DTD和URI的DOCTYPE也导致页面以标准模式表现，

但是有过渡DTD而没有URI会导致页面以怪异模式表现。

DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以怪异模式表现。

 

DOCTYPE切换

定义：根据DOCTYPE是否存在选择的表现方法的效果被称为DOCTYPE切换。

DOCTYPE切换时浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错的DOCTPYE,那么页面就将以怪异模式表现。其表现就有错误，或不可预测。因此，一定要在站点的每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD.

HTML自动添加DOCTYPE声明。

XHTML还可能在DOCTYPE声明前添加XML声明。

XML声明是XML文件使用的可选声明，如果DOCTYPE声明不是页面上第一个元素，那么IE6会自动切换到怪异模式。

因此除非要将页面用做XML文档，否则最好避免使用XML声明。