怪异模式和 DTD

为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页。在标准模式中，浏览器根据规范来表现页面；而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作。

这两种模式差异较大，比较典型的就是 IE 对盒模型的解析：在标准模式中，网页元素的宽度是又 padding、border、width 三者的宽度相加决定的；而在怪异模式中，width 本身就包括了 padding 和 border 的宽度。怪异模式是为了兼容老式浏览器，它的解析很多不符合标准。所以一般情况下，我们应该避免触发怪异模式，而选用标准模式。

怪异模式如何被处罚呢？与 DTD 有关。DTD 全称是 Document Type Definition，即文档类型定义。DTD 是一种保证 HTML 文档格式正确的有效方法。它规定、约束符合标准通用标示语言（SGML）或SGML子集可扩展标示语言（XML）规则的定义和陈述。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. </html>

在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型， 告诉浏览器要通过哪一种规范解析文档（比如HTML或XHTML规范）；　

!DOCTYPE 声明不属于 HTML 标签，它是一条指令，告诉浏览器编写页面所用的标记的版本。

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（html 5简化了这种声明，意在告诉浏览器使用统一的标准即可, 这个统一的标准去哪里找啊,www.w3.org）。

常见的!DOCTYPE：

  1. // HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4. // HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7. // HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  10. // XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  13. // XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明： 
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. // XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  19. // HTML 5: 
  20. <!doctype html>

如何组织 CSS

如何组织 CSS 可以有多种角度，例如按照功能划分：将控制字体的 CSS 集中在 font.css 文件里，将控制颜色的 CSS 集中在 color.css 文件里，将控制布局的 CSS 放在 layout.css 文件里；或者按区块划分：将头部的 CSS 放在 head.css 里，底部的放在 foot.css 里，侧边的放在 sidebar.css 里，主体放在 main.css 里。不同角度有自己的道理，也有自己的优点和缺点。

这里推荐我比较喜欢的一种组织方式：base.css + common.css + page.css。它们不是并列关系，而是层叠的关系：

page
|
common
|
base

  • base 层

这一层位于最底层，提供 CSS reset 功能和粒度最小的通用类——原子类。这一层会被所有页面引用，是页面样式所依赖的最底层。这一层与具体 UI 无关，无论哪种风格都可以引用它，所以 base 层要求精简和通用，同时相对稳定，基本上不需要维护。

  • common 层

这一层位于中间，提供组件级的 CSS 类。提到组件，就不得不提“模块化”。我们将页面内的元素拆成一块一块功能和样式相对独立的小“模块”，这些“模块”有些是很少重复的，有些是会大量重复的，我们可以将大量重复的“模块”视为一个组件。我们从页面里尽可能的将组建提取出来，放在 common 层里。

  • page 层

网站中高度重用的模块，我们把它们视为组件，放在 common 层；非高度重用的模块，可以把它们放在 page 层。page 层位于最高层，提供页面级的样式。而 page 层是页面级的，每个页面都可能会有自己的 page 层。page 层的文件可以用