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

浏览器在解析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日

相关文章

  • js+CSS实现弹出居中背景半透明div层的方法

    实现弹出居中背景半透明div层的方法基本思路是利用CSS实现半透明背景层,利用JavaScript控制弹框层的显示和隐藏并使其在页面居中。 1. 编写HTML结构 首先,在HTML中添加弹框层的结构,例如: <div id="mask"></div> <div id="dialog"&gt…

    css 2023年6月9日
    00
  • WebView的介绍与简单实现Android和H5互调的方法

    介绍: WebView是Andorid中提供的一种视图控件,它可以在应用中嵌入一个浏览器控件,并且可以开发者可以通过它来嵌套H5页面或者加载本地html文件,整合了nativ和webview,并且可以通过简单的代码实现两者之间的通信交互。在移动端中,WebView所扮演的作用非常重要,可以作为应用的嵌套控件,也可以用来作为轻量级的信息展示器。下面我们针对该控…

    css 2023年6月10日
    00
  • 使用HTML5捕捉音频与视频信息概述及实例

    下面就是使用HTML5捕捉音频与视频信息的完整攻略: 概述 在HTML5中,我们可以使用<audio>和<video>标签来嵌入音频和视频文件到网页中,同时也可以使用JavaScript通过这些标签来获取和修改音频和视频的相关信息。在本攻略中,我们主要介绍如何使用HTML5来捕捉音频和视频的信息,包括如何获取音频和视频的持续时间、当前…

    css 2023年6月11日
    00
  • python3解析库BeautifulSoup4的安装配置与基本用法

    Python3解析库BeautifulSoup4的安装配置与基本用法 什么是BeautifulSoup4 BeautifulSoup4 是一个 HTML 或 XML 的解析库,可以将复杂的 HTML 或 XML 文档转换成一个树形结构,提供简单的、Python 风格的 API 来遍历文档。它可以解析 HTML 和 XML 标记文档,支持 HTML5 标准,同…

    css 2023年6月10日
    00
  • 使用preload预加载页面资源时注意事项

    使用preload预加载页面资源是一种优化网站性能的常用手段,但在使用的时候还需要注意一些事项,避免出现不必要的错误或性能问题。 1. preload的基本使用方法 preload可以预加载各种资源,包括图片、音频、视频、字体、脚本、样式表等。其基本语法如下: <link rel="preload" href="url&q…

    css 2023年6月10日
    00
  • css line-height属性的使用技巧

    当我们在设计网页时,使用CSS来控制文本显示是非常重要的。其中,line-height属性可以帮助我们控制文本的行间距,进而影响到整个网页的排版效果。在这里,我将详细讲解“CSS line-height属性的使用技巧”这个话题。 line-height的基本用法 line-height属性用于指定行高。它可以使用像素值、百分比值、em值等多个单位进行设置。在…

    css 2023年6月10日
    00
  • Vue实现无限级树形选择器

    下面是Vue实现无限级树形选择器的完整攻略: 1. 需求分析 首先,我们需要确定本次开发的需求。本次开发要实现一个无限级别的树形选择器,包含以下要求: 根据给定的数据结构渲染树形结构; 支持无限极展开和收起; 支持多选和单选; 支持选择器搜索; 2. 技术选型 基于此,我们可以选择使用Vue.js框架进行开发,并结合Vue组件,Element-ui库来完成组…

    css 2023年6月9日
    00
  • 可以随进度显示不同颜色的css3进度条分享

    当我们需要在网站或应用程序中显示进度条时,CSS3提供了许多选项。本攻略将详细讲解如何实现一个可以随着进度变化显示不同颜色的CSS3进度条。 实现方法 第一步:HTML结构 首先,我们需要设置HTML结构。在body标签内部,创建一个div元素,并设置class属性为“progress”。在这个div元素内部,我们需要再创建另一个div元素,并设置class…

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