知名浏览器对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日

相关文章

  • 不用数据库的多用户文件自由上传投票系统(1)

    下面是详细讲解“不用数据库的多用户文件自由上传投票系统(1)”的完整攻略。 系统简介 本系统是一个基于Flask框架开发的多用户投票系统,完全不依赖于数据库,所有数据都以文件的形式存储在本地。用户可以自由上传图片或视频、创建投票项目,其它用户可以对项目进行投票和评论。 系统架构 系统主要分为三个部分: 用户管理模块 文件上传模块 投票模块 技术栈 Pytho…

    css 2023年6月10日
    00
  • 纯CSS实现鼠标放上去改变文字内容

    下面是详细讲解纯CSS实现鼠标放上去改变文字内容的完整攻略: 一、应用场景 在网页开发中,我们常常需要在鼠标放上去时改变某些文字的内容,例如鼠标放到按钮上显示“点击”字样等等。 二、实现方法 实现这个功能,我们可以使用CSS中的:hover选择器。这个选择器可以让我们在鼠标放到某个元素上时改变它的样式。 示例一:使用:before或:after伪类 下面是纯…

    css 2023年6月10日
    00
  • 深入剖析CSS变形transform(3d)

    深入剖析CSS变形transform(3d) 什么是Transform Transform 是 CSS3 中非常强大的一个属性。它可以让我们对元素进行各种变形操作,例如平移、旋转、缩放、扭曲等等,同时它也支持 3D 移动和变形。 Transform 的使用 Transform 属性包括很多个子属性,常用的有 translate、rotate、scale、sk…

    css 2023年6月10日
    00
  • JavaScript实现手写循环滑动效果

    下面是一份JavaScript实现手写循环滑动效果的完整攻略: 1. 确定需求和目标 在开始编写代码之前,我们需要首先明确需求和目标。对于这个循环滑动效果,需求和目标如下: 实现一个轮播图,图片从左往右进行循环滑动; 点击向左/向右的箭头按钮,可以实现图片的向左/向右滑动; 当鼠标悬浮在图片上时,停止自动轮播,鼠标移开后恢复自动轮播。 2. 实现自动轮播效果…

    css 2023年6月11日
    00
  • JavaScript实现简单的轮播图效果

    下面是详细讲解“JavaScript实现简单的轮播图效果”的完整攻略。 准备工作 在编写轮播图之前,你需要准备以下工作: HTML 结构:需要一个 HTML 结构,用于展示轮播图,一般是 <ul> 元素下有若干个 <li> 元素,每个 <li> 元素中包含一个轮播图的内容,例如图片或文字。 CSS 样式:需要给 HTML …

    css 2023年6月11日
    00
  • jquery模拟实现鼠标指针停止运动事件

    实现鼠标指针停止运动事件可以通过以下步骤实现: 获取鼠标位置并设置定时器 我们可以利用mousemove事件,获取鼠标位置,并将其保存在一个变量中。然后,设置一个定时器,每隔一段时间检查鼠标位置是否发生变化。 let lastMouseX, lastMouseY; $(document).on(‘mousemove’, function(e) { lastM…

    css 2023年6月9日
    00
  • 纯CSS+Div 的标签实现代码

    下面是纯CSS+Div 的标签实现代码攻略。 什么是纯CSS+Div 的标签实现代码 纯CSS+Div 的标签实现代码是一种使用CSS和Div元素来实现各种标签效果的方法。通过CSS的样式设置和Div元素的排版组合,可以实现各种复杂的标签样式,而无需使用传统的HTML标记。 如何实现纯CSS+Div 的标签效果 首先,需要使用CSS样式来设置各种标签的样式属…

    css 2023年6月10日
    00
  • jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

    要实现随滚动条增减的汽水瓶中的液体效果,可以采用 jQuery 和 CSS 进行实现。以下是具体的实现步骤: HTML 结构设计: 在 HTML 中,需要创建一个容器 div,其中包含一个上部的盖子,一个中间的汽水瓶及其液体,以及一个下部的底座。具体代码如下: <div class="container"> <div c…

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