关于DOCTYPE元素
写了好久的前端页面了,突然发现我们容易忽略很多东西,比如说我们在写HTML时候,我用的是vscode,直接就会输入一个“!”,再直接摁一个tab,编辑器就自动为我们生成了基本的HTML骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
使用起来非常方便,一直都忽略了最上面的<!DOCTYPE html>(主要说HTML),关于这个w3school给出的定义是“<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。”也就是说<!DOCTYPE html>元素告诉浏览器两件事:
- 告诉浏览器它处理的是HTML文档
- 用来标记文档内容的HTML版本
我们可以不写版本号,因为浏览器可以自动检测出这里所使用的是HTML5,因为这个元素在HTML5之前的版本中有差别。在HTML4.01的版本规定了三种文档类型: - HTMLStrict DTD
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果你使用了不支持层叠样式表(CSS)的浏览器以至于不得不使用 HTML 的呈现特性时,就用这种声明方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
那么DTD是什么呢?
Document Type Definition,中文翻译为:文档类型定义。DTD可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。因为早期的版本基于SGML,所以需要套用SGML的解析规则。DTD的作用在于定义SGML文档的文档类型以便于浏览器解析,HTML5不基于SGML,所以不用指定DTD。
如果我们没有写<!DOCTYPE html>,浏览器将会以他们的怪异模式去渲染页面,于是在不同的浏览器就会显示出不同的样式