IT兄弟连 HTML5教程 HTML文件的主体结构
- 2019 年 10 月 11 日
- 筆記
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITXDL123/article/details/101437097
每个页面都是一个独立的HTML文档，每个HTML文档的主体结构又都是相同的，而且在一个文档中这样的主体结构只能声明一次。可以简单的将HTML文档主体结构分为两部分，一部分是定义文档类型，HTML5中声明文档类型可比以前的版本简单多了，只需要15个字符就可以搞定。另一部分则是定义文档主体的结构框架标签，因为标签并不是任意排放的，需要有一定的嵌套规则。就像一颗树是从树根到树干、树枝、树叶这样的结构生长，而不能在树叶上长出树根来，HTML文档的结构也是如此，整个文档是一个整体，最外层标签只有一个，第二层标签有两个，是这样固定的结构，第三层以后可以任意嵌套，就像一颗倒立的树形结构。如图所示：
图 HTML文档的树状结构
在一个HTML文档中，不仅可以通过根节点去寻找到每个子层节点元素，只要是从任意一个元素节点出发，都可以通过节点关系找到其它元素。
HTML文档类型的新定义方式
在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。在HTML5中刻意不使用版本声明，一份文档将会适用于所有版本的HTML，非常简便，声明方法如下：
<!DOCTYPE html> <!– 声明没有结束标签，对大小写不敏感 –>
声明必须是HTML文档的第一行，位于 <html> 标签之前。另外声明不是HTML标签，它是指示Web浏览器关于页面使用哪个HTML版本进行编写的指令。在HTML 4.01中，<!DOCTYPE> 声明引用DTD，因为HTML 4.01基于SGML，DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。另外在HTML5中只有这一种，在HTML 4.01中有三种 <!DOCTYPE> 声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <!– 第一种：HTML 4.01 Strict –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <!– 第二种HTML 4.01 Transitional –>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> <!– 第三种HTML 4.01 Frameset –>
以前的版本中不光有上面几个，基于XHTML不同版本还有好多种，所以在HTML5时代，你不需要使用上面这个既麻烦又难记的文档类型了，就用新的HTML5文档类型吧，简单明了，这就是HTML5的进步。
提示
请始终向HTML文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML文档的主体标签
一个HTML文档的基本格式需要包含以下几个全局架构元素标签，并将HTML代码分为三部分编写，它们可以被看作文档的框架。如下所示：
本例在网页文件中声明的这几对标签，在每个网页文档中都是唯一的，head标签和body标签需要嵌套在HTML标签中。
Ø 第一部分：<html>和</html>是网页文件的最外层标签，HTML文件中所有的内容都应该在这两个标记之间。<html>标签告诉浏览器这个HTML文件的开始点，</html>标签告诉浏览器这是HTML文件的结束点。
Ø 第二部分：位于<head>和</head>标签之间的文本是头信息，放在<html>元素的最上面使用，头信息不会显示在浏览器窗口中。主要包括当前页面的一些基本描述的语句，用于说明文件的标题和整个文件的一些公共属性，例如声明网页的标题和关键字等。每个<head>元素应当包含一个<title>元素以指示文档的标题，它也可以以任意顺序包含<base>、<object>、<link>、<style>、<script>、<meta>元素的任意组合。
Ø 第三部分：<body>标签是HTML文件的主体标记，标签之间的文本是正文内容，是用户能够在浏览器主窗口中看到的。例如，文字、图片、链接、表单等都需要声明在这个标记中。该元素出现在<head>元素之后。
当然，在HTML5新的标准规范中，这些主体标签是可以省略的，浏览器会包容这一点而不会出错，这也是HTML5使用灵活的地方。但笔者认为在编写HTML5代码时，没有必要省略它们，保持HTML文档结构完整性，会让可读性更好。
