文档章节

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

爱敲代码的程序员
 爱敲代码的程序员
发布于 2017/09/09 13:44
字数 1446
阅读 127
收藏 3
点赞 1
评论 0

一、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,陈旧的网站的显示必然会受到影响。所以,所有的浏览器都需要提供两种模式:混杂模式服务于旧式规则,而严格模式服务于标准规则。

© 著作权归作者所有

共有 人打赏支持
爱敲代码的程序员
粉丝 74
博文 42
码字总数 82530
作品 0
海淀
程序员
Web前端开发工程师 必备知识点

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2. DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 3. 事件——怎样使用事件以及IE和DOM事件模型之间存在...

北方攻城师
2014/06/23
0
0
JavaScript学习笔记1:JavaScript学前介绍与基本概念

主要根据图书《JavaScript高级程序设计(第3版)》 1、JavaScript是一种专门与网页交互而设计的脚本语言,由下列三个不同的部分组成: 1)ECMAScript,由ECMA-262定义,提供核心语言功能; ...

sosly
2016/03/03
19
0
我们为什么要看《超实用的HTML代码段》

不知道自己HTML水平如何,不知道HTML5如何进化?看这张图 如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点。 都会一点,但不知道如何检验自己,...

woiwoi
2016/02/18
135
0
[转] 最全前端开发面试问题及答案整理

原文地址:https://github.com/hawx1993/Front-end-Interview-questions 作者:@markYun 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...

OSC编辑部
2015/07/21
18.2K
4
为什么使用

不管是刚接触前端,还是你已经“精通”web前端开发的内容,你应该知道在你写html的时候需要定义文档类型;你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异...

李长春
2011/11/14
0
0
精通CSS高级Web标准解决方案【读书笔记】

第一章 基础知识 XHTML,指的是Extendsible Hypertext Marker Language , 当使用(X)HTML这个术语时指的是XHTML和HTML; 1.1 设计代码的结构 1.1.1 使用有意义的标记 1 ID和类名 2 div和Spa...

LuXing
2014/01/23
101
0
初级Web前端工程师面试(HTML+CSS+JavaScript)

1.对WEB标准以及W3C的理解与认识?   标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

Jack088
2016/04/19
156
1
Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗
2017/03/04
0
0
前端开发面试题--html

Doctype作用?严格模式与混杂模式如何区分?它们有何意义? doctype是告诉浏览器我的html使用哪个版本的html协议写的,让浏览器按照神明的协议执行。 区别:严格模式是浏览器根据规范去显示页...

邪气小生
2016/04/07
244
2
doctype声明、浏览器的标准、怪异等模式

触发标准模式 1、加DOCTYPE声明,比如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.......

疯狂的艺术家
2012/03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

PostgresSQL 查看当前schema下所有的函数/存储过程

selectroutine_name from information_schema.routineswhere routine_catalog = 'YourDBName'and routine_schema = 'YourSchemaName'order by routine_name;...

Leyxiao
4分钟前
0
0
去除bootstrapValidator 的校验结果

$("#form").data('bootstrapValidator').destroy();//会报没有这个方法,很奇怪 $('#form').data('bootstrapValidator',null); $('#form').bootstrapValidator();...

暗中观察
5分钟前
0
0
java环境安装

1、首先下载jdk安装包,一般去官网,官网需要登录才可以下载。 2、下载完成双击运行,想改路径改下路径,比较简单。安装jdk安装完,会弹出个窗口,提示开始安装jre的位置,我这里窗口比较奇葩...

朝如青丝暮成雪
7分钟前
0
0
Linux Command

Copy with progress rsync -r --progress source dest

Lyle_W
8分钟前
0
0
个灯数据营销,帮你找回被浪费的广告费

近日,个灯受邀出席被喻为广告营销业界的年度盛会——第八届梅花网传播业大展北京站的活动。 在展会上,个灯总经理严雯婷女士带来了《数据增能,营销智能》的主题演讲,以理论与实践相结合的...

个推
10分钟前
0
0
java的反射机制理解

一、概念说明 java的反射机制,是在运行状态下,可以动态获取任意一个类的属性和方法;可以动态调用一个对象任意方法; 二、反射相关类 java.lang.Class; //类 java.lang.re...

盼望明天
14分钟前
0
0
nginx反向代理-多端口映射

代码解释 1.1 http:www.baidu.test.com默认是80,访问“/”利用反向代理,然后访问本地8083; 1.2 8083代表本地的前端工程访问地址,前端需要访问后台数据,”/”,继续代理到后台地址9803; ...

lilugirl
15分钟前
0
0
Jfinal使用log4j2打印日志

1,添加maven配置 <properties><log4j2.version>2.11.0</log4j2.version><slf4j.version>1.7.25</slf4j.version></properties> <!--slf4j及log4j2日志 --><dependency> ......

iborder
16分钟前
0
0
如何在Rancher 2.0上快速部署Datadog

Datadog是一种流行的托管监控解决方案,用于聚合和分析分布式系统的指标和事件。从基础架构集成到协作仪表板,Datadog为用户提供了一个简洁的单一窗格视图,用户可以快速查看对其最重要的信息...

RancherLabs
19分钟前
0
0
Java示例演示Functor 和monad

This article was initially an appendix in our Reactive Programming with RxJavabook. However introduction to monads, albeit very much related to reactive programming, didn't suit......

Quan全
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部