知名浏览器对DOCTYPE模式的选择机制

yizhihongxing

浏览器在解析HTML文档时,需要知道文档采用的是哪种HTML版本,这个版本信息就包含在文档类型声明(DOCTYPE)中。不同的DOCTYPE可以让浏览器采用不同的渲染模式,使得页面呈现出不同的效果。下面我们来介绍一下知名浏览器对DOCTYPE的选择机制。

一、DOCTYPE的类型及其作用

HTML4.01规范中定义了三种DOCTYPE类型:

  1. HTML 4.01 Strict

```

```
这个DTD(文档类型定义)包括所有HTML 4.01元素和属性,但不包括在HTML中已经废弃的元素和属性。使用这个DTD的文档不允许使用任何表现层的标记和属性。

  1. HTML 4.01 Transitional

```

```
这个DTD包括所有HTML 4.01元素和属性,以及在HTML5中已经废弃的元素和属性。使用这个DTD的文档可以包含HTML4.01废弃的标记和属性。

  1. HTML 4.01 Frameset

```

```
这个DTD包含所有的HTML 4.01元素和属性,以及frameset元素。使用这个DTD的文档可以包含frameset元素。

另外,HTML5规范中引入了一种新的DOCTYPE:

<!DOCTYPE html>

这个DOCTYPE没有任何DTD,它表示使用HTML5的规范解析文档。

二、浏览器对DOCTYPE的选择机制

在解析HTML文档时,浏览器会在文档的头部查找DOCTYPE声明。如果不存在DOCTYPE声明,浏览器会按照怪异模式(Quirks mode)解析文档,这种模式不按照任何标准进行解析,但会使得浏览器兼容更老的网页。

如果存在DOCTYPE声明,浏览器会选择一个渲染模式进行解释,常见的有三种:

  1. 怪异模式(Quirks Mode)

如果DOCTYPE声明不存在,或者声明不规范,浏览器将会在怪异模式下进行解析。怪异模式不会遵循任何标准,而是采用一种向后兼容的解析方式。例如,网页中通常不需要输入!DOCTYPE声明,但这种情况下浏览器仍然会采用怪异模式进行解析。

```



Test Page

Hello World!


```

  1. 标准模式(Strict Mode)

如果DOCTYPE声明符合规范,浏览器将会采用标准模式。标准模式严格遵循HTML规范,不允许使用废弃的元素和属性。

```




Test Page

Hello World!


```

  1. 准标准模式(Almost Strict Mode)

如果DOCTYPE声明虽然符合规范,但不是HTML5的文档类型声明,浏览器将采用准标准模式。在准标准模式下,浏览器支持一些新特性,但仍不允许使用废弃的元素和属性。

```




Test Page

Hello World!


```

三、示例说明

  1. 采用怪异模式解析的示例:

```



Test Page

Hello World!


```

在这个例子中,因为没有DOCTYPE声明,浏览器将会按照怪异模式解析文档。

  1. 采用标准模式解析的示例:

```




Test Page

Hello World!


```

在这个例子中,DOCTYPE声明符合标准,浏览器将会按照标准模式解析文档。

以上就是知名浏览器对DOCTYPE模式的选择机制的攻略,希望能对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:知名浏览器对DOCTYPE模式的选择机制 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • Javascript 圆角div的实现代码

    一、实现圆角div的方式 实现圆角div有很多不同的方式,其中比较常用的方式有两种:使用 CSS3 border-radius 属性和使用 JavaScript 绘制。 使用 CSS3 border-radius 属性实现圆角div CSS3 的 border-radius 属性用于设置元素的圆角半径。通过设置不同的数值,可以实现各种形状的圆角,包括左上角、…

    css 2023年6月10日
    00
  • javascript改变position值实现菜单滚动至顶部后固定

    让我来为您详细讲解“JavaScript改变position值实现菜单滚动至顶部后固定”的完整攻略。 什么是position属性? 首先,我们需要了解什么是position属性,它是CSS中非常常用的一个属性,用来指定一个元素在文档中的定位方式。 常用的定位方式有以下四种: static:表示元素的位置遵循普通的文档流。 relative:表示元素的位置相对…

    css 2023年6月10日
    00
  • css reset样式重置介绍 重置css样式工具分享

    CSS Reset样式重置介绍 在编写前端界面时,由于浏览器的差异化,每个浏览器会对相同的HTML元素样式进行不同的默认渲染。这就会影响到页面的布局和美观程度。为了解决这个问题,CSS重置样式表应运而生,其目的是清除浏览器的默认样式,使不同浏览器渲染出相同的效果。 1. CSS Reset样式重置的原理 CSS Reset样式重置的原理是使用通配符( * )…

    css 2023年6月10日
    00
  • css之clearfix的用法深入理解(必看篇)

    CSS之clearfix的用法深入理解 简介 clearfix 是一种使用 CSS 技术清除浮动的方法。清除浮动后,可以让父元素包含子元素的浮动高度。 原理 产生浮动的元素会脱离文档的流,不再占据文档空间。 父元素如果没有设置高度,则高度为0。子元素设置浮动后,父元素的高度并不会随着子元素高度的改变而改变,即父元素不会自动包含子元素的高度。 clearfix…

    css 2023年6月10日
    00
  • css自定义占位文本(placeholder)的样式的方法示例

    CSS自定义占位文本(placeholder)的样式的方法示例 占位文本(placeholder)是指在表单元素中未输入内容时显示的提示文本。在CSS中,可以使用::placeholder伪类来设置占位文本的样式。本攻略将详细讲解CSS自定义占位文本的样式的方法,并提供两个示例说明。 1. CSS自定义占位文本的样式 在CSS中,可以使用::placehol…

    css 2023年5月18日
    00
  • 使用Visual Studio进行文件差异比较的问题小结

    使用Visual Studio进行文件差异比较的问题小结 1.为什么使用Visual Studio进行文件差异比较? Visual Studio可以快速的比较两个文件的差异,并且提供直观的修改视图,可以方便的定位并修改文件中的问题。将Visual Studio作为默认的差异比较工具,可以方便的进行文件比对,特别是对于代码文件进行比对和合并操作,可以提高代码的…

    css 2023年6月10日
    00
  • JS实现页面侧边栏效果探究

    JS实现页面侧边栏效果探究 实现页面侧边栏可以提高网站的交互性和美观性,本文将介绍如何用JavaScript实现。本攻略分为以下步骤: HTML结构设计 CSS样式处理 JavaScript编码实现 HTML结构设计 首先,我们需要在HTML文档中创建一个容器元素。侧边栏通常位于主要内容区域的一侧,可以选择放在页面的左侧或右侧。在这里,我们将把侧边栏放在页面…

    css 2023年6月11日
    00
  • ASP实现多行注释的方法(dw)

    ASP是一种使用 VBScript 和 JScript 等脚本语言来编写动态网页的服务器端技术,常用于构建动态网站。在ASP中,实现多行注释的方法有以下两种: 方法1:使用服务器端脚本语言的多行注释 ASP支持使用服务器端脚本语言的多行注释,其中不同的脚本语言采用不同的注释方式。下面是VBScript和JScript的注释方法示例。 VBScript的注释方…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部