HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式
主要涉及知识点:
- HTML与XHTML
- HTML与XHTML的区别
- DOCTYPE与DTD的概念
- DTD的分类以及DOCTYPE的声明方式
- 标准模式(Standard Mode)和兼容模式(Quircks Mode)
- 标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别
HTML与XHTML
- HTML:超文本标记语言 (Hyper Text Markup Language)
XHTML:可扩展超文本标记语言 (EXtensible HyperText Markup Language),是一种置标语言。 - HTML是一种基于标准通用标记语言(SGML)的应用,XHTML则基于可扩展标记语言(XML)
- XHTML的目标是取代HTML,与HTML4.01几乎相同,是更严格更纯净的 HTML 版本。
- HTML 和 XHTML 的区别简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。
本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡。在HTML5成为主流之前,Html4.01一直是大多数人使用的Html版本,Html5目标是取代HTML4.01和XHTML1.0标准,旨在提高网页性能,增加页面交互。
HTML与XHTML的区别
XHTML 与 HTML 4.01 标准没有太多的不同。主要的不同体现在下面几点:
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
DOCTYPE与DTD的概念
文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则,是HTML的验证机制。DOCTYPE标签是一种标准通用标记语言的文档类型声明,声明文档的解析类型,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的DTD(用什么样的文档标准)来解析文档。DTD定义了文档中的元素(标记和属性)和实体,以及相互关系。 通过DTD验证XML文档的有效性。DTD为解析器提供了解析HTML文档的依据。
DTD的分类以及DOCTYPE的声明方式
由于HTML5不基于 SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
因此HTML5的DOCTYPE声明:
<!DOCTYPE html>
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型,有以下三种类型:
- HTML 4.01 Strict DOCTYPE声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional DOCTYPE声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset DOCTYPE声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict DOCTYPE声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional DOCTYPE声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset DOCTYPE声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三种DTD类型的作用说明:
- Strict : 干净的标记,免于表现层的混乱,与层叠样式表(CSS)配合使用。
- Transitional :包含 W3C 所期望移入样式表的呈现属性和元素。使用不支持层叠样式表(CSS)的浏览器时使用。
- Frameset : 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset等同于 Transitional。
标准模式(Standard Mode)和兼容模式(Quircks Mode)
在W3C标准出来之前,浏览器对页面的渲染没有统一的标准,各个浏览器对同一页面的渲染有一定的差异,而每个浏览器的不同版本对页面的渲染也有一定程度上的差异。而W3C标准出来之后,浏览器对页面的渲染就有了统一的标准。前者对于浏览器使用自己的方式渲染页面的模式,我们称之为Quircks Mode(怪异模式、兼容模式或混杂模式);而对于后者浏览器按照标准解析执行代码的模式,我们称之为Standard Mode(标准模式或严格模式)。在标准模式中,浏览器根据规范呈现页面;在兼容模式中,页面以一种比较宽松的向后兼容的方式显示。其实,还有一种模式叫近标准模式,它与标准模式一致,除了在处理下面这种情况时:如果一个块级元素除了空白文本(空格,tab等字符)外再无其它内容,则它的高度按0处理;如果有子元素,则它的高度不能比子元素大,无论它的font-size多大。
那么,浏览器解析时到底使用标准模式还是怪异模式?这就和之前提到的DOCTYPE有关了。
- 标准模式:
- XHTML文档包含完整的DOCTYPE声明时,一般以标准模式呈现;
- 文档包含严格DTD类型的DOCTYPE声明时,以标准模式呈现;
- 文档包含过渡DTD类型的DOCTYPE声明且声明包含URI时,以标准模式呈现。
- 兼容模式:
- 文档不包含DOCTYPE声明或DOCTYPE声明不正确时,以兼容模式呈现;
- 文档包含过渡或框架DTD类型的DOCTYPE声明但声明不包含URI时,以兼容模式呈现;
- 在IE中,如果DOCTYPE声明在XML之后,以兼容模式呈现。
标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别
最后总结一下,在标准模式和兼容模式下,页面的呈现主要有哪些区别:
关于盒模型:
在标准模式下,元素width是内容宽度,即:元素实际width = 元素width + 元素padding + 元素border,(盒子的宽度还要加上元素margin的宽度);
在兼容模式下,元素width是元素的实际宽度,即:元素width = 元素内容width + 元素padding + 元素border,(盒子的宽度还要加上元素margin的宽度)。盒模型:主要针对块级元素,把每个块级元素都想象成一个盒子,每个盒子有外边距(margin)、边框(border)、内边距(padding)、内容(content)。
关于行内元素:
对于行内元素的垂直对齐样式设置,基于 Gecko 的浏览器(Mozilla Firefox、HotBrowser、Mozilla Suite、Camino)标准模式对齐至基线,怪异模式对齐至底部;
对于行内元素的高度(height)和宽度(width)的设置,标准模式下不生效,而在兼容模式下会生效。四大内核:
- Trident,主要有IE浏览器以及多核浏览器
- Gecko,主要有Firefox以及Firefox的衍生浏览器
- WebKit,主要有Chrome与Chrome的衍生浏览器、Safari以及多核浏览器
- Presto,之前主要应用于Opera,Opera现已改用Google Chrome的Blink内核。
- 关于百分比的高度设置:在标准模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的。
- 关于水平居中设置:在标准模式下,使用margin:0 auto可以使元素水平居中,但在兼容模式下会失效。
- 关于!important声明:在兼容模式下,IE6/7/8下使用!important声明无效。
其他:兼容模式下,设置图片的padding会失效;table中的字体属性不能继承父元素的字体属性;设置white-space:pre会失效。
HTML学习笔记——DOCTYPE和DTD,标准模式和兼容模式的更多相关文章
- 前端面试题系列(1):doctype作用 标准模式与兼容模式
1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...
- Doctype作用?标准模式与兼容模式各有什么区别?
Doctype作用?标准模式与兼容模式各有什么区别? DOCTYPE是document type(文档类型)的简写,用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面.DOCTYPE不存在 ...
- 说说html 的<!DOCTYPE>声明&标准模式与兼容模式
我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前. <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪个h ...
- DOCTYPE的作用以及标准模式和兼容模式的区别
<!doctype>声明必须处于HTML文档的头部,在<html>标签之前,告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈 ...
- 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式
以下信息摘自360官方网站: 浏览模式:极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:极速模式表示极速模式兼容模式表示兼容模式IE9IE10模式表示IE9/IE10模式(仅 ...
- DOCTYPE声明作用?标准模式与兼容模式?
<!DOCTYPE>文档声明是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明,用以告诉其他人这个文档的类型风格:DTD(文档类型定义)是一组机器可读的规则,它们指示(X) ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- Doctype作用,标准模式与兼容模式的区别
<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...
- Android学习笔记四:activity的四种启动模式
Activity有四种启动模式:standard,singleTop,singleTask,singleInstance. 1.standard:标准启动模式 默认模式,这个模式下启动的Activit ...
随机推荐
- NOIWC2019 冬眠记
冬眠 由于THUWC考太差了没啥心情做事…… Day -1 报到日前一天晚上去看了看宿舍表,发现周围全是集训队,隔壁就是栋爷.高队和lca,再隔壁是zzq和wxh……吓傻了(本校buff这么好吗) D ...
- 直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章
直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章_e-works数字化企业网 http://articles.e-works.net.cn/Component/Article ...
- 周记之A Fresh Start(2018/9/2-2018/9/8)
新学期.新开始.新面貌.新姿态.新目标.新动力……希望自己不忘初心,在自己的地图上摸索自己的路,然后一直走下去,永不回头.在此平台立下一个flag:至少每周一记,包括本周内所做所想所感所悟,继而更加坚 ...
- Kail更新源、输入法、浏览器
更新源 kali官方的更新源:图中的kali-rolling是kali目前最新的代号,kali有两个代号(codename):sana和kali-rolling: 查看自己的kali linux源版本 ...
- ACdream 1032 Component
Component Time Limit: 5000ms Memory Limit: 64000KB This problem will be judged on ACdream. Original ...
- hdu_1013_Digital Roots_201310121652
Digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- cogs 1310. [HAOI2006]聪明的猴子
1310. [HAOI2006]聪明的猴子 ★ 输入文件:monkey.in 输出文件:monkey.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 在一个热带 ...
- python 类中的方法
首先,方法是类内部定义的函数,所以方法是类的属性而不是实例的属性. 其次,方法只能在所属的类拥有实例的时候才能被调用.当存在一个实例的时候,我们可以说方法被绑定到实例.如果没有实例,那么我们就说方法是 ...
- linux中shell命令test用法和举例
shell test命令 和 [ 是同一个命令的不同名称. 原文:http://www.cnblogs.com/Jeff-Tang/p/5776947.html ------------------- ...
- LINQ体验(2)——C# 3.0新语言特性和改进(上篇)
整体来说.Visual Studio 2008和.NET 3.5是建立在.NET2.0核心的基础之上,.NET2.0核心本身将不再变化(假设不了解.NET2.0的朋友,请參看MSDN或者一些经典的书籍 ...