`

HTML文档类型

阅读更多

DOCTYPE,是英文Document type的缩写,翻译为“文档类型”

DOCTYPE标签是单独出现的,定义了标准文档的类型

 

【说明】

①文档类型,会使浏览器使用相应标准加载网页并显示

②文档类型定义在HTML文档的第一行,在html标签之前

③文档不定义DOCTYPE,浏览器将无法获知HTML或XHTML文档的类型,因此会进入混乱模式,详见:浏览器模式

 

【浏览器表现模式】

      浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义了DOCTYPE浏览器则会进入标准模式(Standards Mode),否则浏览器会进入怪异模式或混杂模式(Quirks mode)

 

【浏览器多种表现模式的来源】

      浏览器开发初期W3C倡导的网页标准并不流行,因此浏览器有独特的对网页标签或属性的解析模式,随着日后网页标准的流行,浏览器增加了对新标准的支持(Standards Mode标准模式),但又没有放弃对原有模式的兼容(Quirks mode怪异模式),这就是浏览器多种表现模式的来源。

     而且Standards Mode  W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode怪异模式和Standars mode标准模式,两种渲染方法共存在一个浏览器上。

      那么浏览器究竟该采用哪种模式渲染呢?这就引出的DTD,既是网页的头部声明,浏览器会通过识别DTD而采用相对应的渲染模式:

      1. 浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。  

      2. 对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/  

      3. 对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析

      4. 在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。

      5. 可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。

      6. 在ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>),则采用quirks mode解析。这条规则在ie7中已经移除了。

 

【为什么使用<!DOCTYPE HTML>】

       不管是刚接触前端,还是你已经“精通”web前端开发的内容,你应该知道在你写html的时候需要定义文档类型;你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype:

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

         好在现在的各种web开发工具都足够强大,支持插入模板代码,因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它,你也许可以尝试下面这个写法:

<!DOCTYPE html>

          哇哦,很简洁哦!好处显而易见:

一、你可以轻松的写下这个doctype,而不用担心会写错;

二、它是向后兼容的,是的,html5的doctype就是这样写的,并且现代浏览器都认识它

          如果你跟我一样一直以为:没有指定dtd将会开启浏览器的怪异模式,这种说法是错的!

          正确的说法应该是:没有定义doctype才会开启怪异模式,也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型dtd。

          让我们来回顾一下,所有的浏览器都需要两种模式:怪异模式和严格模式(也有人叫标准模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。关于两种模式,你需要知道以下几点:

          ①在标准化之前写的页面是没有doctype的,因此没有doctype的页面是在怪异模式下渲染的。

           ②反过来说,如果web开发人员加入的doctype,说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会按照标准来渲染。

           ③任何新的或者未知的doctype都会开启严格模式(标准模式)。

           ④每个浏览器都有自己的方式来激活怪异模式。

 

注意:你可以根本不需要根据你选择的doctype来验证你的页面,只要doctype标签存在就足以开启严格模式(标准模式)了

我们只需要一小段JavaScript代码就可以得到答案,它就是:

mode=document.compatMode;

 这个代码可以用来判断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑

你可以在你想测试的浏览器里查看:

 

便可看到结果了,据我所知,这样并没有激活怪异模式,即使是ie6下

 

 

【JS判断浏览器解析模式/方式】

在js中如何判断当前浏览器正在以何种方式解析?   

document对象有个属性compatMode ,它有两个值:

①BackCompat     对应quirks mode

②CSS1Compat     对应strict mode 

var mode = document.compatMode;
console.log(mode)
 

 

 【怪异模式与标准模式区别】

 Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上,这也是我们在js里要注意的地方。

     什么是盒模式? 这是针对块级元素说的,说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。 

在Standars mode标准模式中: 

元素真正的宽度 = margin-left   +   border-left-width   +   padding-left   + width   +   padding-right   +   border-right-width   +   margin-right;  

在Quirks mode怪异模式中: 

width则是元素的实际宽度,内容宽度 = width   -   (margin-left   +   margin-right   +   padding-left   +   padding-right   +   border-left-width   +   border-right-width)

    1. 内联元素 ,例如<a>|<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。  

    2.   内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。

    3. 浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。  

    4. 如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0% ,因此不会被显示,此点在采取层布局的时候需特别注意。  

    5. 边界值可为负,其显示效果各浏览器可能不相同。  

    6. 填充值不可为负。  

    7. 边框默认的样式(border-style)为不显示(none)。

 

 

【用法】

官方解析:

在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict

当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

var height = document.compatMode=="CSS1Compat" ? 
document.documentElement.clientHeight : document.body.clientHeight;

【注意:】这里document.compatMode(文档渲染模式)用来判断当前浏览器采用的渲染方式

①等于BackCompat怪异模式时,浏览器客户区宽度是document.body.clientWidth

②等于CSS1Compat标准模式时,浏览器客户区宽度是document.documentElement.clientWidth

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

if (document.compatMode == \"BackCompat\") {
     cWidth = document.body.clientWidth;
     cHeight = document.body.clientHeight;
     sWidth = document.body.scrollWidth;
     sHeight = document.body.scrollHeight;
     sLeft = document.body.scrollLeft;
     sTop = document.body.scrollTop;
   }else { //document.compatMode == \"CSS1Compat\"
     cWidth = document.documentElement.clientWidth;
     cHeight = document.documentElement.clientHeight;
     sWidth = document.documentElement.scrollWidth;
     sHeight = document.documentElement.scrollHeight;
     sLeft = document.documentElement.scrollLeft == 0 ? 
             document.body.scrollLeft : document.documentElement.scrollLeft;
     sTop = document.documentElement.scrollTop == 0 ? 
            document.body.scrollTop : document.documentElement.scrollTop;
}

 简而言之:

var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth!='number'){
    if(document.compatMode=='CSS1Compat'){//标准模式
       pageWidth=document.documentElement.clientWidth;
       pageHeight=document.documentElement.clientHeight;
    }else{
       pageWidth=document.body.clientWidth;
       pageHeight=document.body.clientHeight;
    }
}

 (以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome) 

 

 常用的浏览器表现模式包括:

①IE

IE包括两种模式:标准模式(Standards Mode)与怪异模式或混杂模式(Quirks mode),简称为IE(S)与IE(Q)

②FireFox

FIreFox包括三种模式:Full Standards Mode、Almost Standards Mode与Quirks Mode。对这三种模式的描述见:Mozilla's DOCTYPE sniffing

③Opera

Opera包括三种模式:Quirks、Standards与Almost Standards。对这三种模式的描述见:DOCTYPE Switches support in Opera

 

 

 

 

 

.

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    html文档类型

    HTML 文档类型是网页开发的基础,它定义了文档遵循的语法规则。在HTML中,文档类型声明(DOCTYPE)位于...通过熟练掌握HTML文档类型、CSS选择器、盒模型以及边距和填充的使用,开发者可以创建出符合预期的网页设计。

    IDEA配置btl文件类型为html.docx

    IDEA配置btl文件类型为html.docx 在IDEA开发环境中,默认情况下,beetl模板文件以.btl后缀命名,而IDEA对这种文件类型的默认处理方式是作为文本文件处理。这会给前端开发带来不便,因为.beetl文件实际上是html文件...

    HTML文档类型详解 推荐

    关于HTML文档类型参考:http://i.wanz.im/2010/05/28/why_doctype_html/ 检查发现JS在获取当前页面可视大小,和页面滚动位置有差别!在页面包含一个2000*2000的DIV是IE和Chrome在不同HTML文档类型测试整理数据如下:...

    html5文件上传中文文档

    通过File API,开发者可以获取文件信息,例如文件名、文件大小、文件类型等。File API中的`File`对象代表了一个文件,它提供了文件名、文件大小、MIME类型等信息,以及一个到文件句柄的引用。而`FileList`对象则像是...

    Linux操作系统下常见文件类型分析

    Linux 操作系统下常见文件类型分析 Linux 操作系统下常见文件类型可以分为多种,包括压缩和打包文件、普通文件格式、系统文件、程序和脚本文件等。 压缩和打包文件是指使用某种压缩算法或打包工具将多个文件或...

    Struts2文件类型汇总

    以下是对Struts2中涉及的文件类型及其MIME类型的详细说明: 1. **应用型文件**: - `.a` 和 `.bin`:这些文件通常作为二进制数据流传输,MIME类型为 `application/octet-stream`。 - `.ai` 和 `.eps`:用于Post...

    前端代码规范文档,js,css,html等

    1.2.1 HTML 文档类型申明:推荐使用 HTML5 的文档类型申明,避免使用 XHTML。 1.2.2 缩进:使用 2 个空格(一个 tab);嵌套的节点应该缩进。 1.2.3 分块注释:在每一个块状元素、列表元素和表格元素后,加上一对 ...

    html的文档类型说明

    关于html的文档类型说明简介。HTML DOCTYPE 标签 -- DTDs 文档类型声明DOCTYPE 标签 -- 定义了标准文档的类型, DOCTYPE标签是单独出现的, DOCTYPE,简称为DTDs,是英文Document type的缩写,中文“文档类型”

    Flash多文件大文件上传自定义文件类型

    "Flash多文件大文件上传自定义文件类型"这个主题聚焦于使用Adobe Flash技术实现这一复杂需求。以下是关于这个主题的详细解释: 首先,**多文件上传**是指允许用户一次性选择并上传多个文件的功能。这种功能在社交...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf

    10. HTML文档类型:HTML文档类型是指HTML文档的类型,可以是HTML 4.01、XHTML 1.0、HTML5等。不同的文档类型对应不同的DOCTYPE声明和文档结构。 HTML基础知识点包括HTML基本结构、字体和文本格式、超链接、表格布局...

    文件上传后缀名与文件类型对照表

    - 文本和文档文件:TXT (`text/plain`)、DOC (`application/msword`)、XLS (`application/vnd.ms-excel`)、PPT (`application/vnd.ms-powerpoint`)、PDF (`application/pdf`)、CHM (`application/octet-stream`)。...

    javascript控制上传文件的大小及文件类型

    这里的例子仅验证了四种文件类型(`.xls`, `.doc`, `.html`, `.txt`),实际应用中可以根据需求增加或减少允许的文件类型。 #### 总结 本篇介绍的方法主要基于早期的JavaScript技术实现文件大小和类型的限制。随着...

    html-css.pdf

    一个HTML文档的标准结构包含以下几个部分:文档类型声明(DOCTYPE)、html根标签、head头部信息以及body主体内容。文档类型声明用于指示浏览器所使用的HTML或XHTML的版本;html标签定义了整个文档,lang属性指定文档...

    HTML学习资料

    3. **HTML文档类型**:HTML4.01提供了三种文档类型:Strict、Transitional和Frameset。- **Strict**类型不允许使用表现层的HTML元素和属性,鼓励使用CSS来控制样式。- **Transitional**类型允许使用一些表现层元素,...

    htmlcss多选题及答案,前端面试题含答案——HTML、CSS相关.docx

    HTML 文档类型定义(DOCTYPE)是 HTML 文档的开头部分,用于声明文档类型和文档类型定义(DTD)。DOCTYPE 分为三种类型:Strict、Transitional 和 Frameset。Strict DTD 适用于需要纯净标记的文档,Transitional DTD...

    xp系统htm、html文件显示无效图标的处理.docx

    - 在创建新文件类型时,点击“高级”按钮,系统会自动查找对应的文件类型(通常是HTML DOCUMENTS),确认即可。 **优点:**根据文档内容,此方法能够有效地解决图标显示异常的问题。 #### 三、卸载火狐浏览器后...

    word文档生成html模板(freemarker)再转为pdf示例代码

    1、Word模板转html模板的操作步骤(图示例+操作...适合人群:需要通过法务提供的word类型的合同模板,填充数据生成pdf的人。 阅读建议:按照上述操作步骤,先看README.md文档,再看other/生成html操作步骤目录下的图片。

    HTML+JS实现浏览器在线预览文件(支持pdf、excel、ppt、doc、jpg、png格式)

    通常,我们会依赖于服务器端转换服务或第三方库,如Google Docs Viewer,它可以提供对这些文件类型的在线预览。通过将文件URL传递给Google Docs Viewer,可以在`&lt;iframe&gt;`中显示预览: ```html ...

    ASP.Net应用中常见的文件类型

    XML 文档文件(.xml) XML (Extensible Markup Language) 是一种用于存储和传输数据的标记语言。在 ASP.NET 应用程序中,.xml 文件通常用于配置文件、数据交换和存储等方面。 ### 8. HTML 页面文件(.html 或 ....

    Html文档合集1

    这个“Html文档合集1”显然包含了一系列与HTML相关的文件,可能是教程、代码示例或者网页源代码。其中,“Html”标签进一步确认了这些内容与HTML技术相关。而“And Txt”可能意味着除了HTML文件,还有TXT文本文件,...

Global site tag (gtag.js) - Google Analytics