JS魔法堂:doctype我们应该了解的基础知识-阿里云开发者社区

开发者社区> 肥仔john> 正文

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

简介:
+关注继续查看

一、前言                           

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

 

二、什么是doctype                      

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

  其声明格式如下:

    <!DOCTYPE htmlPUBLIC "公共标识符""系统标识符"[<!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了,简单了吧?


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

相关文章
一些js基础知识收集
1、输出今天的日期以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26 2、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,[if !supportLists]1.     [endif]请写一个函数escapeHtml,将, &, “进行转义 3、用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。
883 0
Nodejs基础:路径处理模块path总结
在nodejs中,path是个使用频率很高,但却让人又爱又恨的模块。部分因为文档说的不够清晰,部分因为接口的平台差异性。 将path的接口按照用途归类,仔细琢磨琢磨,也就没那么费解了。
3911 0
hadoop from rookie to ninja - 1. Basic Architecture(基础架构)
1. Daemons(守护进程) 新老架构 老的: Apache Hadoop 1.x (MRv1)   新的: Apache Hadoop 2.x (YARN)-Yet Another Resource Negotiator   1-1) Apache Hadoop 1.
1221 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3976 0
JavaWeb初识 认识jsp,基础配置
Servlet是Java代码包裹Html代码 JSP是Html代码包裹Java代码JSP就是一个Java类 例如index.jsp 编译后的文件夹名称就是 index_jsp.java 所以说jsp就是一个Java类,并不是想Html一样是个超文本传输或者是其他什么的JSP就是一个Servlet,jsp继承与Servlet,Servlet有的JSP他都有 JSP的转化过程是>>jsp.
860 0
JSP 杂项基础知识
1.JSP九大内置对象 2.建立JSP后,将PageEncoding改为ContentType  pageEncoding是jsp文件自身的编码方式,而contentType是服务器发给客户端时内容的编码 3.
649 0
非常基础的JS动画演示
这个例子使用setTimeout实现非常简单的动画效果。 div{    height:200px;    width:600px;    background-color:#CCCCCC;}#test1{    background:#99CC00;    position:fixed;   ...
526 0
+关注
肥仔john
偏前端的临栈工程师^_^
201
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载