文档章节

Doctype作用?严格模式与混杂模式如何区分?它们有何差异?

爱敲代码的程序员
 爱敲代码的程序员
发布于 2017/09/09 13:44
字数 1446
阅读 455
收藏 3

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

一、Doctype作用是什么?

<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。

二、严格模式与混杂模式如何区分?它们有何意义?

严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。(严格 DTD ——严格模式) 
2、包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式) 
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)
4、HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5 没有严格和混杂之分)

意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

三、严格模式与混杂模式的语句解析不同点有哪些?

1)盒模型的高宽包含内边距padding和边框border

 

    在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了padding和border。

2)可以设置行内元素的高宽

    在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

3)可设置百分比的高度

    在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

4)用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:

   body{text-align:center};#content{text-align:left}

5)quirk模式下设置图片的padding会失效

6)quirk模式下Table中的字体属性不能继承上层的设置

7)quirk模式下white-space:pre会失效


补充内容:

一、常用的具体声明:

1、HTML5(一种):<!DOCTYPE html>

2、HTML 4.01(三种):严格模式包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);过渡模式包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);框架模式等同于过渡模式,但允许框架集内容。 
 

HTML 4.01 Strict :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">



3、XHTML 1.0(四种):前三种模式同上,XHML 必须以格式正确的 XML 来编写标记。 
 

XHTML 1.0 Strict :<!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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


二、严格模式与混杂模式的来源

当年Netscape4(网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题,但是依然延续CSS实现中的其它故障(主要是盒模型问题)。

为了保障自己的网站在各个浏览器上显示正确,网页开发者们不得不依据各个浏览器自身的规范来使用css,因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有的 css,完全去遵循标准,会使许多旧网站或多或少受到破坏,如果浏览器突然以正确的方式解析现存的css,陈旧的网站的显示必然会受到影响。所以,所有的浏览器都需要提供两种模式:混杂模式服务于旧式规则,而严格模式服务于标准规则。

爱敲代码的程序员
粉丝 75
博文 42
码字总数 82530
作品 0
海淀
程序员
私信 提问
加载中
请先登录后再评论。
Doctype的作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义?

Doctype作用?严格模式与混合模式,如何触发者这两种模式,区分它们有何意义? 1.1 Doctype作用 <!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器...

osc_b1y21l0d
2019/02/22
2
0
Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? | WEB前端开发

声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。详...

zreoCode
2016/07/22
69
0
HTML面试题整理

1.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏...

YJ_
2018/02/07
3
0
HTML/CSS 笔试题

1,让一个input的背景颜色变成红色 <form> <input type='text' style='background:red'/></form> 2,div的高宽等于浏览器可见区域的高宽,浏览器滚动,div始终覆盖浏览器的整个可见区域 <htm......

火燐
2014/11/11
33
0
前端开发面试题总结之——HTML

本文转载于:猿2048网站➥前端开发面试题总结之——HTML 相关知识点 题目&答案 Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 请描述一个网页从开始请求道最终显示的完整过程? HT...

前端老手
2019/09/13
65
0

没有更多内容

加载失败,请刷新页面

加载更多

微信小程序|navigator组件-实现页面跳转

欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 问题描述 现在大家所用的各种微信小程序都是看似结构简单、内容精炼...

算法与编程之美
03/31
6
0
【leetcode刷题】20T26-最后一个单词的长度

木又同学2020年第26篇解题报告 leetcode第58题:最后一个单词的长度 https://leetcode-cn.com/problems/length-of-last-word/ 【题目】 给定一个仅包含大小写字母和空格 ' ' 的字符串 s,返回...

唐建权
03/01
8
0
我的电脑不联网,很安全。黑客:你还有风扇呢!

点击蓝色“ Python空间 ”关注我丫 加个“星标”,每天一起快乐的学习 转自机器之心 从 1988 年第一个网络蠕虫病毒诞生以来,「互联网危机四伏」的观念就已经深入人心。如果只是这样,不给电...

Rocky0429
05/10
0
0
[codeforces 1372D] Omkar and Circle 圆上区间动归

Codeforces Round #655 (Div. 2) 参与排名人数15842 天天熬夜打比赛,身体吃不消,作了一个充满幸福感的决定,赛后第二天再刷 [codeforces 1372D] Omkar and Circle 圆上区间动归 总目录详见htt...

osc_9mt0ncuk
13分钟前
10
0
不断进化的分支和需求管理

昨天有朋友在公众号私信问我几个关于代码分支管理的问题,这几个问题是我去年写的《在团队中使用GitLab中的Merge Request工作模式》一文结尾时抛出的几个问题: 如果系统上线后有紧急Bug需要...

冯威
2019/06/07
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部