HTML中不起眼的DOCTYPE标记真的很重要

前写html或者Jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。

一般都是这样写的

<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

直到最近碰到了一个非常奇葩的bug：

某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏效了。

哪么<!DOCTYPE>是何方神圣，马上开始科谱

来自于w3school的文档解释是这样的

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

下面说人话吧

标签的作用

document.compatMode用来判断当前浏览器采用的渲染方式。

官方解释：

BackCompat：标准兼容模式关闭。

CSS1Compat：标准兼容模式开启。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶梦的开始，浏览器会按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

标签的使用

<!DOCTYPE html>使用也很简单，就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>

jsp的话，添加在<%@ page %>的下一行

不用区分大小写哦。

TML 是一种标记语言，用于创建网页和应用程序。它的基本结构由以下三个部分组成：

文档类型声明（doctype declaration），用来告诉浏览器文档的版本和规范。它以 <!DOCTYPE html> 开头，表示文档遵循 HTML5 标准。
html 标签（html tag），用来包含整个文档的内容。它以 <html> 开始，以 </html> 结束。它还可以包含一个 lang 属性，用来指定文档的主要语言。
head 和 body 标签（head and body tags），用来分别包含文档的元数据（metadata）和可见内容（visible content）。head 标签以 <head> 开始，以 </head> 结束。它可以包含一些不显示在网页上的信息，比如标题、字符集、样式表等。body 标签以 <body> 开始，以 </body> 结束。它可以包含一些显示在网页上的内容，比如文本、图片、视频、表单等。

一个 HTML 的基本结构示例如下：

TML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

实例解析

DOCTYPE 声明了文档类型
位于标签 <html> 与 </html> 描述了文档类型
位于标签 <body> 与 </body> 为可视化网页内容
位于标签 <h1> 与 </h1> 作为一个标题使用
位于标签 <p> 与 </p> 作为一个段落显示

	<!DOCTYPE html> 在HTML5中也是描述了文档类型。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>

<head>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

	只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：html5前端教程：Flexbox 布局的最简单表单
下一篇：CSS单位详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML中不起眼的DOCTYPE标记 真的很重要

下面说人话吧

您的项目需求

HTML中不起眼的DOCTYPE标记真的很重要