JS魔法堂: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了,简单了吧?
七、参考资料,感谢你们!
正确使用DOCTYPE:http://www.cnblogs.com/shishm/archive/2012/02/29/2373080.html
Activating Browser Modes with Doctype:https://hsivonen.fi/doctype/(《前端翻译:Activating Browser Modes with Doctype》)
全栈JavaScript之路(九)了解DocumentType类型 http://blog.csdn.net/liveinjs/article/details/36624691
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 算法集锦(20) | 自动驾驶 | 交通标志识别算法
- 敏捷回归测试
- 算法集锦(21) | 自动驾驶 |汽车转向角控制算法
- Java压缩/解压缩字符串
- 凉经算法题反思 | 单调栈与DP二分法
- 终于有人把Docker讲清楚了!
- 飞天茅台超卖事故:Redis分布式锁请慎用!
- 算法集锦(24) | 自动驾驶 |高速公路行驶路径规划算法
- 【自动驾驶专题】|小白都会玩的自动驾驶算法
- 算法基础(6)| 语音识别DTW算法小讲
- Selenium设置浏览器为手机模式自定义大小
- 如何在Jetson nano上同时编译TensorRT与Paddle Lite框架
- 一文概览无监督聚类算法有多少 | 算法基础(10)
- 算法集锦(28)| 智能医疗 | 血液细胞分类算法
- 基于飞桨复现 CVPR2018 Relation Net的全程解析