HTML的标准模式与怪异模式
HTML 的结构
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body></body>
</html>
上面就是一个完整的html结构,但我们会发现,用vscode自动生成HTML结构的时候,开头总是加上一个<!DDOCTYPE html>
标签呢?
首先我们要知道,浏览器分为两种渲染模式,一种是标准模式,一种是怪异模式,使用工具开发html的时候自动生成的都是标准模式。这两种模式就是是通过doctype的定义来区分。 如果html中省略了doctype,浏览器会进入到Quirks模式的怪异状态也称之为兼容模式,在这种模式下有些样式,布局会和标准模式存在差异
doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行,位于html标签之前。HTML5不基于SGML,所以不需要引用DTD。
doctype 最早是xml的概念,在xml中它的定义是通过一种特定的语法,作为一种元数据,来描述xmHTMLl文档中允许出现的元素,以及各元素的组成,规则等
在HTML4中 DOCTYPE有三种模式
严格模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
过渡模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。
框架模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">。
因为浏览器有容错能力,实际上运用这三种模式并不十分严格,浏览器都能正确解析出用户想要的结果,所以在html5中doctype就简化成了<!DOCTYPE html>
。但是为了向后兼容性,可扩展性等事情,html5还定义了其他几种组合:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!doctype HTML system "about:legacy-compat">( 兼容久远时代的历史遗产而准备的DOCTYPE,about:legacy-compat,注意这段文本是大小写敏感的)
标准模式与怪异模式
标准模式中,网页元素的宽度是由padding、border、width三者的宽度相加决定的;
标准盒模型下盒子的大小 = content + border + padding + margin
在怪异模式中,width本身就包括了padding和border的宽度。
怪异盒模型下盒子的大小=width(content + border + padding) + margin
此外,标准模式下块级元素的经典居中方法:设定width,margin:0px auto; 在怪异模式下无法正常工作