html和xhtml,DOCTYPE和DTD,标准模式和兼容模式

时间: 2018-03-30阅读: 975标签: 模式

主要涉及知识点:

  • 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有关了。

  • 标准模式:

  1. XHTML文档包含完整的DOCTYPE声明时,一般以标准模式呈现;
  2. 文档包含严格DTD类型的DOCTYPE声明时,以标准模式呈现;
  3. 文档包含过渡DTD类型的DOCTYPE声明且声明包含URI时,以标准模式呈现。

  • 兼容模式:

  1. 文档不包含DOCTYPE声明或DOCTYPE声明不正确时,以兼容模式呈现;
  2. 文档包含过渡或框架DTD类型的DOCTYPE声明但声明不包含URI时,以兼容模式呈现;
  3. 在IE中,如果DOCTYPE声明在XML之后,以兼容模式呈现。


标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别

最后总结一下,在标准模式和兼容模式下,页面的呈现主要有哪些区别:

  • 关于盒模型:

    在标准模式下,元素width是内容宽度,即:元素实际width = 元素width + 元素padding + 元素margin + 元素border;
    在兼容模式下,元素width是元素的实际宽度,即:元素width = 元素内容width + 元素padding + 元素margin + 元素border。

    盒模型:主要针对块级元素,把每个块级元素都想象成一个盒子,每个盒子有外边距(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会失效。


来源:https://www.cnblogs.com/yanqiu/archive/2018/03/30/8672225.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/572

我最喜欢的 JavaScript 设计模式

我觉得聊一下我爱用的 JavaScript 设计模式应该很有意思。我是一步一步才定下来的,经过一段时间从各种来源吸收和适应直到达到一个能提供我所需的灵活性的模式。让我给你看看概览,然后再来看它是怎么形成的

前后端分离模式有什么意义

前后端分离从端口划分就是将浏览器、客户端分为前端,提供真实服务的软件就成为后端。从开发语言的角度划分后端的编程语言和前端的编程语言,例如Java是做后端真实数据服务的,JavaScript、HTML是做前端业务数据的展现与用户行为操作的

Js设计模式——代理模式

代理模式属于设计模式中结构型的设计模式; 顾名思义就是为一个对象提供一个代用品或占位符,以便控制对它的访问!并且在未来如果不需要预加载,只要改成请求本体代替请求代理对象就行。

前端常见的设计模式

今天主要介绍一下我们平常会经常用到的设计模式,设计模式总的来说有23种,而设计模式在前端中又该怎么运用呢,接下来主要对比较前端中常见的设计模式做一个介绍,一般来说,设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用

PHP中的三大经典模式

单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。

前端JavaScript设计模式

面向对象的三大特性:继承、封装、多态。JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。

前端四种设计模式_JS常见的4种模式

JavaScript中常见的四种设计模式:工厂模式、单例模式、沙箱模式、发布者订阅模式

Typescript 严格模式到底严在哪里?

当 Typescript 严格模式设置为 on 时,它将使用 strict 族下的严格类型规则对项目中的所有文件进行代码验证。规则是:此规则不允许变量或函数参数具有隐式 any 类型。请看以下示例:

几种常见的js设计模式

所谓单例模式即为:保证一个类仅有一个实例,并提供一个访问它的全局访问点。所谓代理模式就是:我们不方便直接访问某个对象时,可以为对象创建一个占位符(代理),以便控制对它的访问,我们实际上访问的是代理对象。

TypeScript 设计模式之单例模式

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的 window 对象等。单例模式用于保证一个类仅有一个实例,并提供一个访问它的全局访问点。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广