专栏首页偏前端工程师的驿站JS魔法堂:doctype我们应该了解的基础知识

JS魔法堂:doctype我们应该了解的基础知识

一、前言                           

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

二、什么是doctype                      

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

  其声明格式如下:

<!DOCTYPEhtmlPUBLIC"公共标识符""系统标识符"[<!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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS魔法堂:jsDeferred源码剖析

    一、前言                                最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地...

    ^_^肥仔John
  • JS魔法堂:初探传说中的setImmediate函数

    一、前言                                  由于JavaScript程序为单线程,因此在执行长时间的操作时(如循环和递归操作)到...

    ^_^肥仔John
  • Java魔法堂:深入正则表达式API

    目录                               一、前言 二、正则表达式的使用诉求 三、java.util.regex包 四、java.lan...

    ^_^肥仔John
  • idea 多模块spring-boot项目jsp页面不能访问问题

    单独的一个项目访问jsp页面可以访问到,然后做成多模块后,访问,其他正常,jsp页面无法找到。

    小贝壳
  • Rainbond V3.7.1 发布,零配置支持全方位集群资源监控与报警

    Rainbond是一款以应用为中心的开源PaaS,由好雨基于Docker、Kubernetes等容器技术自主研发,可作为企业在公有云或私有云环境下的应用交付平台...

    Rainbond开源
  • 剑指offer(9)——用两个栈实现队列

    说故事的五公子
  • Flutter跨平台移动端开发丨Widget、Element、State、状态管理

    widget 的主要工作是通过实现 build 函数 来构建自身。一个 widget 通常由一些低级别的 widget 组成,flutter 框架依次的构建这些...

    码脑
  • 几种Code Value Web输入的解决方案[代码]

    http://files.cnblogs.com/neozhu/AutocompletedSetKeyValue.rar

    阿新
  • 头条丨Steam开发者大会首日,Valve公开全新控制器及二代灯塔系统

    VRPinea
  • 买车了吗?未来你的车可能是这样......

    导读:就从《霹雳游侠》说起吧。 ? 就从《霹雳游侠》说起吧。这部在美国从82年起只拍了4年的美剧,在90年代跟后来的《还珠格格》一样被重播了又播,你大约觉得它...

    灯塔大数据

扫码关注云+社区

领取腾讯云代金券