- 网页设计与制作教程：Web前端开发（第7版）
- 刘瑞新主编
- 1323字
- 2024-06-18 18:27:29
1.2.1 HTML5文档的基本结构
1.2.1 HTML5文档的基本结构
HTML文档可分为文档头（head）和文档体（body）两部分。文档头的内容包括网页语言、关键字和字符集的定义等；文档体中的内容就是页面要显示的信息。
HTML文档基本结构由3个标签负责组织，即<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，<body>标签标识主体区域。
图1-1所示是一个可视化的HTML页面结构，只有<body>与</body>之间的白色区域才会在浏览器中显示。
HTML5文档的基本结构为：
图1-1 可视化的HTML页面结构
1.<!DOCTYPE html>标签
<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用的是HTML5标准。只有开头处使用<!DOCTYPE>声明，浏览器才能将该页面作为有效的HTML5文档，并按指定的文档类型进行解析。文档类型声明的语法格式为：
这行代码称为DOCTYPE（document type，文档类型）声明。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。<!DOCTYPE html>声明必须放在每一个HTML文档的最顶部，在所有代码和标签之前。
2.<html>…</html>标签
<html>标签位于<!DOCTYPE>标签之后，称为HTML文档标签，也被称为根标签，用于告诉浏览器其自身是一个HTML文档。HTML文档标签的语法格式为：
<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>为止。每个HTML文档均以<html>开始，以</html>结束。lang属性定义文档的主要语言，对于简体中文，设置为“zh-CN”。如果省略lang，将依据浏览器的设置。
3.<head>…</head>标签
HTML文档包括头部和主体。<head>标签定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后。HTML文档头标签的语法格式为：
文档头部内容在开始标签<html>和结束标签</html>之间定义，一个HTML文档只能含有一对<head>…</head>标签。网页中经常设置页面的基本信息，如页面的标题、作者和其他文档的关系等。为此HTML提供了一系列的标签，这些标签通常都写在<head>标签内，因此被称为头部相关标签。绝大多数文档头部所包含的数据都不会真正作为内容显示在页面中。
4.<meta charset>标签
<head>…</head>标签中的<meta charset>定义网页文档中的字符编码，语法格式为：
为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF-8”。
5.<title>…</title>标签
<title>标签定义文档的标题，标题显示在浏览器的标题栏或标签页上，其语法格式为：
每个HTML文档都应该有标题，在HTML文档中，<title>和</title>标签位于HTML文档的头部，即<head>和</head>标记之间。例如，<title>哔哩哔哩(゜-゜)つロ 干杯～-bilibili</title>，如图1-2所示（在Google Chrome浏览器中，单击地址栏右端的“更多”按钮
，在打开的菜单中选择“更多工具”，在子菜单中单击“开发者工具”，单击“Elements”标签，再单击
元素前的箭头，即可展开该元素）。
图1-2 <title>…</title>标签在浏览器中的显示
6.<body>…</body>标签
<body>标签包含HTML文档的所有内容，也称为主体标签。浏览器中显示的所有文本、图像、表单与多媒体元素等信息都必须位于<body>…</body>标签内，<body>标签内的信息是最终展示给用户看的。HTML文档主体标签的语法格式为：
文档体位于文档头之后，以<body>为开始标签，</body>为结束标签。一个HTML文档只能含有一对<body>…</body>标签，且<body>…</body>标签必须在<html>…</html>标签内，位于<head>头部标签之后，与<head>标签是并列关系。<body>标签定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在文档体中。
每个HTML文档都应遵循这个基本结构，以确保浏览器能正确地解析和显示文档。浏览器在解释HTML文档时是按照层次顺序进行解释的，其顺序为：document→html→body→div父元素→input子元素。document是最上层祖先元素，input是最下层后代元素。