HTML5标准学习 - 文档结构

比眉伴天荒 2022-01-09 07:11 217阅读 0赞

说起HTML的结构，很多人都能说得头头是道，一般来说答案可能是这样的：

> 一个DOCTYPE，一个html，里面有head和body元素。

这当然不能说是不正确的，但是如果问到一个最小的HTML源文件必须有哪一些东西的话，恐怕很少有人能正确地做出回答。

先来回答一下这个问题，一个最简的HTML5源码文件需要的内容如下：

<!DOCTYPE html>

是的，就这样，一个字符不多，一个字符不少，除了大小写可任意变化外，其他的任何内容都是不能变动的。

那么究竟是怎么样的规则，导致一个最简的源码文件必须有doctype声明呢？根据标准，一个HTML文档有如下内容组成（严格按照顺序）：

1.  一个BOM标记，且这个BOM标记必须为U+FEFF。
2.  0-n个空格或注释。
3.  DOCTYPE声明。
4.  0-n个空格或注释。
5.  一个HTML元素。
6.  0-n个空格或注释。

这里存在着一些和HTML4的不同，一个HTML4的最简源码文件是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http://www.w3.org/TR/html4/loose.dtd">
    <title>这里是标题</title>

两者的区别是显而易见的：

*  HTML5把DOCTYPE修改为更简单的`<!DOCTYPE html>`，这个已经众所周知了。
 *  在HTML4中多了一个`<title>`标签。

这里的重点就是`<title>`标签了，关于这个标签，在[HTML4.01标准][HTML4.01]中是这么说的：

> Every HTML document must have a TITLE element in the HEAD section.

也即是说，HTML4要求`<title>`标签是必须存在的。

而在[HTML5的标准][HTML5]中，又是这么说的：

> There must be no more than one title element per document.

HTML5中只设定了`<title>`标签数量的上限，却没有指明下限，也就是说，没有`<title>`的文档已经被视为一个合法的文档了。

对于DOCTYPE，HTML4中设定了6种DOCTYPE，HTML5中将DOCTYPE分为3种，这个在以后的章节中再具体说明。

再回过来看一下文档组成，除去0-n个空格或注释这样并没有多大意义的元素之外，组成的列表中还说明有一个HTML元素，但是最简的源码中却没有这东西。这是因为在HTML的规范中，一直存在“隐式标签”这样的概念，关于隐式标签，大致可以这么解释：

> 一部分元素，当满足特定的前提条件时，其开始标签或结束标签可以在源码中省略。在这种情况下，被省略的标签称为“隐式标签”。

需要注意的是，此处的省略指的是*在源码中省略*，而在最终成型的DOM树中，这个标签是存在的，因此才称为*隐式*标签。因此上面最简的源码结构，在生成DOM树后，其真正的结构是这样的：

<!DOCTYPE html>
    <html>
        <head></head>
        <body></body>
    </html>

最后，再总结一下XHTML中的一些规范：

*  因为是XML，所以为了表示这是一个HTML文档，必须有一个命名空间，其值为`http://www.w3.org/1999/xhtml`。
 *  因为是XML，所以MIME type不能是`text/html`了，`text/xml`、`application/xml`、`application/xml+html`都是比较好的选择。
 *  因为是XML，必须有根元素，根元素为`<html>`，即`<html>`的开始和结束标签不能省略了。
 *  因为是XML，所有元素只要有了开始标签，就不能没有结束标签，或者自闭合。
 *  因为是XML，所有元素都得严格遵守大小写，元素名称必须为小写。

因为是XML，文档变得严格了很多，也因为是XML，其可读性和规范性提高了不少。但最终，我们始终要在HTML的宽容性和XML的规范性之间找到最佳的平衡点，一味地追求极端始终是一个错误。

本文永久地址：[http://www.otakustay.com/learning-html5-structure/][http_www.otakustay.com_learning-html5-structure]

转载于:https://www.cnblogs.com/GrayZhang/archive/2011/03/28/learning-html5-structure.html

[HTML4.01]: http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.2
[HTML5]: http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-title-element-0
[http_www.otakustay.com_learning-html5-structure]: http://www.otakustay.com/learning-html5-structure/