开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3821463.html ^_^肥仔John

  

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!


本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/3821463.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
TypeScript 之 More on Functions
TypeScript 的官方文档早已更新,但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。
29 0
TypeScript 之 More on Functions
TypeScript 之 More on Functions
37 0
通过 Doctype 启用浏览器模式 【已翻译100%】(2/2)
doctype嗅探(也叫doctype转换) 现代浏览器使用doctype嗅探来决定text/html文档的引擎模式。这意味着模式的选择是基于HTML文档开始的文档类型声明(或缺少)。(这不适于使用XML文档类型的文档。
1445 0
深入分析js中的this、constructor 和prototype
this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向
1652 0
MongoDB执行计划获取(db.collection.explain())
在RDBMS中,无论那种数据库,都提供了SQL剖析工具,用来解决SQL效率低下的问题。在MongoDB中,也有相应的策略来实现剖析。
1654 0
iOS 8 中 UIAlertView 和 UIActionSheet 河里去了?
iOS 8 中 UIAlertView 和 UIActionSheet 河里去了? 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
1070 0
彻底理解Doctype
写了很多年的CSS,但是对于页面中的第一段话从来都是模模糊糊的认识。仿佛是记得,不同doctype模式,就会触发不同的验证级别。实际的编码过程中,貌似遇到过一两次模式不同,代码解释不一样的情况,但是并没有去细细的追究。
825 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载