HTML:文档声明<!DOCTYPE>、严格模式、怪异模式

1、什么是<!DOCTYPE>

<!DOCTYPE html>

<!DOCTYPE>是一个文档声明,它不是HTML标签,而是一条信息,告知浏览器期望的文档类型,帮助浏览器确定其尝试解析和显示的HTML文档类型。必须在HTML文档的第一行、且顶格显示,对大小写不敏感。任何放在DOCTYPE前面的东西,比如批注或者XML声明都会使IE9或更早期的浏览器触发怪异模式。

HTML经历了很多版本,不同版本支持的HTML标签不同 ,文档声明也不相同,如:

<!DOCTYPE html> 是HTML5的的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"
> 是HTML4的文档声明

HTML5不需要引入DTD文件,而其他版本的则需要引入DTD。早期版本中之所以要引用DTD是因为其基于SGML,而DTD规定的是标记语言的规则,这样浏览器才能正确呈现内容,但最新的HTML5不基于SGML,所以不需要引用DTD。SGML与HTML是一家,只是它是很早的版本

现在通常说的H5开发实际上是HTML5+CSS3+ES6

2、渲染模式

浏览器渲染模式分为3种:

  • 怪异模式(混杂模式 Quirks)
  • 严格模式(标准模式 Standards)
  • 几乎标准模式

 之所以出现不同的渲染模式,主要是由历史原因造成的。在w3c标准出来之前,浏览器对页面的渲染没有统一的规范,不同公司的浏览器的规范不同,所以程序员开发网页要做很多兼容。w3c出来后,为了保证浏览器页面的兼容性,浏览器都保留了旧的渲染方法,于是就出现了混杂模式和标准模式,两种渲染方法共存于一个浏览器中,混杂模式服务于旧的规则,标准模式服务于w3c标准规则

严格模式和怪异模式的区别(以下说的是怪异模式里的行为,标准模式是不允许的):

  1. 盒模型的宽高包含内边距padding和边框border
    在w3c标准中,如果设置一个元素的宽高,指的是元素内容的宽高,不包含padding和border
  2. 可以设置行内元素的高度
    而在标准模式下给 span等行内元素设置width和height都不会生效,而在怪异模式下会生效
  3. 可以设置百分比的高度
    而在标准模式下,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
  4. 用margin: 0 auto 设置水平居中在IE下会失效
    在标准模式下,使用margin: 0 会使元素水平居中
  5. 怪异模式下设置图片的padding会失效
  6. 怪异模式下table的字体属性不能继承上层的设置
  7. 怪异模式下white-space:pre 会失效

如何区分?

浏览器解析时用严格模式还是怪异模式,与网页中的DTD有关,而HTML5没有DTD,因此也就没有严格模式和怪异模式的区别,HTML5有相对宽松的语法,已经尽可能的实现了向后兼容。

posted on 2023-01-16 13:29  会喷火的大魔王  阅读(343)  评论(0编辑  收藏  举报