目录
- 文档声明的作用.
- <!doctype html> 的作用?
- 内容 & 样式分离的原则.
- 严格模式 | 混杂模式指什么?
- 浏览器乱码的原因 | 解决.
文档申明作用
DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。在HTML中 doctype 有两个主要目的。
对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。决定浏览器的呈现模式
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
- 非怪异（标准）模式
- 怪异模式
- 部分怪异（近乎标准）模式
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
转至——网页的DOCTYPE声明的作用
<!doctype html> 的作用?
- 作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
- 怪异模式，浏览器使用自己的怪异模式解析渲染页面。
- 标准模式，浏览器使用W3C的标准解析渲染页面。
- HTML5 为什么只需要写 <!DOCTYPE HTML>？
- HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
结构（标记）与样式（版面设计）的分离
提到样式自然离不开CSS，虽然CSS能做到的，用<table>和<font>也能做到，但是呢，CSS的技术最大的优点是，它能够帮助你将Web文档的内容结构（标记）和版面设计（样式）分离开来。
能真正从CSS技术获益的方法，是把样式全部转移到外部文件去。
把结构和样式氛围两部分的CSS技术给每个人都带来方便。
- 如果你的工作是编写文档的内容，现在只要集中精力把文档内容正确地标记出来就行了，用不着再与充斥着
<table>和<font>等标签的模版打交道，也就用不着在担心把文档的版面设计弄得一团糟。 - 如果你的工作是设计网页的版面，那么只要集中经理于把诸如颜色、字体和位置等在一些外部文件里设置妥当就行了，而无需再接触文档，最多只需添加些类或是Id属性。
这也是CSS的最突出优点，文档结构与文档样式的分离可确保网页都能平稳退化。
- 具备CSS支持的浏览器可以把网页呈现得美轮美奂，
- 不支持或禁用了 CSS 功能的浏览器同样可以把网页的内容按照正确的结构显示出来。
按这种原则使用Js时，我们可以从Css身上借鉴到很多东西。
——《Js Dom 编程艺术 》
严格模式 | 混杂模式
模式：
- 严格模式（标准） ：是浏览器按照规范去显示页面；
- 混杂模式（兼容） ：是以一种向后兼容的方式去显示。
作用：可以决定浏览器如何渲染网站
触发：浏览器根据 doctype 是否存在和使用的是那种dtd（Document Type Definition）来决定。
差异：
对于这两种模式之间的差异，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。
呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。
浏览器乱码的原因 | 解决.
编写代码时，如果没有事先设置采用 utf-8编码（中文）或者是保存时没有以该种编码保存，那么再打开浏览器时，则由浏览器默认去进行解析您的代码，并呈现给使用者，这个时候很大可能就会出现乱码。
所以，在编写网页代码时，<meta charset = "utf-8"> 是必要的。
