HTML 基础文档结构
任何精心建造的结构，无论是高耸的摩天大楼还是简单的花园棚屋，都始于一张基础蓝图。在 Web 开发的世界里，HTML 文档也是如此。
就像建筑师使用蓝图来定义建筑的基本布局和关键组件一样，我们需要使用一种特定的、基础的结构来告诉 Web 浏览器 HTML 页面是如何组织的。理解这种基本结构不仅仅是死记硬背几个标签；而是要掌握核心框架，你未来的所有 Web 创作都将建立在此之上。
它确保你的网页能被浏览器正确解释，能被用户和搜索引擎访问，并为你想要展示的所有内容搭建好舞台。
1. HTML 文档蓝图：核心标签详解
一个 HTML 文档从根本上说是通过几个基本标签来构建的，这些标签定义了它的整体形状和用途。这些标签充当容器和指令，指导浏览器如何处理和显示你的网页。
1.1 一个HTML 5 文档最小完整结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代HTML教程</title>
</head>
<body>
<p>你好，欢迎学习现代标准的HTML系列教程</p>
<p>这是使用基础HTML文档结构制作的第一个网页。</p>
</body>
</html>接下来我们会一一分析探讨这个示例。
1.2 <!DOCTYPE html> 声明
<!DOCTYPE html> 声明是你会在任何现代 HTML 文档的第一行看到的内容。它看起来像一个 HTML 标签，但实际上它不是。它是一个“文档类型声明（document type declaration）”——这是给 Web 浏览器的一条指令，告诉它页面是使用哪个版本的 HTML 编写的。
- 目的：它的主要作用是确保浏览器在“标准模式（standards mode）”下渲染你的页面。这意味着浏览器将遵循现代 Web 标准，而不是试图模仿旧的、有时不一致的渲染行为（称为“怪异模式”或 "quirks mode"）。对于当前的行业标准 HTML5，这个声明非常简单：
<!DOCTYPE html>。 - 现代意义：在早期的 HTML 版本（如 HTML 4.01 或 XHTML 1.0）中，<!DOCTYPE> 声明要长得多也复杂得多，需要指向特定的 DTD（文档类型定义）。
<!DOCTYPE html>是 HTML5 的简化版通用声明，直接明了，易于记忆。 - 现实案例：想象一下，浏览器遇到一个没有
<!DOCTYPE html>的网页。它可能会猜测页面的 HTML 版本，或者回退到旧的渲染模式。这可能导致按钮或文本格式等元素在不同的浏览器，甚至同一浏览器的不同版本中显示不一致。 - 假设场景：如果你构建一个网页时漏掉了这个声明，浏览器可能不知道应该将你的页面作为旧的 HTML4 文档还是现代的 HTML5 文档来渲染。这种歧义可能导致你精心编写的 CSS 样式表现异常，或者 JavaScript 交互失效，因为浏览器应用了与你的设计初衷不符的渲染规则。
1.3 <html> 标签：文档的根元素
紧跟在 <!DOCTYPE> 声明之后，你会找到 <html> 标签。这是每个 HTML 页面的根元素（root element）。你网页的所有其他内容，包括 <head> 和 <body> 部分，都必须嵌套在这个 <html> 标签内部。
- 目的：它标志着整个 HTML 文档的开始和结束。把它想象成把所有东西装在一起的最外层容器。
lang属性：在<html>标签中包含lang属性是现代的最佳实践，例如<html lang="en">（英语）或<html lang="zh-CN">（中文）。此属性指定了文档内容的主要语言。- 重要性：这之所以至关重要，有以下几个原因：
- 无障碍性（Accessibility）：屏幕阅读器可以使用此信息为视障用户切换到正确的语言发音。
- 搜索引擎：像 Google 这样的搜索引擎利用它来返回特定语言的搜索结果。
- 浏览器行为：如果用户的首选语言与页面的
lang属性不同，浏览器可能会提示翻译该页面。 - 样式：在某些高级场景中，CSS 可以根据语言来定位元素。
- 现实案例：当你访问一个网站时，浏览器会将
<html>标签内的整个内容作为一个单一、连贯的网页来处理。如果你检查页面的源代码，你会看到这个标签包裹了一切。 - 假设场景：想象一下搜索引擎正在抓取你的网站。如果没有
lang="zh-CN"属性，它可能无法将你的页面归类为中文内容，这可能会影响它在中文特定搜索结果中的可见性。同样，屏幕阅读器也没有任何提示来调整其语音合成以进行正确的发音，从而使视障用户难以理解内容。
1.4 <head> 标签：文档的大脑（元数据）
嵌套在 <html> 标签内部的是 <head> 标签，它包含了关于 HTML 文档的元数据（metadata）。元数据是“关于数据的数据”——在这种情况下，它是关于网页本身的信息，这些信息不会直接显示在浏览器窗口的主体中。
- 目的：它保存了浏览器、搜索引擎和其他 Web 服务用于理解和处理页面的信息。
- 常见内容（简介）：
<title>：定义文档的标题，它显示在浏览器的标签页或窗口标题栏中。（例如：<title>现代HTML教程</title>）<meta>标签：提供各种类型的元数据，例如：- 字符集：
<meta charset="UTF-8">对于正确显示不同语言的文本字符至关重要。 - 视口（Viewport）设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">对于响应式 Web 设计至关重要，确保你的页面在所有设备上看起来都很棒。描述和关键词：供搜索引擎使用（尽管关键词现在用得比较少了）。 <link>标签：用于链接外部资源，最常见的是定义页面视觉外观的样式表（CSS 文件）。（例如：<link rel="stylesheet" href="styles.css">）<script>标签：可用于嵌入或链接 JavaScript 代码，为你的页面增加交互性。- 现实案例：当你在 Google 上搜索时，你在搜索结果中看到的蓝色可点击标题通常来自页面
<title>标签的内容。下方简短的描述通常来自<meta description>标签。 - 假设场景：如果一个网页缺少
<meta charset="UTF-8">，并且它包含特殊字符（如重音字母或表情符号），这些字符可能会显示为乱码符号（如 `�` 或 é），因为浏览器不知道如何解释字节编码。如果没有视口（viewport）meta 标签，你的网页在手机上可能会显得非常小（就像把桌面版缩略了一样），无法适应设备的屏幕尺寸。
1.5 <body> 标签：文档的身体（可见内容）
同样嵌套在 <html> 标签内部的是 <body> 标签，它包含了用户在浏览器中查看网页时可见的所有内容。
- 目的：这是你放置所有文本、图像、视频、表格、表单、链接以及构成网页实际可见部分的所有其他内容的地方。
- 与
<head>的对比：<head>包含不可见的元数据，而<body>包含所有可见的内容。如果你希望某些东西出现在屏幕上供用户查看或交互，它必须放在<body>标签内。 - 现实案例：你在这个页面上阅读的每一段文字、看到的每一张图片、点击的每一个按钮——所有这些都位于该网站 HTML 文档的
<body>标签内。 - 假设场景：想象一下在
<body>标签之外写了一段文本。遵循 HTML 结构的浏览器可能会忽略它，或者渲染得很不一致，因为浏览器预期所有可显示的内容都严格位于定义的<body>区域内。
2. 总结
<!DOCTYPE html>确保现代渲染模式。<html lang="en">定义文档为 HTML，且语言为英语。<head>包含了页面的字符集、用于响应式显示的视口设置，以及将在浏览器标签页中显示的标题“我的第一个基础 HTML 页面”。<body>包含两个段落（<p>标签，我们将在后面的章节中学习），任何查看网页的人都能看到它们。
这个完整的结构是创建一个有效 HTML5 文档所需的最低要求。
3. 附录： 常见 lang 属性值对照表
<html lang="lang 属性值">| lang 属性值 | 语言 (国家/地区) | 备注 |
|---|---|---|
| 中文及其变体 | ||
| zh-CN | 中文 (中国大陆) | 最常用，表示简体中文 |
| zh-HK | 中文 (香港) | 繁体中文 |
| zh-TW | 中文 (台湾) | 繁体中文 |
| zh-SG | 中文 (新加坡) | 简体中文 |
| zh-Hans | 中文 (简体通用) | 不区分具体国家 |
| zh-Hant | 中文 (繁体通用) | 不区分具体国家 |
| 英语及其变体 | ||
| en | 英语 (通用) | |
| en-US | 英语 (美国) | |
| en-GB | 英语 (英国) | |
| en-AU | 英语 (澳大利亚) | |
| en-CA | 英语 (加拿大) | |
| en-IN | 英语 (印度) | |
| 其他主要语言 | ||
| ja 或 ja-JP | 日语 (日本) | |
| ko 或 ko-KR | 韩语 (韩国) | |
| fr | 法语 (通用/法国) | |
| fr-CA | 法语 (加拿大) | |
| de | 德语 (德国) | |
| es | 西班牙语 (西班牙) | |
| es-MX | 西班牙语 (墨西哥/拉丁美洲) | |
| ru | 俄语 (俄罗斯) | |
| pt | 葡萄牙语 (葡萄牙) | |
| pt-BR | 葡萄牙语 (巴西) | |
| it | 意大利语 (意大利) | |
| ar | 阿拉伯语 (通用) | |
| hi | 印地语 (印度) | |
| th | 泰语 (泰国) | |
| vi | 越南语 (越南) |