千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  应聘面试  >  html5面试题  > Doctype的作用?严格模式和混杂模式的区分,以及如何触发这2种模式?

Doctype的作用?严格模式和混杂模式的区分,以及如何触发这2种模式?

来源:千锋教育
发布人:syq
时间: 2022-07-14 15:08:21 1657782501

  Doctype的作用

  1.声明叫做文档类型DTD,它的作用就是用来标识浏览器使用哪种文档类型,让浏览器知道以何种方式解析文档。

  2.必须位于HTML文档的第一行,处于标签之前,但是不属于HTML文档标签。

  3.声明文档的解析类型(document.compatMode),是为了避免浏览器的怪异模式。

Doctype的作用

  严格模式和混杂模式的区别,以及如何触发两种模式

  1.严格模式:浏览器按照W3C的标准解析代码,又称为标准模式。

  2.混杂模式:浏览器按照自己的方式来解析代码,以一种向后兼容的方式呈现。

  3.Doctype可声明的三种DTD类型:严格版本,过渡版本,基于框架的HTML版本。

  区别:浏览器使用严格模式和混杂模式,与文档中的DTD直接相关

  (1)如果用文档中包含严格的DOCTYPE,则以严格模式呈现(严格DTD--严格模式)

  (2)包含过渡DTD和URL的DOCTYPE,以严格模式呈现;包含过渡的DTD而没有URL,以混杂模式呈现;(过渡DTD+URL--严格,过渡DTD(无URL)-- 混杂模式))

  (3)HTML5中没有DTD,没有严格和混杂模式的区分,HTML5中有相对宽松的语法,尽可能实现向后兼容

  (4)DOCTYPE不存在或者格式不正确,以混杂模式呈现(DTD不存在或格式不正确--混杂模式)

  严格模式和混杂模式解析语句的不同点

  (1)可以设置行内元素的宽高,在严格模式下给内联元素设置宽高都不起作用,在混杂模式下生效

  (2)可设置百分比高度在严格模式下,如果没有给父元素设置高度,而子元素的高度以百分比呈现,这时是不生效的

  (3)盒模型的宽高包含padding和border在W3C的标准下,给一个元素设置宽高,则呈现的是内容的宽高。在IE5.5以下及其他浏览器的混杂模式下,盒子的宽度还包括padding和border。

  (4)使用margin:0 auto在IE下会失效使用margin:0 auto在严格模式下会水平居中,而在混杂模式下会失效,但可以设置text-align:center来水平居中。

  (5)混杂模式下的图片padding会失效,Table中的字体属性将无法继承父元素的设置,white-space:pre会失效。

  (1)如果用文档中包含严格的DOCTYPE,则以严格模式呈现(严格DTD--严格模式)

  (2)包含过渡DTD和URL的DOCTYPE,以严格模式呈现;包含过渡的DTD而没有URL,以混杂模式呈现;(过渡DTD+URL--严格,过渡DTD(无URL)-- 混杂模式))

  (3)HTML5中没有DTD,没有严格和混杂模式的区分,HTML5中有相对宽松的语法,尽可能实现向后兼容

  (4)DOCTYPE不存在或者格式不正确,以混杂模式呈现(DTD不存在或格式不正确--混杂模式)

  更多关于“前端培训”的问题,欢迎咨询千锋教育在线名师。千锋教育多年办学,课程大纲紧跟企业需求,更科学更严谨,每年培养泛IT人才近2万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT