Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
一、Doctype作用是什么?
声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 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(一种):
2、HTML 4.01(三种): 严格模式包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);过渡模式包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);框架模式等同于过渡模式,但允许框架集内容。
HTML 4.01 Strict :
HTML 4.01 Transitional :
HTML 4.01 Frameset :
3、XHTML 1.0(四种): 前三种模式同上,XHML 必须以格式正确的 XML 来编写标记。
XHTML 1.0 Strict :
XHTML 1.0 Transitional :
XHTML 1.0 Frameset:
XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型。
二、严格模式与混杂模式的来源
当年Netscape4(网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题,但是依然延续CSS实现中的其它故障(主要是盒模型问题)。
为了保障自己的网站在各个浏览器上显示正确,网页开发者们不得不依据各个浏览器自身的规范来使用css,因此大部分网站的css实现并不符合W3C规范的标准。
然而随着标准一致性越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有的 css,完全去遵循标准,会使许多旧网站或多或少受到破坏,如果浏览器突然以正确的方式解析现存的css,陈旧的网站的显示必然会受到影响。所以,所有的浏览器都需要提供两种模式:混杂模式服务于旧式规则,而严格模式服务于标准规则。
Doctype作用?严格模式与混杂模式如何区分?它们有何意义?相关推荐
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义
前端面试题(3) 打卡: 2021-4-27 HTML Doctype 作用? 严格模式与混杂模式如何区分?它们有何 意义? Doctype作用 (1)位于文档最前面,处于标签之前.告诉浏览器用什么文 ...
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?Doctype文档类型?
Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?Doctype文档类型? 一.Doctype作用? 二.严格模式与混杂模式如何区分? 三.它们有何意义? 四.Doctype文档类型? ...
- 前端面试题 Doctype作用是什么?严格模式与混杂模式如何区分?他们之间有何意义?
Doctype作用是什么?严格模式与混杂模式如何区分?他们之间有何意义? 首先 doctype的作用是为了告诉浏览器该文件的类型,让浏览器解析器知道他们应该用哪个规范来解析文档,严格模式与混杂模式,可 ...
- Doctype作用及严格模式与混杂模式的区分
1.Doctype作用,标准模式与兼容(怪异quirks)模式的区别 <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用 ...
- Doctype作用?严格模式与混杂模式如何区分?它们有何差异?
Doctype作用?严格模式与混杂模式如何区分?它们有何差异? 转载自:吴秋彤的博客 一.Doctype作用是什么? 声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型.让浏览器解析 ...
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
Doctype作用 文件类型定义(DTD),作用是告知浏览器的解析器用什么文档标准解析这个文档. <!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html>标签之 ...
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 以及如何触发这2种模式?
Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 以及如何触发这2种模式? a. 声明位于文档中的最前面,处于标签之前.告知浏览器以何种模式来渲染文档 b. 严格模式的排版和 JS 运 ...
- html标准模式与混杂模式,关于Doctype、严格模式与混杂模式
<现行程项些或创容的近在绑思目都者于手内近;!Doctype> 文档声明,位于文档中的最前面的位置,处于标签之前.此标签告知浏览器文档使用哪种HTML或XHTML朋说事础发开和数目间 ...
- Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
严格模式与混杂模式--如何触发这两种模式,区分它们有何意义. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示. 浏览器根据DOCTYPE是否存在以及使用的 ...
最新文章
- python numpy 数据类型为python对象-python numPy模块 与numpy里的数据类型、数据类型对象dtype...
- 动态添加的面板不生效
- requirejs搭建前端框架
- 路由器qos设置包括哪些内容
- C/C++程序员上手C#应该知道的100件事(21~30)
- vue transition
- OPPO实时数仓揭秘:从顶层设计实现离线与实时的平滑迁移
- ubuntu中解压rar文件遇到乱码的解决方法
- dojo 加载自定义module的路径问题
- Robotium 数据驱动测试框架
- Js双引号和单引号使用注意事项
- 你写的代码扩展性高吗?快试试用Spring注入方式来解耦代码!
- qpython3 读取安卓lastpass Cookies
- 导出数据报ORA-39002: 操作无效 ORA-39070: 无法打开日志文件。 ORA-39087: 目录名 DUMP_DIR 无效...
- 论文校对错别字检测工具
- 敏感词过滤算法Aho-Corasick
- 目前有哪些比较好用的CRM客户关系管理系统?
- python windows开发环境_windows10下搭建Python3.6开发环境
- php 加密网页,PHP_解密七种html网页加密解密法,自己辛苦做出来的内容被别人 - phpStudy...
- pngimg 可以商用吗_避免侵权!这10个免费可商用的图片网站,请一定收好
热门文章
- 货币政策对于股市涨跌影响
- python弹球游戏移动球拍_python编写弹球游戏的实现代码
- 【计算机考研择校】杭州电子科技大学2022考情分析
- python棒棒糖代码_(python matplotlib)如何更改棒棒糖图中每个棒棒糖的颜色(斧杆)...
- 美国的SaaS长啥样?
- 一张图了解字符流和字节流的区别
- kafka学习(六):kafka应用场景
- 用java实现简单的图像处理基础篇之像素点数据的移位计算
- 海通PEHUB技术支持
- C++在线一本通1006~1023题答案(其中1011暂时缺少)