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中,文档类型声明(DOCTYPE)位于...通过熟练掌握HTML文档类型、CSS选择器、盒模型以及边距和填充的使用,开发者可以创建出符合预期的网页设计。
IDEA配置btl文件类型为html.docx 在IDEA开发环境中,默认情况下,beetl模板文件以.btl后缀命名,而IDEA对这种文件类型的默认处理方式是作为文本文件处理。这会给前端开发带来不便,因为.beetl文件实际上是html文件...
关于HTML文档类型参考:http://i.wanz.im/2010/05/28/why_doctype_html/ 检查发现JS在获取当前页面可视大小,和页面滚动位置有差别!在页面包含一个2000*2000的DIV是IE和Chrome在不同HTML文档类型测试整理数据如下:...
通过File API,开发者可以获取文件信息,例如文件名、文件大小、文件类型等。File API中的`File`对象代表了一个文件,它提供了文件名、文件大小、MIME类型等信息,以及一个到文件句柄的引用。而`FileList`对象则像是...
Linux 操作系统下常见文件类型分析 Linux 操作系统下常见文件类型可以分为多种,包括压缩和打包文件、普通文件格式、系统文件、程序和脚本文件等。 压缩和打包文件是指使用某种压缩算法或打包工具将多个文件或...
以下是对Struts2中涉及的文件类型及其MIME类型的详细说明: 1. **应用型文件**: - `.a` 和 `.bin`:这些文件通常作为二进制数据流传输,MIME类型为 `application/octet-stream`。 - `.ai` 和 `.eps`:用于Post...
1.2.1 HTML 文档类型申明:推荐使用 HTML5 的文档类型申明,避免使用 XHTML。 1.2.2 缩进:使用 2 个空格(一个 tab);嵌套的节点应该缩进。 1.2.3 分块注释:在每一个块状元素、列表元素和表格元素后,加上一对 ...
关于html的文档类型说明简介。HTML DOCTYPE 标签 -- DTDs 文档类型声明DOCTYPE 标签 -- 定义了标准文档的类型, DOCTYPE标签是单独出现的, DOCTYPE,简称为DTDs,是英文Document type的缩写,中文“文档类型”
"Flash多文件大文件上传自定义文件类型"这个主题聚焦于使用Adobe Flash技术实现这一复杂需求。以下是关于这个主题的详细解释: 首先,**多文件上传**是指允许用户一次性选择并上传多个文件的功能。这种功能在社交...
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`)。...
这里的例子仅验证了四种文件类型(`.xls`, `.doc`, `.html`, `.txt`),实际应用中可以根据需求增加或减少允许的文件类型。 #### 总结 本篇介绍的方法主要基于早期的JavaScript技术实现文件大小和类型的限制。随着...
一个HTML文档的标准结构包含以下几个部分:文档类型声明(DOCTYPE)、html根标签、head头部信息以及body主体内容。文档类型声明用于指示浏览器所使用的HTML或XHTML的版本;html标签定义了整个文档,lang属性指定文档...
3. **HTML文档类型**:HTML4.01提供了三种文档类型:Strict、Transitional和Frameset。- **Strict**类型不允许使用表现层的HTML元素和属性,鼓励使用CSS来控制样式。- **Transitional**类型允许使用一些表现层元素,...
HTML 文档类型定义(DOCTYPE)是 HTML 文档的开头部分,用于声明文档类型和文档类型定义(DTD)。DOCTYPE 分为三种类型:Strict、Transitional 和 Frameset。Strict DTD 适用于需要纯净标记的文档,Transitional DTD...
- 在创建新文件类型时,点击“高级”按钮,系统会自动查找对应的文件类型(通常是HTML DOCUMENTS),确认即可。 **优点:**根据文档内容,此方法能够有效地解决图标显示异常的问题。 #### 三、卸载火狐浏览器后...
1、Word模板转html模板的操作步骤(图示例+操作...适合人群:需要通过法务提供的word类型的合同模板,填充数据生成pdf的人。 阅读建议:按照上述操作步骤,先看README.md文档,再看other/生成html操作步骤目录下的图片。
通常,我们会依赖于服务器端转换服务或第三方库,如Google Docs Viewer,它可以提供对这些文件类型的在线预览。通过将文件URL传递给Google Docs Viewer,可以在`<iframe>`中显示预览: ```html ...
XML 文档文件(.xml) XML (Extensible Markup Language) 是一种用于存储和传输数据的标记语言。在 ASP.NET 应用程序中,.xml 文件通常用于配置文件、数据交换和存储等方面。 ### 8. HTML 页面文件(.html 或 ....
这个“Html文档合集1”显然包含了一系列与HTML相关的文件,可能是教程、代码示例或者网页源代码。其中,“Html”标签进一步确认了这些内容与HTML技术相关。而“And Txt”可能意味着除了HTML文件,还有TXT文本文件,...