doctype我们应该了解的基础知识

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　什么是doctype？其实我们一直使用，却很少停下来看清楚它到底是什么，对网页有什么作用。本篇将和大家一起探讨那个默默无闻的doctype吧！

二、什么是doctype　　　　　　　　　　　　　　　　　　　　　　

　　doctype或DTD就是声明在文档首行，位于<html>前，用于告知浏览器该文档遵循那种级别的HTML或XHTML规范。

　　其声明格式如下：

　　　　<!DOCTYPE_① html_② PUBLIC_③ "公共标识符"_④ "系统标识符"_⑤[<!ELEMENT name (#PCDATA)>]_⑥>

　　　　①. dotype固定的起始部分

　　　　 ②. 声明文档以html标签为根标签

　　　　 ③. PUBLIC用于表示第四部分是公共标识符

　　　　 ④. 公共标识符

　　　　 ⑤. 系统标识符

　　　　 ⑥. 内部子集，html不常见，一般出现在XML中

三、doctype的种类　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　doctype有三种类型（Strict、Transitional和Frameset）。Strict是最为严格的类型，要求文档内容做到样式与数据完全分离，html标签中不允许使用任何表现层属性（如width等）；Transitional为非常宽松的DTD，允许你继续使用HTML4.01的标签，并且数据和样式无需完全分离；Frameset表文档会用到框架。

　　以XHTML为例：

　　Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

四、doctype的实际用途　　　　　　　　　　　　　　　　　　　　

　　除了上述用途外，doctype还有一个十分重要的用途，那就是触发文档模式的切换了。W3C规定在没有有效的doctype时，浏览器将以怪异模式解析、渲染文档，否则就采用标准模式处理文档。当然具体情况并没有那么简单，具体可以请看《JS魔法堂：浏览器模式和文档模式怎样玩？》

那么不同的DTD会使浏览器切换到哪种状态，请参考下图：

注意：由于在现实使用过程中，发现doctype最大的作用就是用于文档模式的切换，于是HTML5规范将doctype的声明格式简化为<!DOCTYPE html>，因此以后我们直接写这个简化版就好了。（“理论指导实践，实践验证真理”被再一次验证了）

五、DocumentType类型　　　　　　　　　　　　　　　　　　　　　　　　

IE9+、FF、Chrome和Safari均支持DocumentType类型，因此我们可以通过document.doctype获取DocumentType类型的DTD对象。若文档没有声明DTD，则返回null。

5.1. 获取方式

除了通过document.doctype获取外，还可以通过document.childNodes[0]来获取。

5.2. 特点

不能动态CUD，仅仅能通过该API获取DTD信息而已。

5.3. 属性值

　 nodeType：10

nodeName：文档类型的名称（就是<!DOCTYPE 文档类型的名称>）

nodeValue：null

　 parentNode：HTMLDocument类型的元素对象（即是document）

　 parentElement：null

childNodes：空的NodeList

children：undefined

name：和nodeName一样

entities：描述实体，恒返回null（IE9+有该属性，而Chrome、FF直接删除该属性）

notations：描述符号，恒返回null（IE9+有该属性，而Chrome、FF直接删除该属性）

5.4. DOM2、DOM3新增的属性

　　publicId：获取公共标识

　　systemId：获取系统标识

　　internalSubset：获取内部子集

5.5. IE5678下的DTD节点的解析

　　由于IE5678没有DocumentType类型，因此document.doctype恒返回null。而通过document.childNodes[0]返回的是以注释类型来解析DTD。

六、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　看了这么多，其实只需在以后开发的时候记得在文档首行加上<!DOCTYPE html>就OK了，简单了吧？

7、解析

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

　　从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

　　ie 盒子模型

　　从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

　　例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。

假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：
宽： 20*2+1*2+10*2+200=262px
高： 20*2+1*2*10*2+50=112px
盒子的实际大小为：
宽： 1*2+10*2+200=222px
高： 1*2+10*2+50=72px
假如用ie 盒子模型，那么这个盒子需要占据的位置为：
宽： 20*2+200=240px
高： 20*2+50=70px
盒子的实际大小为：
宽： 200px
高： 50px

　　那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jquery 做的例子来证实一下。

　　代码1：

<html>
<head>
 <title>你用的盒子模型是？</title>
 <script language="javascript" src="jquery.min.js"></script>
 <script language="javascript">
   var sbox = $.boxmodel ? "标准w3c":"ie";
   document.write("您的页面目前支持："+sbox+"盒子模型");
 </script>
</head>
<body>
</body>
</html>

上面的代码没有加上 doctype 声明，在 ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

　　代码2：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
 <title>你用的盒子模型是标准w3c盒子模型</title>
 <script language="javascript" src="jquery.min.js"></script>
 <script language="javascript">
   var sbox = $.boxmodel ? "标准w3c":"ie";
   document.write("您的页面目前支持："+sbox+"盒子模型");
 </script>
</head>
<body>
</body>
</html>

代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”。

posted on 2016-01-05 10:47 zhangzongshan 阅读(153) 评论(0) 收藏举报

刷新页面返回顶部

雪松

doctype我们应该了解的基础知识

导航

公告