HTML 基础教程丨入门篇

2025年5月更新

270

HTML 基础教程丨入门篇

HTML 基础：构建现代网页的基石

欢迎来到HTML的世界！我是您今天的向导，一位在Python全栈领域拥有多年实战经验的架构师。在我看来，无论是构建复杂的后端系统，还是打造优雅的前端界面，坚实的基础知识始终是成功的关键。HTML，作为网页的骨架，其重要性不言而喻。本教程将不仅仅是语法的堆砌，我将融入我在架构设计中积累的关于模块化、可维护性和扩展性的思考，帮助您从架构师的视角理解HTML。

正如我在软件开发中始终强调的“尽可能以创建新文件的方式进行开发”以保证模块的独立性和可维护性，在学习HTML时，我们也可以将每一个HTML元素、每一个语义标签视为一个独立的“构建块”。这些构建块遵循特定的规则组合在一起，构成了结构清晰、语义明确的网页文档，这与构建高内聚、低耦合的软件模块有着异曲同工之妙。

本教程的目标读者是所有希望学习或巩固HTML基础知识的朋友，无论您是编程新手，还是希望温故知新的开发者。我们将从最基本的概念讲起，逐步深入，涵盖HTML的方方面面，并穿插实际案例和最佳实践。

本教程将涵盖以下核心内容：

HTML绪论：什么是HTML？它的历史、作用以及为何重要。
HTML文档基本结构：<!DOCTYPE html>, <html>, <head>, <body> 的剖析。
元素、标签与属性：HTML的原子构成。
核心HTML元素详解：
- 文本元素：标题、段落、文本格式化。
- 链接与导航。
- 图像嵌入。
- 列表：无序、有序、定义列表。
- 表格：构建结构化数据。
- 表单：用户交互的基石。
HTML5语义化标签：构建更具意义的页面结构。
多媒体与嵌入内容：音频、视频、iframe。
HTML验证与最佳实践：编写高质量HTML代码的准则。
简单实例：构建一个完整的页面。
超越HTML：CSS与JavaScript简介。

让我们开始这场深入的HTML探索之旅吧！

第一章：HTML绪论 —— 网页的骨骼

在数字时代，网页是我们获取信息、进行交流、享受服务的主要媒介。而HTML（HyperText Markup Language，超文本标记语言）正是这一切的起点。

1.1 什么是HTML？

想象一下人体的构造：骨骼支撑起整个身体的结构，肌肉附着其上赋予形态，皮肤覆盖其外提供保护和外观，而神经系统则负责交互和动态响应。在这个比喻中：

HTML 就是网页的骨骼，它定义了网页的基本结构和内容组织。
CSS (Cascading Style Sheets，层叠样式表) 则是网页的肌肉和皮肤，负责网页的视觉表现、样式和布局。
JavaScript 则是网页的神经系统，负责实现页面的交互功能和动态行为。

HTML并非一种编程语言，因为它不包含逻辑处理能力（如条件判断、循环等）。它是一种标记语言，通过一系列预定义的**标签（tags）**来标记文本、图片、链接等内容，告诉浏览器如何组织和展示这些内容。

超文本（HyperText） 的含义在于，HTML文档中的文本不仅仅是静态的文字，它可以包含指向其他文档或资源的链接（超链接），使得用户可以在不同的信息节点之间自由跳转，这构成了万维网（World Wide Web）的基础。

1.2 HTML简史

HTML自20世纪90年代初由蒂姆·伯纳斯-李（Tim Berners-Lee）发明以来，经历了多次迭代和发展：

HTML (1.0)：最初的版本，非常基础。
HTML 2.0 (1995)：成为IETF（互联网工程任务组）标准，奠定了基础。
HTML 3.2 (1997)：W3C（万维网联盟）推荐标准，加入了表格、Applet等。
HTML 4.01 (1999)：一个重要的里程碑，对HTML进行了梳理，强调结构与表现分离。它有三个变种：Strict, Transitional, Frameset。
XHTML 1.0 (2000)：基于XML的HTML版本，语法更严格。
HTML5 (2014推荐标准，但自2008年起就已逐步发展和被浏览器支持)：当前的通用标准。HTML5带来了许多激动人心的新特性，如新的语义化标签（<article>, <section>, <nav>, <footer>等）、多媒体支持（<audio>, <video>）、Canvas绘图、本地存储、表单增强等，极大地丰富了Web应用的能力。

我们本教程将主要基于HTML5进行讲解，因为它是现代Web开发的标准。

1.3 HTML的重要性

Web的基石：没有HTML，就没有我们今天所见的丰富多彩的网页。所有浏览器都需要解析HTML来渲染页面。
内容结构化：HTML通过标签将内容组织成有意义的结构（如标题、段落、列表），这不仅方便用户阅读，也利于搜索引擎理解页面内容。
可访问性（Accessibility, a11y）：良好结构的HTML对于残障人士（如使用屏幕阅读器的盲人用户）访问网页至关重要。语义化的HTML标签能够为辅助技术提供上下文信息。
搜索引擎优化（SEO）：搜索引擎（如Google, Baidu）通过爬取和分析HTML内容来索引网页。使用恰当的HTML标签（如标题标签、元数据标签）有助于提高网页在搜索结果中的排名。
跨平台兼容性：HTML是开放标准，在各种设备（电脑、手机、平板）和操作系统上的浏览器都能得到良好支持。

作为一名架构师，我深知打好地基的重要性。HTML就是Web应用这座大厦的地基。一个结构混乱、语义不明的HTML文档，就像一个地基不稳的建筑，后续的样式添加（CSS）和行为交互（JavaScript）都会变得困难重重，维护成本也会急剧上升。

第二章：HTML文档基本结构 —— 网页的蓝图

每个HTML文档都遵循一个基本的结构。这就像建筑的蓝图，规定了哪些部分是必需的，以及它们如何组织。

一个最简单的HTML5文档结构如下：

<!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>
    <h1>你好，世界！</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

让我们逐行解析这个结构：

2.1 `<!DOCTYPE html>` (文档类型声明)

作用：<!DOCTYPE html>（Document Type Declaration，简称DTD）声明位于HTML文档的第一行。它不是一个HTML标签，而是一条指令，告诉浏览器当前文档使用的是哪个HTML版本。
HTML5的DOCTYPE：在HTML5中，DOCTYPE声明非常简洁，就是<!DOCTYPE html>。这指示浏览器以标准模式（standards mode）来解析和渲染页面，确保最佳的兼容性和行为一致性。
历史回顾：在HTML5之前，DOCTYPE声明通常比较复杂，需要指向特定的DTD文件，例如HTML 4.01 Strict的声明是：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 幸运的是，HTML5大大简化了这一点。
重要性：必须在HTML文档的开头包含<!DOCTYPE html>声明。如果缺失或格式不正确，浏览器可能会进入怪异模式（quirks mode），导致页面渲染出现不可预料的兼容性问题。

2.2 `<html>` 元素

作用：<html> 元素是整个HTML文档的根元素（root element）。所有其他HTML元素都必须是这个元素的后代（即嵌套在它内部）。
lang 属性：
- lang 属性用于声明文档的主要语言。例如，lang="zh-CN" 表示简体中文，lang="en" 表示英文。
- 重要性：
  1. 可访问性：帮助屏幕阅读器等辅助技术选择正确的发音和语调。
  2. SEO：帮助搜索引擎理解页面内容的目标语言区域。
  3. 浏览器功能：某些浏览器可能会根据lang属性提供翻译建议或使用特定于语言的排版规则。
- 语言代码通常遵循ISO 639-1标准（两位字母代码，如 “en”, “zh”）和可选的区域子标签（如 “US”, “CN”），例如 en-US 代表美国英语。

2.3 `<head>` 元素

作用：<head> 元素包含了文档的元数据（metadata），这些信息不会直接显示在浏览器的主内容区域，但对浏览器、搜索引擎和其他Web服务至关重要。
常见的<head>子元素：
- <meta> 标签：提供关于HTML文档的元信息。
  - <meta charset="UTF-8">：
    - 声明文档的字符编码。UTF-8是一种通用的字符编码，能够表示世界上几乎所有的字符，强烈推荐使用。
    - 必须尽早声明：最好作为<head>内的第一个标签，以确保浏览器能正确解析页面内容，避免乱码。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">：
    - 这是针对移动设备进行响应式网页设计的关键设置。
    - width=device-width：将视口的宽度设置为设备的屏幕宽度。
    - initial-scale=1.0：设置页面的初始缩放比例为1。
    - 没有这个设置，移动设备浏览器可能会按桌面宽度渲染页面，然后缩小导致文字过小。
  - <meta name="description" content="页面描述内容">：
    - 提供页面的简短描述，搜索引擎可能会在搜索结果摘要中使用它。
  - <meta name="keywords" content="关键词1, 关键词2">：
    - 过去用于SEO，但现在主流搜索引擎（如Google）已基本忽略此标签，因为容易被滥用。但某些特定场景或内部搜索引擎可能仍会参考。
  - <meta name="author" content="作者名">：
    - 声明页面作者。
  - 还有其他http-equiv属性可以模拟HTTP头部信息，如 refresh（自动刷新）、X-UA-Compatible（指定IE浏览器渲染模式）等，但部分已不推荐或有更好的替代方案。
- <title> 标签：
  - 作用：定义浏览器工具栏（标签页）中显示的标题、搜索引擎结果中显示的页面标题，以及用户将页面添加到收藏夹或书签时使用的默认名称。
  - 重要性：
    1. 用户体验：为用户提供清晰的页面标识。
    2. SEO：<title>是SEO中非常重要的一个因素，应包含页面的核心关键词并具有描述性。
    3. 可访问性：屏幕阅读器会读出标题，帮助用户了解当前页面内容。
  - 一个文档中只能有一个<title>标签，且必须位于<head>内。
- <link> 标签：
  - 作用：用于链接外部资源到HTML文档，最常见的是链接外部CSS样式表。
  - 链接CSS：<link rel="stylesheet" type="text/css" href="styles.css">
    - rel="stylesheet"：指定链接资源的类型是样式表。
    - type="text/css"：指定资源的MIME类型（在HTML5中，如果rel="stylesheet"，type属性可以省略）。
    - href="styles.css"：指定外部CSS文件的路径。
  - 其他用途：链接网站图标（favicon）、预加载资源、alternate版本等。<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="apple-icon.png">
- <script> 标签：
  - 作用：用于嵌入或引用JavaScript代码。
  - 嵌入脚本：<script> // JavaScript代码 console.log("Hello from inline script in head!"); </script>
  - 引用外部脚本：<script src="myscript.js"></script>
  - 放置位置：<script>标签可以放在<head>中，也可以放在<body>的末尾（在</body>之前）。
    - 放在<head>中：脚本会先于页面内容加载和执行。如果脚本执行时间过长或依赖DOM元素，可能会阻塞页面渲染或导致错误。通常用于不直接操作DOM的全局配置或库的早期加载。
    - 放在<body>末尾：推荐做法，特别是对于操作DOM的脚本。这样可以确保HTML结构完全加载并解析完毕后再执行脚本，避免因DOM未准备好而导致的错误，同时也能让用户更快地看到页面内容，提升体验。
    - async 和 defer 属性 (用于外部脚本)：
      - <script async src="script.js"></script>：异步下载脚本，下载完成后立即执行，可能会中断HTML解析。执行顺序不保证。
      - <script defer src="script.js"></script>：异步下载脚本，但在HTML文档完全解析完毕后、DOMContentLoaded事件触发之前按顺序执行。
      - 这两个属性为脚本加载优化提供了更灵活的选择。
- <style> 标签：
  - 作用：用于在HTML文档内部定义CSS样式（内联样式表）。
  - 示例：<head> <style> body { background-color: lightblue; } h1 { color: navy; text-align: center; } </style> </head>
  - 建议：虽然<style>标签很方便，但为了更好的维护性和可重用性（结构与表现分离原则），通常推荐将CSS代码放在外部.css文件中，并通过<link>标签引入。内联样式表更适用于非常小的项目或特定情况下的快速样式调整。

2.4 `<body>` 元素

作用：<body> 元素包含了HTML文档的所有可见内容，例如文本、图片、链接、表格、列表、表单、视频等。这些内容是用户在浏览器窗口中直接看到的。
一个HTML文档中只能有一个<body>标签。

从架构师的角度看，<head>和<body>的划分体现了关注点分离：<head>负责元信息和资源链接（配置和依赖），<body>负责实际内容呈现（核心业务/功能）。这种清晰的划分使得文档结构更易于理解和管理。

第三章：元素、标签与属性 —— HTML的原子

理解了HTML文档的宏观结构后，我们需要深入到构成HTML的微观层面：元素、标签和属性。

3.1 HTML元素 (Elements)

HTML元素是构成HTML文档的基本单位，它们定义了内容的结构和语义。一个HTML元素通常由开始标签（start tag）、**内容（content）和结束标签（end tag）**组成。

示例：

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

<p> 是开始标签。
这是一个段落元素。 是元素的内容。
</p> 是结束标签。

整个 <p>这是一个段落元素。</p> 就构成了一个段落元素。

3.2 HTML标签 (Tags)

标签是用来标记HTML元素开始和结束的关键字，用尖括号（< 和 >）包围。

开始标签 (Opening Tag / Start Tag)：例如 <h1>, <p>, <div>。
结束标签 (Closing Tag / End Tag)：在标签名前加一个斜杠 /，例如 </h1>, </p>, </div>。
标签名大小写：HTML标签名是不区分大小写的（例如，<P> 和 <p> 效果相同）。但是，W3C推荐使用小写标签名，这也是XHTML的强制要求，并且已成为社区的普遍编码规范。遵循小写规范有助于代码的一致性和可读性。

3.2.1 空元素/自闭合元素 (Void Elements / Self-Closing Elements)

有些HTML元素没有内容，它们被称为空元素。空元素的标签不需要结束标签，或者说它们的开始标签和结束标签是合一的。

HTML5中的常见空元素：

<br> (换行)
<hr> (水平分割线/主题转换)
<img> (图像)
<input> (表单输入域)
<link> (链接外部资源)
<meta> (元数据)
<area> (图像映射区域)
<base> (文档基准URL)
<col> (表格列)
<embed> (嵌入内容)
<param> (为<object>传递参数)
<source> (为<video>或<audio>指定媒体源)
<track> (为媒体元素指定文本轨道)
<wbr> (建议换行点)

写法：
在HTML5中，空元素可以写作：

<br>
<img src="image.jpg" alt="描述">

或者，为了兼容XHTML的风格（也更明确地表示这是一个自闭合标签），可以在末尾添加一个斜杠：

<br />
<img src="image.jpg" alt="描述" />

HTML5解析器对这两种写法都能正确处理。不过，社区中更常见的是不带末尾斜杠的写法。

3.3 HTML属性 (Attributes)

属性为HTML元素提供了额外的信息或配置。属性总是在开始标签中指定，并且通常以 名称/值对（name=”value”） 的形式出现。

示例：

<a href="https://www.example.com">访问示例网站</a>
<img src="logo.png" alt="公司Logo" width="100" height="50">

在 <a> 元素中：
- href 是属性名，https://www.example.com 是属性值。它定义了链接的目标地址。
在 <img> 元素中：
- src 是属性名，logo.png 是属性值。它定义了图像的来源路径。
- alt 是属性名，公司Logo 是属性值。它提供了图像的替代文本。
- width 是属性名，100 是属性值。它定义了图像的宽度。
- height 是属性名，50 是属性值。它定义了图像的高度。

3.3.1 属性值的引号

属性值应该始终用引号包围。可以使用单引号 (') 或双引号 (")。

<p class="important">这是重要段落。</p>
<p class='highlight'>这是高亮段落。</p>

推荐使用双引号，这是更常见的约定。
如果属性值本身包含双引号，则可以用单引号包围属性值，反之亦然。<input type="text" name="username" value='来自"张三"的问候'> <input type="text" name="greeting" value="李四's问候">
在某些情况下，如果属性值不包含空格或特殊字符（如 =, <, >, ', "），引号可以省略，但强烈不推荐这样做，因为它会降低代码的可读性和健壮性，并可能导致错误。始终使用引号是一个好习惯。

3.3.2 常用全局属性

有些属性是全局的，意味着它们可以应用于几乎所有的HTML元素（尽管它们可能并非对所有元素都有语义意义或视觉效果）。

id 属性：
- 为元素定义一个唯一的标识符。
- 一个文档中，每个id值必须是唯一的。
- 用途：
  1. CSS选择器：通过#elementId来为特定元素应用样式。
  2. JavaScript操作：通过document.getElementById("elementId")来获取和操作元素。
  3. 页面内锚点链接：<a href="#section1"> 可以跳转到 id="section1" 的元素。
- id 的值必须至少包含一个字符，且不能包含空格。通常使用字母、数字、下划线 (_) 和连字符 (-)。
class 属性：
- 为元素指定一个或多个类名，用空格分隔。
- 一个类名可以被多个元素使用，一个元素也可以拥有多个类名。
- 用途：
  1. CSS选择器：通过.className来为一组具有相同类名的元素应用样式。这是CSS中最常用的选择方式。
  2. JavaScript操作：通过document.getElementsByClassName("className")等方法来获取和操作一组元素。
- 类名也常用于表示元素的语义类别或状态。
<p id="intro-paragraph" class="important highlighted featured">这是一个段落。</p> <div class="article-summary important">另一个摘要。</div>
style 属性：
- 用于直接在元素上定义内联CSS样式。
- 示例：<p style="color: red; font-size: 16px;">红色文字。</p>
- 不推荐大量使用：虽然方便，但它将样式和结构紧密耦合，违反了“结构与表现分离”的原则，使得样式难以维护和复用。优先使用外部CSS文件和class属性。仅在特定情况下（如JavaScript动态修改样式，或某些邮件HTML模板）少量使用。
title 属性：
- 为元素提供额外的提示信息。当鼠标悬停在元素上时，浏览器通常会显示title属性的值作为一个小提示框（tooltip）。
- 示例：<abbr title="World Wide Web Consortium">W3C</abbr>
- 不应将其用于承载关键信息，因为触摸屏设备用户可能无法轻易看到它。
lang 属性：
- 除了在<html>标签上全局设置文档语言外，lang属性也可以用在任何元素上，以指明该元素内容的语言与父元素或文档主要语言不同。
- 示例：<p>这是一个中文段落，其中包含一句英文：<span lang="en">Hello World!</span></p>
dir 属性：
- 指定元素内容的文本方向。
- 可选值：
  - ltr：Left-to-right (从左到右，默认值，适用于大多数语言如中文、英文)。
  - rtl：Right-to-left (从右到左，适用于阿拉伯语、希伯来语等)。
- 示例：<p dir="rtl">هذا نص عربي.</p>
tabindex 属性：
- 控制元素是否可以获得键盘焦点，以及它在Tab键导航顺序中的位置。
- tabindex="0"：元素可以获得焦点，并按其在文档中的自然顺序进行Tab导航。
- tabindex="-1"：元素可以获得焦点（例如通过JavaScript的focus()方法），但不能通过Tab键导航到。
- tabindex="正整数"：元素可以获得焦点，并按tabindex值从小到大的顺序进行Tab导航。应避免使用大于0的tabindex值，因为它会打乱自然的导航流程，导致可访问性问题。优先通过合理组织HTML结构来保证自然的Tab顺序。
hidden 属性：
- 一个布尔属性，如果存在，表示该元素当前与页面不相关，浏览器不应渲染它。
- 与CSS的display: none;效果类似，但hidden具有更强的语义，表示该元素在当前状态下是不相关的。
- 示例：<p hidden>这段内容暂时隐藏。</p>
- 可以通过JavaScript动态添加或移除hidden属性来显示/隐藏元素。

3.3.3 布尔属性 (Boolean Attributes)

有些属性是布尔型的，它们的存在即表示值为真，不存在则为假。

示例：

<input type="checkbox" checked>：表示复选框默认被选中。checked 就是一个布尔属性。
<input type="text" readonly>：表示文本框只读。
<select multiple>：表示下拉列表允许多选。
<button disabled>：表示按钮被禁用。

写法：
在HTML5中，布尔属性有几种等效的写法：

仅属性名 (推荐)：<input type="checkbox" checked>
属性名=空字符串：<input type="checkbox" checked="">
属性名=属性名：<input type="checkbox" checked="checked">

HTML5规范推荐使用第一种最简洁的写法。

3.3.4 自定义数据属性 (Custom Data Attributes)

HTML5引入了自定义数据属性，允许我们在HTML元素上存储自定义的私有数据。这些数据可以被JavaScript用来增强用户体验，而不会影响元素的标准行为或语义。

语法：自定义数据属性以 data- 开头，后面至少跟一个字符。属性名不区分大小写，但在JavaScript中访问时会被转换为驼峰式（例如 data-user-id 变成 dataset.userId）。
示例：<div id="user-profile" data-user-id="12345" data-user-name="张三" data-user-role="admin"> 用户资料 </div>
通过JavaScript访问：
可以使用元素的 dataset 属性来访问这些数据。const userProfile = document.getElementById('user-profile'); console.log(userProfile.dataset.userId); // "12345" console.log(userProfile.dataset.userName); // "张三" console.log(userProfile.dataset.userRole); // "admin" // 修改 userProfile.dataset.userRole = 'editor'; // 添加新的 userProfile.dataset.lastLogin = '2023-10-27';
用途：常用于存储与元素相关的元数据、状态信息，或作为JavaScript操作的钩子，而无需滥用class或id。

3.4 元素嵌套 (Nesting Elements)

HTML元素可以嵌套在其他元素内部，形成层级结构（树状结构），这被称为DOM（Document Object Model，文档对象模型）。

示例：

<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的第一段...</p>
            <p>这是文章的第二段，包含一个<strong>重要</strong>的词语。</p>
        </article>
    </main>
</body>

在这个例子中：

<body> 包含了 <header> 和 <main>。
<header> 包含了 <h1> 和 <nav>。
<nav> 包含了 <ul>。
<ul> 包含了多个 <li>。
每个 <li> 包含了 <a>。
<p> 元素可以包含 <strong> 元素。

嵌套规则：
HTML对元素嵌套有一定的规则。并非所有元素都可以嵌套在任何其他元素中。

块级元素 (Block-level elements)：通常会独占一行，可以包含其他块级元素和内联元素。例如 <div>, <p>, <h1>–<h6>, <ul>, <li>, <table>。
内联元素 (Inline elements)：通常不会开始新行，只占据其内容所需的宽度，可以包含其他内联元素和文本，但通常不能直接包含块级元素（有一些例外，如 <a> 在HTML5中可以包裹块级内容）。例如 <span>, <a>, <img>, <strong>, <em>, <code>。

常见错误嵌套：

块级元素嵌套在 <p> 内部 (除了 <a> 等少数情况，<p> 内部不应有 <div>, <h1> 等)。
<p> 嵌套在另一个 <p> 内部 (这是不允许的，浏览器会自动闭合第一个<p>)。
内联元素包裹块级元素（例如 <span><div>...</div></span>，通常是错误的，应反过来）。

HTML5对嵌套规则做了一些放宽，例如 <a> 标签现在可以包裹块级元素，使其成为一个大的可点击区域。但总体上，理解块级和内联的概念以及它们通常的嵌套行为是很重要的。不正确的嵌套会导致HTML无效，并可能引发渲染问题或可访问性问题。

从架构师的视角看，元素的正确嵌套和属性的恰当使用，是构建“高内聚、低耦合”HTML结构的基础。每个元素都应该有其明确的语义和职责，属性则为这些元素提供了必要的配置。自定义数据属性 data-* 则提供了一种优雅的方式来扩展元素的功能，而不会污染标准的命名空间，这与在软件设计中通过接口或配置文件来扩展模块功能有相似之处。

第四章：核心HTML元素详解 —— 构建网页的砖瓦

现在我们来详细了解一些最常用和最重要的HTML元素。我将它们比作构建网页这座建筑的砖瓦，每一种都有其特定的用途和形态。

4.1 文本元素

文本是网页内容的核心。HTML提供了多种标签来组织和格式化文本。

4.1.1 标题 (Headings): `<h1>` – `<h6>`

作用：定义文档中的标题层级。<h1> 表示最高级别的标题（通常是页面主标题），<h6> 表示最低级别的标题。
语义重要性：
1. 文档结构：标题标签帮助构建清晰的文档大纲。搜索引擎和辅助技术（如屏幕阅读器）使用标题来理解页面结构和内容层次。
2. SEO：<h1> 标签通常包含页面的核心关键词，对SEO非常重要。
3. 可访问性：屏幕阅读器用户经常通过标题导航来快速浏览页面内容。
使用规则：
- 一个页面通常应该只有一个 <h1> 标签，用作主标题。
- 标题级别应该按顺序使用，不要跳级（例如，在 <h1> 之后直接使用 <h3> 而没有 <h2> 是不好的做法）。这有助于保持逻辑清晰的文档结构。
- 不要仅仅为了改变文字大小而使用标题标签。标题具有语义含义。如果只是想改变文本样式，应该使用CSS。
示例：<body> <h1>网站主标题</h1> <section> <h2>第一章节标题</h2> <p>章节内容...</p> <h3>2.1 小节标题</h3> <p>小节内容...</p> <h3>2.2 另一个小节标题</h3> <p>...</p> </section> <section> <h2>第二章节标题</h2> <p>...</p> </section> </body> 从架构上看，标题的层级定义了信息的组织结构，如同一个项目的模块划分，层层递进，清晰明了。

4.1.2 段落 (Paragraphs): `<p>`

作用：定义一个文本段落。浏览器通常会在段落前后添加一些空白（外边距）。
示例：<p>这是第一个段落。它包含了一些文本内容，用于信息的陈述。</p> <p>这是第二个段落。段落之间会有默认的间距，使得文本更易于阅读。</p>
注意：<p> 元素是一个块级元素。它会自动在其前后创建换行。如果你想在段落内强制换行，应使用<br>标签，但滥用<br>来控制布局是不推荐的，应优先使用CSS。

4.1.3 文本格式化 (Inline Formatting)

这些是内联元素，用于改变文本片段的样式或赋予其特定语义，它们不会导致换行。

<strong> 和 <b>
- <strong>：表示内容具有强重要性、严肃性或紧急性（strong importance, seriousness, or urgency）。浏览器通常将其显示为粗体。具有语义含义。
- <b> (Bold)：在没有其他更合适的语义标签时，用于将文本显示为粗体，而不暗示任何额外的强调或重要性。它是一个纯粹的视觉表现标签。
- 优先使用 <strong> 如果内容确实重要。如果只是为了视觉上的粗体效果且没有特定语义，可以使用 <b>，或者最好通过CSS的 font-weight: bold; 来实现。
<em> 和 <i>
- <em> (Emphasis)：表示对内容的强调（stress emphasis）。浏览器通常将其显示为斜体。具有语义含义。
- <i> (Italic)：在没有其他更合适的语义标签时，用于将文本显示为斜体，常用于表示外文词汇、科技术语、船名、思考等。它是一个纯粹的视觉表现标签。
- 优先使用 <em> 如果内容需要被强调。如果只是视觉上的斜体效果，可使用 <i> 或CSS的 font-style: italic;。
<p><strong>警告：</strong>这是一个非常重要的信息！</p> <p>这本书的标题是<i>《物种起源》</i>。</p> <p>我<em>真的</em>很喜欢这个设计。</p> <p>这段文字需要<b>加粗</b>显示，但没有特殊含义。</p>
<mark>：
- 表示一段因其与另一上下文的相关性而被标记或高亮的文本。例如，在搜索结果中高亮显示关键词。浏览器通常将其显示为黄色背景。
- HTML5新增
- 示例：<p>搜索结果中，<mark>HTML</mark>是一个高频词。</p>
<u> (Underline)：
- 在HTML4中，<u> 表示下划线文本，因易与超链接混淆而不推荐使用。
- 在HTML5中，<u> 被重新定义，用于表示一段具有非文本性注解的文本，例如标记拼写错误（虽然浏览器通常会自动处理），或者标记中文专有名词。
- 应谨慎使用，避免与链接混淆。如果只是为了视觉上的下划线，应使用CSS的 text-decoration: underline;。
- 示例：<p>这是一个<u>专有名词</u>。</p> (但多数情况不推荐)
<s> 和 <del> (Strikethrough / Deleted Text)
- <s>：表示内容不再准确或不再相关。浏览器通常将其显示为带删除线的文本。
- del (Deleted Text)：表示文档中已被删除的部分。通常与<ins>（插入文本）一起使用，以显示文档的修改。浏览器也显示为带删除线文本。
- 区别：<s> 更侧重于内容本身不再正确，而 <del> 侧重于编辑行为（删除了这部分）。
- 示例：<p><s>原价：¥199</s> 现价：¥99</p> <p>这份文档的早期版本说：<del>苹果是蔬菜。</del><ins>苹果是水果。</ins></p>
<ins> (Inserted Text)：
- 表示文档中新插入的部分。通常与<del>一起使用。浏览器通常将其显示为带下划线的文本。
- 示例：见上例。
<sub> 和 <sup> (Subscript and Superscript)
- <sub>：定义下标文本。例如化学式 H₂O。
- <sup>：定义上标文本。例如数学公式 E=mc²，或者脚注标记^[1]。
- 示例：<p>水的化学式是 H<sub>2</sub>O。</p> <p>爱因斯坦的质能方程是 E = mc<sup>2</sup>。</p>
<small>：
- 表示附属评论或旁注，如版权信息、法律声明等次要文本。浏览器通常将其显示为比父元素稍小的字体。
- 示例：<p><small>© 2023 公司名称. 保留所有权利。</small></p>
<code>：
- 定义一段计算机代码。浏览器通常使用等宽字体显示。
- 示例：<p>在Python中，使用 <code>print("Hello")</code> 来输出文本。</p>
<pre> (Preformatted Text)：
- 定义预格式化文本。<pre> 元素中的文本会保留空格和换行符，并且通常也使用等宽字体显示。非常适合显示代码块。
- 常与<code>标签嵌套使用，以提供更准确的语义。
- 示例：<pre><code class="language-python"> def greet(name): print(f"Hello, {name}!") greet("World") </code></pre> (注意：class="language-python" 是用于代码高亮库的约定，HTML本身不处理)
<q> (Inline Quotation)：
- 定义一个短的行内引用。浏览器通常会自动在其内容两端添加适当的引号（例如英文的 ” “，中文的 “ ”）。
- cite 属性可以用来指定引用的来源URL。
- 示例：<p>孔子说：<q>学而时习之，不亦说乎？</q></p>
<blockquote> (Block Quotation)：
- 定义一个长的块级引用。浏览器通常会将其缩进显示。
- cite 属性可以用来指定引用的来源URL。
- 示例：<blockquote cite="http://example.com/source"> <p>这是一个较长的引用段落，它会作为一个独立的块显示。</p> </blockquote>
<abbr> (Abbreviation)：
- 定义一个缩写或首字母缩略词。title 属性可用于提供缩写的完整形式。
- 示例：<p><abbr title="HyperText Markup Language">HTML</abbr> 是网页的基础。</p>
<dfn> (Definition)：
- 定义一个术语的定义实例。它所在的段落、列表项或章节应包含该术语的定义。
- 示例：<p><dfn>HTML</dfn> (HyperText Markup Language) 是一种用于创建网页的标准标记语言。</p>
<address>：
- 定义文档或文章的作者/所有者的联系信息（如电子邮件地址、物理地址、电话号码、社交媒体链接等）。
- 如果用在<body>中，表示整个文档的联系信息。如果用在<article>中，表示该文章的联系信息。
- 浏览器通常将其显示为斜体，并可能添加上下边距。
- 示例：<address> 作者：张三<br> 邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br> 地址：某某市某某区123号 </address>
<time>：
- HTML5新增
- 定义一个特定的时间或日期。
- datetime 属性用于提供机器可读的日期/时间格式（通常是YYYY-MM-DDThh:mm:ssZ）。
- 示例：<p>会议将于 <time datetime="2024-01-15T10:00:00Z">明天上午10点</time> 开始。</p> <p>发布日期：<time datetime="2023-10-27">2023年10月27日</time></p>

4.1.4 换行与分割线

<br> (Line Break)：
- 插入一个单行的换行符。
- 它是一个空元素。
- 谨慎使用：不要用多个<br>来创建段落间的垂直间距，应使用CSS的margin或padding属性。<br>主要用于诗歌、地址等确实需要在特定位置换行的文本。
- 示例：<p>这是一行。<br>这是新的一行，但仍在同一个段落内。</p>
<hr> (Thematic Break / Horizontal Rule)：
- 表示段落级别元素之间的主题转换，例如场景变化、故事中不同主题的过渡。在视觉上，浏览器通常会渲染为一条水平线。
- 它是一个空元素。
- 不要仅仅为了画一条线而使用<hr>。如果只是装饰性的线条，应使用CSS的border属性或其他方法。<hr>具有语义含义。
- 示例：<p>第一部分内容...</p> <hr> <p>第二部分内容，主题有所不同...</p>
<wbr> (Word Break Opportunity)：
- HTML5新增
- 表示一个建议的换行点。当一个长单词或URL可能溢出其容器时，浏览器可以在<wbr>指定的位置进行换行，而不会在单词中间随意断开。
- 它是一个空元素。
- 示例：<p>这是一个非常非常非常长<wbr>的单词，可能会导致溢出。</p>

这些文本元素为我们提供了丰富的工具来组织和呈现信息。从架构师的角度看，选择最语义化的标签是至关重要的。这不仅有助于机器（搜索引擎、屏幕阅读器）理解内容，也使得代码更易于人类阅读和维护。比如，用<strong>而不是<b>来标记真正重要的文本，就是在代码中嵌入了更深层次的业务逻辑或意图。

4.2 链接 (Anchors): `<a>`

链接是超文本的核心，使得用户可以在不同页面或页面不同部分之间导航。

作用：<a> 标签（anchor的缩写）定义了一个超链接。
核心属性：
- href (Hypertext Reference)：指定链接的目标URL。这是<a>标签最重要的属性。
  - 绝对URL：指向其他网站的完整地址。
    <a href="https://www.google.com">访问谷歌</a>
  - 相对URL：指向同一网站内的其他页面或资源。路径相对于当前页面或网站根目录。
    <a href="/about.html">关于我们</a> (相对于根目录)
    <a href="contact.html">联系方式</a> (相对于当前目录)
    <a href="../images/pic.jpg">查看图片</a> (相对于上级目录)
  - 页面内锚点链接：链接到同一页面的特定部分。目标元素需要有一个id属性。
    <a href="#section2">跳转到第二节</a>
    ...
    <h2 id="section2">第二节</h2>
  - 邮箱链接：
    <a href="mailto:someone@example.com?subject=咨询&body=你好，我想咨询...">发送邮件</a>
  - 电话链接：
    <a href="tel:+861012345678">拨打电话</a>
  - JavaScript伪链接 (不推荐，但有时可见)：
    <a href="javascript:void(0);" onclick="myFunction()">执行操作</a>
    更好的做法是使用<button>或者给<a>一个有意义的href（如#）并用event.preventDefault()阻止默认行为。
- target：指定在何处打开链接的文档。
  - _self：默认值。在当前窗口或标签页中打开。
  - _blank：在一个新的、未命名的窗口或标签页中打开。出于安全考虑，当使用 target="_blank" 时，通常建议同时添加 rel="noopener noreferrer"，以防止新打开的页面通过window.opener访问原始页面，并防止发送Referer头。
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">新窗口打开</a>
  - _parent：在父框架中打开（用于框架集frameset或iframe）。
  - _top：在整个窗口中打开，忽略所有框架。
  - framename：在指定的name属性的框架中打开。
- rel (Relationship)：指定当前文档与链接文档之间的关系。
  - noopener：指示浏览器打开链接时不授予新浏览上下文对打开它的文档的访问权限（即window.opener将为null）。
  - noreferrer：指示浏览器在请求链接资源时不发送HTTP Referer头部。
  - nofollow：告诉搜索引擎不要追踪此链接（通常用于用户生成的内容或广告链接，以避免传递权重）。
  - author：链接到文档的作者。
  - license：链接到文档的许可信息。
  - stylesheet：(用在<link>标签上)链接到样式表。
  - icon：(用在<link>标签上)链接到网站图标。
  - 等等。
- download：HTML5新增
  - 如果设置了此属性（可以没有值，或值为建议的文件名），则指示浏览器下载href指向的URL，而不是导航到它。
  - 示例：<a href="/files/document.pdf" download="我的文档.pdf">下载PDF</a>
- hreflang：指定链接文档的语言。
- type：指定链接文档的MIME类型（如 text/html, application/pdf）。
链接文本：<a>标签之间的内容（如文本、图像）成为可点击的链接。链接文本应该清晰、简洁地描述链接的目标。避免使用“点击这里”这样的模糊文本，这对可访问性和SEO都不利。
- 好：<a href="products.html">查看我们的产品</a>
- 不好：<a href="products.html">点击这里</a>查看我们的产品
图片链接：可以将<img>标签放在<a>标签内，使图片成为链接。<a href="details.html"> <img src="thumbnail.jpg" alt="产品缩略图"> </a>

链接是Web的灵魂，它们将孤立的页面连接成一个网络。从架构的角度思考，链接定义了信息节点之间的“接口”和“依赖关系”。一个网站的内部链接结构会影响其用户导航的便捷性和搜索引擎的爬取效率。

4.3 图像 (Images): `<img>`

图像是丰富网页内容、提升视觉吸引力的重要元素。

作用：<img> 标签用于在HTML页面中嵌入图像。它是一个空元素。
核心属性：
- src (Source)：必需属性。指定图像文件的路径（URL）。可以是绝对路径或相对路径。
  <img src="images/logo.png" alt="公司Logo">
  <img src="https://www.example.com/path/to/image.jpg" alt="示例图片">
- alt (Alternative text)：必需属性（除非图像纯粹是装饰性的且没有内容价值，此时可设为，但仍需存在alt属性）。
  - 作用：
    1. 可访问性：当图像无法显示（例如路径错误、网络问题、用户禁用图像加载）时，浏览器会显示alt文本。更重要的是，屏幕阅读器会读出alt文本，帮助视障用户理解图像内容。
    2. SEO：搜索引擎通过alt文本理解图像内容，有助于图像搜索排名。
  - 编写原则：alt文本应简洁、准确地描述图像的内容或功能。如果图像是一个链接，alt文本应描述链接的目标。
    <img src="dog.jpg" alt="一只在草地上奔跑的金毛犬">
    <img src="search-icon.png" alt="搜索"> (如果作为搜索按钮的一部分)
- width 和 height：
  - 指定图像的宽度和高度，单位是像素（默认）或百分比（但不推荐为<img>用百分比，除非在特定布局约束下）。
    <img src="photo.jpg" alt="照片" width="300" height="200">
  - 优点：
    1. 页面加载性能：如果在HTML中指定了width和height，浏览器在加载图像之前就能知道图像的尺寸，并为其预留空间。这样可以防止页面内容在图像加载过程中发生跳动（layout shift），提升用户体验。
  - 缺点：
    1. 响应式设计挑战：固定尺寸不利于响应式设计。在响应式设计中，图像尺寸通常由CSS控制（例如 max-width: 100%; height: auto;），以适应不同屏幕大小。
  - 现代实践：
    - 即使主要通过CSS控制尺寸，也建议在HTML的<img>标签中提供图像的原始（或期望的宽高比的）width和height属性。这有助于浏览器计算宽高比并预留空间，减少布局抖动，同时CSS仍然可以覆盖这些值来实现响应式。
    - 例如：<img src="landscape.jpg" alt="风景" width="1600" height="900" style="max-width: 100%; height: auto;"> (内联style仅为示例，通常在外部CSS中)
- title：提供额外信息，鼠标悬停时显示为提示框（不应用于替代alt）。
- srcset 和 sizes：HTML5新增，用于实现响应式图像。
  - srcset：允许你为不同屏幕分辨率、像素密度或视口大小提供多个图像源。浏览器会根据当前条件选择最合适的图像加载。
    - 基于像素密度：
      <img srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" src="image-1x.jpg" alt="描述">
      (1x, 2x, 3x 是像素密度描述符)
    - 基于视口宽度（配合sizes）：
      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 600px) 480px, 800px" src="image-medium.jpg" alt="描述">
      (500w, 1000w 是图像宽度描述符，告诉浏览器这些图片的真实宽度)
  - sizes：定义图像在不同视口条件下的显示尺寸。它帮助浏览器从srcset中选择最佳图像。
    - sizes="(max-width: 600px) 480px, 800px" 意味着：
      - 如果视口宽度最大为600px，图像将占据480px的宽度。
      - 否则（视口宽度大于600px），图像将占据800px的宽度。
  - 使用srcset和sizes可以显著提升性能，避免在小屏幕设备上加载不必要的大图。
- loading：HTML新增特性，浏览器支持逐步普及
  - 控制图片的加载方式，主要用于懒加载（lazy loading）。
  - loading="lazy"：延迟加载视口外的图像，直到用户滚动到它们附近时才开始加载。可以提升初始页面加载速度和节省带宽。
  - loading="eager"：立即加载图像（默认行为）。
  - 示例：<img src="image.jpg" alt="描述" loading="lazy" width="400" height="300">
常见的图像格式：
- JPEG (JPG)：有损压缩，适合照片和复杂彩色图像。
- PNG (Portable Network Graphics)：无损压缩，支持透明度，适合图标、Logo、需要清晰线条的图像。
- GIF (Graphics Interchange Format)：支持动画和简单透明度（不支持半透明），颜色数量有限（256色），适合简单动画和色彩较少的图像。
- SVG (Scalable Vector Graphics)：基于XML的矢量图形格式。无限缩放而不失真，文件通常较小，适合图标、Logo、图表。可以直接嵌入HTML或通过<img>引用。
- WebP：由Google开发的新一代图像格式，同时提供有损和无损压缩，支持透明度和动画，通常比JPEG和PNG文件更小且质量相当。浏览器支持度越来越高。可以使用<picture>元素提供WebP版本并回退到其他格式。
<figure> 和 <figcaption>：HTML5新增
- 当一个图像（或其他媒体内容，如代码块、图表）需要一个标题或说明时，应使用<figure>元素将其包裹起来，并使用<figcaption>为其提供标题。
- 这提供了更强的语义关联。
- 示例：<figure> <img src="chart.png" alt="2023年销售额图表"> <figcaption>图1：2023年度公司销售额增长图表。</figcaption> </figure>

图像是沟通信息的重要媒介。在架构层面，合理优化图片（选择合适的格式、压缩、使用响应式图像、懒加载）对于提升网站性能和用户体验至关重要，这直接关系到项目的“可扩展性”——一个能承载高流量的网站必须在资源加载上做到极致。alt文本则保证了信息传递的“容错性”和“可访问性”。

4.4 列表 (Lists)

HTML提供了三种主要的列表类型，用于组织和呈现一系列相关项目。

4.4.1 无序列表 (Unordered Lists): `<ul>` 和 `<li>`

作用：用于表示一组没有特定顺序的项目。浏览器通常在每个列表项前显示一个项目符号（如圆点、方块）。
标签：
- <ul> (Unordered List)：定义无序列表的开始和结束。
- <li> (List Item)：定义列表中的每一个项目。<li>必须是<ul>（或<ol>）的直接子元素。
示例：<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
CSS控制项目符号：可以通过CSS的 list-style-type 属性改变项目符号的样式（如 disc, circle, square, none），或者使用 list-style-image 设置自定义图像作为项目符号。

4.4.2 有序列表 (Ordered Lists): `<ol>` 和 `<li>`

作用：用于表示一组有特定顺序的项目。浏览器通常在每个列表项前显示一个数字或字母序号。
标签：
- <ol> (Ordered List)：定义有序列表的开始和结束。
- <li> (List Item)：定义列表中的每一个项目。
示例：<ol> <li>第一步：打开电脑</li> <li>第二步：连接网络</li> <li>第三步：打开浏览器</li> </ol>
<ol> 的属性：
- type：指定列表项标记的类型。
  - "1"：数字（默认值）
  - "A"：大写字母
  - "a"：小写字母
  - "I"：大写罗马数字
  - "i"：小写罗马数字
  - 示例：<ol type="a">
- start：HTML5，指定列表项标记的起始值（必须是数字，即使type是字母或罗马数字）。
  - 示例：<ol type="1" start="5"> (从5开始编号)
  - <ol type="a" start="3"> (从c开始编号)
- reversed：HTML5，布尔属性，如果存在，则列表项标记将按降序排列。
  - 示例：<ol reversed> 或 <ol start="3" reversed> (标记为 3, 2, 1)

4.4.3 描述列表/定义列表 (Description Lists): `<dl>`, `<dt>`, `<dd>`

作用：用于表示一系列术语及其对应的描述/定义。
标签：
- <dl> (Description List)：定义描述列表的开始和结束。
- <dt> (Description Term / Definition Term)：定义列表中的一个术语或名称。
- <dd> (Description Details / Definition Description)：提供对应<dt>的描述或定义。
结构：一个<dl>可以包含多个<dt>–<dd>对。一个<dt>后面可以跟一个或多个<dd>，或者多个<dt>后面可以跟一个或多个共享的<dd>。
示例：<dl> <dt>HTML</dt> <dd>超文本标记语言，用于创建网页结构。</dd> <dt>CSS</dt> <dd>层叠样式表，用于控制网页的视觉表现。</dd> <dd>一种声明性语言，用于描述文档的呈现。</dd> <dt>JavaScript</dt> <dt>JS</dt> <dd>一种脚本语言，用于实现网页的交互功能。</dd> </dl> 浏览器通常会将<dd>内容进行缩进显示。

4.4.4 嵌套列表 (Nested Lists)

列表可以相互嵌套，形成更复杂的层级结构。只需将一个完整的列表（<ul>或<ol>）放在另一个列表的<li>元素内部即可。

示例：<ul> <li>水果 <ul> <li>苹果</li> <li>香蕉 <ol> <li>青香蕉</li> <li>黄香蕉</li> </ol> </li> <li>橙子</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>番茄</li> </ul> </li> </ul> 浏览器会自动为嵌套列表使用不同的项目符号或编号样式（可以通过CSS自定义）。

列表是组织信息的常用手段。在导航菜单（通常用<ul>）、步骤说明（通常用<ol>）、术语解释（用<dl>）等场景中非常有用。它们的结构化特性使其易于被CSS样式化，并且对可访问性友好。从信息架构的角度看，列表的嵌套层级反映了信息的从属关系和分类。

4.5 表格 (Tables): `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`

HTML表格用于显示二维的表格数据（行和列）。

重要提示：在早期Web开发中，表格常被滥用于页面布局。这是非常不好的做法。表格应该只用于呈现真正的表格数据。对于页面布局，应使用CSS（如Flexbox, Grid）。
基本结构：
- <table>：定义表格的开始和结束。
- <tr> (Table Row)：定义表格中的一行。
- <td> (Table Data / Table Cell)：定义表格行中的一个单元格（数据单元格）。
- <th> (Table Header Cell)：定义表头单元格。<th>中的文本通常会居中并加粗显示。它具有语义含义，表示这是列或行的标题。
<table> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>30</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>25</td> <td>上海</td> </tr> </table>
更完整的表格结构 (语义化)：
为了更好的结构和可访问性，以及方便CSS样式化和JavaScript操作，可以使用以下标签将表格划分为表头、表体和表脚：
- <thead> (Table Head)：定义表格的头部区域。通常包含表头行（<tr>内含<th>）。一个表格只能有一个<thead>。
- <tbody> (Table Body)：定义表格的主体内容区域。可以有一个或多个<tbody>。
- <tfoot> (Table Foot)：定义表格的脚部区域。通常包含汇总信息或注释。一个表格只能有一个<tfoot>。
注意：<thead>, <tbody>, <tfoot> 必须是<table>的直接子元素，并且应按此顺序出现（尽管浏览器可能会先渲染<tfoot>在底部，即使它在HTML中写在<tbody>之前）。它们内部包含<tr>。<table> <thead> <tr> <th>产品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>笔记本电脑</td> <td>¥5000</td> <td>1</td> <td>¥5000</td> </tr> <tr> <td>鼠标</td> <td>¥100</td> <td>2</td> <td>¥200</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总计</td> <td>¥5200</td> </tr> </tfoot> </table>
<caption> (Table Caption)：
- 为表格提供一个标题或说明。
- 必须是<table>元素的第一个子元素。
- 示例：<table> <caption>2023年第一季度销售报告</caption> <thead>...</thead> <tbody>...</tbody> </table>
单元格合并：
- colspan 属性 (用于<td>或<th>)：使单元格横跨（合并）指定的列数。
- rowspan 属性 (用于<td>或<th>)：使单元格横跨（合并）指定的行数。
- 示例：<table> <tr> <th rowspan="2">类别</th> <th colspan="2">详情</th> </tr> <tr> <th>项目A</th> <th>项目B</th> </tr> <tr> <td rowspan="2">水果</td> <td>苹果</td> <td>香蕉</td> </tr> <tr> <td>橙子</td> <td>葡萄</td> </tr> </table> (在上面的<tfoot>例子中，<td colspan="3">总计</td> 就是一个跨3列的单元格。)
表格的列分组：<colgroup> 和 <col>
- <colgroup> 用于对表格中的一列或多列进行分组，以便统一设置样式。
- <col> 用于定义<colgroup>内每一列的属性（主要是span属性来指定该<col>代表多少列，以及样式相关的属性如width，但通常样式通过CSS更好）。
- <colgroup>和<col>必须是<table>的直接子元素，位于<caption>之后，<thead>之前。
- 示例：<table> <colgroup> <col style="background-color: #f0f0f0;">  <col span="2" style="width: 150px;">  <col>  </colgroup> <thead>...</thead> <tbody>...</tbody> </table> 虽然可以用style属性，但更推荐用CSS类来控制<col>的样式。
可访问性增强：scope 属性 (用于<th>)
- scope 属性明确地将表头单元格与其关联的数据单元格联系起来，对屏幕阅读器等辅助技术非常重要。
- scope="col"：表示该<th>是其所在列的表头。
- scope="row"：表示该<th>是其所在行的表头。
- scope="colgroup"：表示该<th>是其所在列组的表头。
- scope="rowgroup"：表示该<th>是其所在行组的表头。
- 示例：<table> <thead> <tr> <th scope="col">姓名</th> <th scope="col">年龄</th> </tr> </thead> <tbody> <tr> <th scope="row">张三</th>  <td>30</td> </tr> <tr> <td>李四</td> <td>25</td> </tr> </tbody> </table> 对于简单表格，浏览器通常能推断关系，但对于复杂表格，显式使用scope非常有益。

表格是结构化数据的强大工具。在项目开发中，当需要展示清晰的行列数据时，表格是首选。从可维护性角度看，使用<thead>, <tbody>, <tfoot>以及scope属性，不仅使表格结构更清晰，也大大提升了其可访问性。

4.6 表单 (Forms): `<form>`, `<input>`, `<label>`, 等

表单是HTML中用于收集用户输入的核心机制，是Web应用交互性的基础。

4.6.1 `<form>` 元素

作用：定义一个HTML表单，用于包含各种表单控件（如文本框、按钮、复选框等）。
核心属性：
- action：指定当表单提交时，数据将被发送到的服务器端URL（处理脚本的地址）。
  - 如果为空，则提交到当前页面的URL。
  - 示例：<form action="/submit-form.php" method="post">
- method：指定提交表单数据时使用的HTTP方法。
  - get (默认值)：
    - 表单数据会附加到action URL的末尾，以?分隔，键值对形式（如 name=value&name2=value2）。
    - URL长度有限制（通常约2000字符）。
    - 提交的数据在浏览器历史记录和服务器日志中可见，不应用于敏感数据（如密码）。
    - 适合用于提交非敏感的、幂等的操作（如搜索查询）。
    - 可以被收藏为书签。
  - post：
    - 表单数据包含在HTTP请求的**请求体（request body）**中发送，不会显示在URL中。
    - 没有数据长度限制。
    - 比GET更安全，应用于包含敏感数据、文件上传或可能改变服务器状态的操作。
    - 不能被收藏为书签。
    - 浏览器通常会在用户尝试刷新一个POST请求结果页面时给出警告（防止重复提交）。
- enctype (Encoding Type)：指定在发送到服务器之前应该如何编码表单数据。仅当 method="post" 时使用。
  - application/x-www-form-urlencoded (默认值)：所有字符都会进行编码（空格转换为+，特殊字符转换为ASCII HEX值）。
  - multipart/form-data：**当表单包含文件上传控件 (<input type="file">) 时，必须使用此值。**数据不会被编码。
  - text/plain：空格转换为+，但不对特殊字符编码（主要用于调试）。
- name：为表单指定一个名称（主要用于JavaScript访问，或一个页面有多个表单时）。
- target：指定在何处显示提交表单后从服务器接收到的响应。与<a>标签的target属性类似（_self, _blank, _parent, _top, framename）。
- autocomplete：HTML5，指定表单是否应启用自动完成功能。
  - "on" (默认)：浏览器可以根据用户之前输入的值自动完成表单字段。
  - "off"：禁用自动完成。
  - 可以为整个表单设置，也可以为单个输入字段设置。
- novalidate：HTML5，布尔属性。如果存在，则在提交表单时禁用浏览器内置的表单验证功能。
<form action="/register" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>  </form>

4.6.2 `<label>` 元素

作用：为表单控件（如<input>, <textarea>, <select>）定义一个标签（说明性文本）。
重要性：
1. 可访问性：屏幕阅读器会读出与控件关联的<label>文本，帮助视障用户理解输入字段的用途。
2. 用户体验：点击<label>文本时，会自动将焦点设置到其关联的表单控件上（对于复选框和单选按钮，点击标签会切换其选中状态），扩大了可点击区域。
关联方式：
1. 显式关联 (推荐)：使用<label>的for属性，其值与对应表单控件的id属性值相同。<label for="username">用户名：</label> <input type="text" id="username" name="username">
2. 隐式关联：将表单控件嵌套在<label>元素内部。此时不需要for和id。<label> 邮箱： <input type="email" name="email"> </label> 虽然隐式关联也能工作，但显式关联通常更健壮，尤其是在复杂布局或使用辅助技术时。

4.6.3 `<input>` 元素 (核心输入控件)

作用：<input>元素是最重要和最通用的表单控件，用于创建多种类型的输入字段。它是一个空元素。
type 属性：决定了<input>元素的行为和外观。
- type="text"：单行文本输入框（默认值）。
  - 常用属性：name, id, value (初始值), placeholder (提示文本), maxlength (最大长度), minlength (最小长度 HTML5), required (必填 HTML5), readonly, disabled, pattern (正则表达式验证 HTML5), size (可见宽度字符数)。
  <label for="fname">名字：</label> <input type="text" id="fname" name="firstName" placeholder="请输入您的名字" required>
- type="password"：密码输入框，输入的字符会被掩码（如星号或圆点）。<label for="pwd">密码：</label> <input type="password" id="pwd" name="password" minlength="8" required>
- type="email"：HTML5，用于输入电子邮件地址。浏览器可能会进行基本的格式验证，并可能在移动设备上显示带有@符号的键盘。<label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="user@example.com">
- type="number"：HTML5，用于输入数字。通常会显示步进器（上下箭头）来增减数值。
  - 常用属性：min (最小值), max (最大值), step (步长)。
  <label for="quantity">数量：</label> <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
- type="tel"：HTML5，用于输入电话号码。浏览器通常不做特定验证（因为电话号码格式多样），但可能在移动设备上显示数字键盘。可以使用pattern属性进行格式验证。<label for="phone">电话：</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{8}">
- type="url"：HTML5，用于输入URL。浏览器可能会进行基本的格式验证。<label for="website">网址：</label> <input type="url" id="website" name="website" placeholder="https://example.com">
- type="date", type="month", type="week", type="time", type="datetime-local"：HTML5，用于选择日期和时间。浏览器通常会提供一个日期/时间选择器界面。
  - 其值和显示格式可能因浏览器和操作系统区域设置而异。
  - value应为特定格式（如date: YYYY-MM-DD）。
  <label for="birthdate">生日：</label> <input type="date" id="birthdate" name="birthdate" min="1900-01-01" max="2023-12-31">
- type="search"：HTML5，用于搜索框。行为类似text，但在某些浏览器中可能带有清除按钮（’x’）。
- type="color"：HTML5，提供一个颜色选择器。<label for="favcolor">喜欢的颜色：</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000">
- type="range"：HTML5，创建一个滑块控件，用于选择一个范围内的数值。
  - 常用属性：min, max, step, value.
  <label for="volume">音量：</label> <input type="range" id="volume" name="volume" min="0" max="100" value="50"> <output for="volume" name="volumeOutput">50</output>  <script> const volume = document.getElementById('volume'); const volumeOutput = document.querySelector('output[for="volume"]'); volume.oninput = () => { volumeOutput.value = volume.value; }; </script>
- type="checkbox"：复选框，允许用户从一组选项中选择零个或多个。
  - 多个相关的复选框应具有相同的name属性（如果希望服务器端将它们作为数组处理，可以在name后加[]，如 name="hobbies[]"，具体取决于后端如何处理）。
  - value属性指定当复选框被选中并提交时发送到服务器的值。
  - checked布尔属性使其默认选中。
  <fieldset> <legend>兴趣爱好：</legend> <input type="checkbox" id="coding" name="hobbies" value="coding" checked> <label for="coding">编程</label><br> <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">阅读</label><br> <input type="checkbox" id="sports" name="hobbies" value="sports"> <label for="sports">运动</label> </fieldset>
- type="radio"：单选按钮，允许用户从一组选项中选择一个。
  - 同一组内的所有单选按钮必须具有相同的name属性值，这样才能确保一次只能选中一个。
  - value属性指定当该单选按钮被选中并提交时发送到服务器的值。
  - checked布尔属性使其默认选中（一组中只能有一个checked）。
  <fieldset> <legend>性别：</legend> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <input type="radio" id="other" name="gender" value="other"> <label for="other">其他</label> </fieldset>
- type="file"：文件选择控件，允许用户从其设备选择一个或多个文件进行上传。
  - 必须将表单的enctype属性设置为multipart/form-data。
  - accept属性可以建议接受的文件类型（MIME类型或文件扩展名），例如 accept="image/png, image/jpeg" 或 accept=".pdf,.doc".
  - multiple布尔属性允许用户选择多个文件。
  <label for="avatar">上传头像：</label> <input type="file" id="avatar" name="avatarFile" accept="image/*">
- type="submit"：提交按钮。点击后会触发表单的提交行为（将数据发送到action URL）。
  - value属性定义按钮上显示的文本（默认为”Submit”或本地化版本）。
  - 也可以使用<button type="submit">文本</button>，通常更灵活。
  <input type="submit" value="注册">
- type="reset"：重置按钮。点击后会将表单内所有控件的值重置为其初始值。
  - value属性定义按钮上显示的文本（默认为”Reset”或本地化版本）。
  - 谨慎使用，因为用户可能会误点导致已输入内容丢失。
  <input type="reset" value="清空表单">
- type="button"：通用按钮。本身没有默认行为，通常需要配合JavaScript来定义其功能。
  - value属性定义按钮上显示的文本。
  - 也可以使用<button type="button">文本</button>，更推荐。
  <input type="button" value="点击我" onclick="alert('你好！');">
- type="image"：图像提交按钮。行为类似type="submit"，但显示为一个可点击的图像。
  - src属性指定图像URL。
  - alt属性提供替代文本。
  - 当用户点击图像按钮提交表单时，还会额外发送点击位置的X和Y坐标（如 x=10&y=20）。
  <input type="image" src="submit-button.png" alt="提交表单" width="100" height="30">
- type="hidden"：隐藏输入字段。对用户不可见，但其name和value会随表单一起提交。
  - 常用于存储一些需要传递给服务器但不需要用户直接交互的数据，如会话ID、CSRF令牌、跟踪信息等。
  <input type="hidden" name="userId" value="12345"> <input type="hidden" name="csrf_token" value="abcdef123456">
<input> 的通用属性 (除了上面各类型特有的)：
- name：非常重要。定义输入字段的名称，用于在提交表单时标识该字段的数据。没有name属性的字段数据不会被提交（除了某些特殊情况如图像按钮）。
- id：唯一标识符，主要用于<label>的for属性或JavaScript操作。
- value：输入字段的初始值或当前值。对于text, password, hidden, submit, reset, button, email, number等是直接的文本值；对于checkbox和radio是选中时提交的值；对于file是只读的，表示所选文件名。
- placeholder：HTML5，在输入字段为空时显示的提示性文本，当用户开始输入时消失。
- required：HTML5，布尔属性。表示该字段在提交前必须填写。浏览器会进行基本验证。
- disabled：布尔属性。禁用该输入字段，用户无法交互，其值也不会随表单提交。
- readonly：布尔属性。使输入字段只读，用户无法修改其值，但其值会随表单提交。
- autofocus：HTML5，布尔属性。页面加载时自动将焦点设置到该输入字段。一个页面只应有一个autofocus。
- form：HTML5，允许<input>元素在物理上位于<form>标签外部，但逻辑上属于该表单。其值为关联表单的id。
  <input type="text" name="outside_field" form="myForm">
- formaction, formenctype, formmethod, formnovalidate, formtarget：HTML5，这些属性可以用于提交按钮（type="submit"或type="image"），以覆盖<form>元素上对应的action, enctype, method, novalidate, target属性值。这使得一个表单可以有多个具有不同提交行为的按钮。<form id="dataForm" action="/default_submit" method="post"> <input type="text" name="data"> <input type="submit" value="常规提交"> <input type="submit" value="特殊提交" formaction="/special_submit" formmethod="get"> </form>

4.6.4 `<textarea>` 元素

作用：定义一个多行文本输入区域。
属性：
- name, id, required, disabled, readonly, placeholder, autofocus, form.
- rows：指定文本区域可见的行数。
- cols：指定文本区域可见的列数（字符宽度）。
- maxlength, minlength：HTML5，最大/最小字符数。
- wrap：HTML5，指定提交时文本如何换行。
  - "soft" (默认)：提交时按实际换行，显示时自动换行。
  - "hard"：提交时包含文本区内的实际换行符（需要同时设置cols属性）。
  - "off": (HTML5中已废弃，行为类似soft)
内容：<textarea>的开始和结束标签之间的文本会作为其初始内容。<label for="comments">评论：</label><br> <textarea id="comments" name="comments" rows="5" cols="40" placeholder="请在此处输入您的评论...">这里是默认文本。</textarea>

4.6.5 `<button>` 元素

作用：定义一个可点击的按钮。比<input type="button/submit/reset">更灵活，因为<button>标签之间可以包含HTML内容（如文本、图像、<strong>等）。
type 属性：
- type="submit" (默认值)：作为提交按钮，点击时提交表单。
- type="reset"：作为重置按钮，点击时重置表单。
- type="button"：作为普通按钮，没有默认行为，通常配合JavaScript使用。
属性：
- name, value (提交时会发送，若type="submit"), disabled, autofocus, form.
- formaction, formenctype, formmethod, formnovalidate, formtarget (同<input type="submit">)。
示例：<button type="submit" name="action" value="save"> <img src="save-icon.png" height="16"> 保存草稿 </button> <button type="button" onclick="showHelp()">帮助</button> 强烈建议总是为<button>明确指定type属性，因为在不同浏览器或不同表单上下文中，其默认type可能不一致（尽管标准规定是submit）。

4.6.6 `<select>` 和 `<option>` 元素 (下拉列表)

作用：创建下拉列表，允许用户从预定义的选项中选择一个或多个。
标签：
- <select>：定义下拉列表的容器。
  - 属性：name, id, required, disabled, autofocus, form.
  - multiple：布尔属性，如果存在，则允许用户选择多个选项（通常按住Ctrl/Cmd或Shift键）。此时下拉列表外观可能会变为一个可滚动的列表框。
  - size：如果设置了multiple，size定义了列表中可见选项的行数。
- <option>：定义下拉列表中的一个选项。必须是<select>或<optgroup>的子元素。
  - value：必需。指定当该选项被选中并提交时发送到服务器的值。如果省略，则提交<option>标签之间的文本内容。
  - selected：布尔属性，使该选项默认被选中。
  - disabled：布尔属性，禁用该选项。
  - label：为选项提供一个较短的标签，某些浏览器可能会在特定情况下显示它（例如在<optgroup>中）。如果存在，<option>的文本内容仍是主要显示。
示例 (单选)：<label for="city">选择城市：</label> <select id="city" name="city"> <option value="">--请选择--</option> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> <option value="shenzhen" disabled>深圳 (暂不可选)</option> </select>
示例 (多选)：<label for="fruits">选择水果 (可多选)：</label> <select id="fruits" name="selectedFruits" multiple size="3"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> <option value="grape">葡萄</option> </select> (提交时，如果选择了苹果和橙子，数据可能是 selectedFruits=apple&selectedFruits=orange，具体取决于后端处理)

4.6.7 `<optgroup>` 元素 (选项分组)

作用：在<select>列表中对相关的<option>进行分组。
属性：
- label：必需。指定该选项组的标题，浏览器会将其显示为不可选的组标签。
- disabled：布尔属性，禁用该组下的所有选项。
示例：<select name="vehicle"> <optgroup label="瑞典车"> <option value="volvo">沃尔沃</option> <option value="saab">萨博</option> </optgroup> <optgroup label="德国车" disabled> <option value="mercedes">梅赛德斯</option> <option value="audi">奥迪</option> </optgroup> </select>

4.6.8 `<fieldset>` 和 `<legend>` 元素 (表单控件组)

作用：用于将表单中相关的控件组合在一起，通常会在视觉上用边框包围。
标签：
- <fieldset>：定义表单控件组的容器。
  - 属性：name (可用于通过form.elements访问), disabled (禁用组内所有控件), form.
- <legend>：为<fieldset>提供一个标题。必须是<fieldset>的第一个子元素。
示例：<form> <fieldset> <legend>个人信息：</legend> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"> </fieldset> <fieldset name="shippingAddress"> <legend>配送地址</legend> <label for="address">地址：</label> <input type="text" id="address" name="address"><br> <label for="zip">邮编：</label> <input type="text" id="zip" name="zip"> </fieldset> <input type="submit" value="提交"> </form> 使用<fieldset>和<legend>不仅在视觉上组织了表单，更重要的是在语义上将相关的控件分组，对可访问性非常有益。

4.6.9 `<output>` 元素

作用：HTML5，用于显示计算结果或用户操作的输出。
属性：
- for：一个以空格分隔的ID列表，表示该输出与哪些控件的值相关。
- form：关联表单的ID。
- name：输出字段的名称。
示例 (见 type="range" 的例子)。<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" name="a" value="0"> + <input type="number" id="b" name="b" value="0"> = <output name="result" for="a b">0</output> </form>

4.6.10 `<datalist>` 和 `<input list="...">` (建议列表)

作用：HTML5，为<input>元素提供一个预定义的选项列表（建议列表）。用户可以从列表中选择，也可以输入自己的值。
标签：
- <datalist>：包含一系列<option>元素。需要一个id属性。
- <input>：通过list属性（其值为<datalist>的id）与<datalist>关联。适用的input类型包括 text, search, url, tel, email, number, range, color, date等。
示例：<label for="browser">选择或输入浏览器：</label> <input list="browsers" id="browser" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> <option value="Opera"> </datalist> <option>内也可以包含文本，某些浏览器可能会显示更丰富的下拉提示（但value是关键）。

4.6.11 HTML5 表单验证

HTML5引入了内置的客户端表单验证功能，可以在数据发送到服务器之前捕获一些常见的输入错误。

通过属性实现：
- required：字段必填。
- minlength, maxlength：最小/最大长度（用于文本类输入）。
- min, max, step：最小/最大值，步长（用于数字、范围、日期类型）。
- type (如 email, url, number)：隐式格式验证。
- pattern：使用正则表达式自定义验证模式。
  <input type="text" name="zipcode" pattern="[0-9]{5}" title="请输入5位数字邮编">
  (title属性在验证失败时可以作为提示信息的一部分)
CSS伪类配合验证：
- :valid / :invalid：根据输入值是否符合验证规则来应用样式。
- :required / :optional：根据字段是否设置了required属性来应用样式。
- :in-range / :out-of-range：根据值是否在min/max范围内应用样式。
- :user-invalid (较新)：当用户与无效字段交互后才匹配。
input:invalid { border: 2px solid red; } input:valid { border: 1px solid green; }
禁用验证：
- 在<form>上添加novalidate属性。
- 在提交按钮上添加formnovalidate属性。
重要提示：客户端验证（HTML5或JavaScript）只能作为提升用户体验和减少不必要服务器请求的辅助手段，绝不能替代服务器端验证！ 用户可以轻易绕过客户端验证（例如通过浏览器开发者工具）。所有关键的业务逻辑和数据校验必须在服务器端进行，以确保数据安全和完整性。

表单是Web应用与用户交互的桥梁。从架构师的角度看，设计良好的表单需要考虑：

清晰的结构和语义：使用<label>, <fieldset>, <legend>等。
用户体验：提供明确的指示（placeholder）、合适的输入类型（如type="email"会调起特定键盘）、即时反馈（HTML5验证）。
可访问性：确保所有控件都有关联的标签，键盘可操作。
数据完整性和安全性：客户端验证 + 强制的服务器端验证。
渐进增强：即使JavaScript被禁用，HTML5表单也应能基本工作。

表单的设计，就像设计一个API接口，需要明确输入（各个字段），处理过程（客户端/服务器端验证和逻辑），以及输出/反馈（成功消息、错误提示）。

第五章：HTML5语义化标签 —— 构建更具意义的页面结构

在HTML5之前，开发者经常大量使用通用的<div>标签来划分页面区域，并通过id或class来赋予其含义，例如 <div id="header">, <div class="sidebar">, <div id="footer">。这种做法虽然可行，但缺乏机器可读的语义。

HTML5引入了一系列新的语义化块级标签，它们明确地描述了其内容的角色或类型，使得页面结构更清晰，对搜索引擎、辅助技术和开发者都更加友好。

我的“独立文件优先”原则在软件开发中强调模块化和职责分离。类似地，HTML5的语义化标签鼓励我们将页面内容划分为具有明确语义的“独立区块”，每个区块承载特定的功能或信息类型，从而提升整个文档的可理解性和可维护性。

5.1 为何要用语义化标签？

提升可访问性 (Accessibility)：
- 屏幕阅读器等辅助技术可以更好地理解页面结构，为用户提供更准确的导航和内容解读。例如，用户可以快速跳转到<main>内容区，或在多个<nav>元素之间切换。
SEO优化 (Search Engine Optimization)：
- 搜索引擎更容易理解页面各个部分的重要性及内容主题，有助于提升搜索排名。例如，<article>中的内容可能被认为比<aside>中的内容更核心。
代码可读性和可维护性：
- 语义化的标签使得HTML代码结构一目了然，开发者更容易理解每个部分的作用，便于团队协作和后期维护。
设备兼容性/未来适应性：
- 当新的设备或浏览器出现时，具有清晰语义的文档更容易被正确解析和呈现。

5.2 常用的HTML5语义化标签

5.2.1 `<header>`

作用：定义文档或某个区块（如<article>, <section>）的页眉/介绍性内容。
通常包含：
- 标题元素（<h1> – <h6>）
- Logo或图标
- 搜索表单
- 导航链接（<nav>）
- 作者信息等
一个页面可以有多个<header>元素。例如，整个页面可以有一个主<header>，每个<article>内部也可以有自己的<header>。
不要与<head>元素混淆。<head>包含文档元数据，不直接显示；<header>包含实际显示的介绍性内容。
示例：<body> <header>  <img src="logo.png" alt="网站Logo"> <h1>网站标题</h1> <nav>...</nav> </header> <main> <article> <header>  <h2>文章标题</h2> <p>作者：张三，发布于：<time datetime="2023-10-27">10月27日</time></p> </header> <p>文章内容...</p> </article> </main> </body>

5.2.2 `<nav>`

作用：定义文档的导航链接部分。
通常用于：主导航菜单、侧边栏导航、页内目录、分页链接等。
并非所有链接组都适合放在<nav>中。例如，页脚的版权信息、服务条款等链接通常不放在<nav>里，除非它们构成了网站的主要导航结构。
一个页面可以有多个<nav>元素。
示例：<nav> <ul> <li><a href="/">首页</a></li> <li><a href="/products">产品</a></li> <li><a href="/about">关于我们</a></li> <li><a href="/contact">联系方式</a></li> </ul> </nav>

5.2.3 `<main>`

作用：定义文档或应用的主要内容区域。此内容应是文档核心主题的直接相关或扩展。
一个文档中应该只有一个<main>元素。它不应该包含在<article>, <aside>, <footer>, <header>, <nav>元素内部。
<main>元素的内容应该是唯一的，不应包含在多个页面重复出现的内容，如侧边栏、网站logo、版权信息等。
它旨在帮助辅助技术和搜索引擎快速定位页面的核心内容。
示例：<body> <header>...</header> <nav>...</nav> <main> <h1>主要内容标题</h1> <p>这里是页面的核心信息...</p> <article>...</article> <section>...</section> </main> <footer>...</footer> </body>

5.2.4 `<article>`

作用：定义页面中一段独立的、可以独立分发或重用的内容单元。
适合的内容：
- 博客帖子
- 论坛帖子
- 新闻报道
- 用户评论
- 产品卡片
- 任何可以被单独拿出来阅读而上下文仍然完整的内容。
<article>可以嵌套。例如，一篇博客文章是<article>，其下的每条用户评论也可以是嵌套的<article>。
通常应包含一个标题（通常是<h2>–<h6>，如果<article>是<main>的直接子元素且是页面主要内容，其主标题也可能是<h1>，但这取决于整体页面结构策略）。
示例：<main> <article> <h2>如何学习HTML</h2> <p>学习HTML是成为Web开发者的第一步...</p> <footer>  <p>标签：HTML, Web开发</p> </footer> </article> <article> <h2>CSS简介</h2> <p>CSS用于为HTML文档添加样式...</p> </article> </main>

5.2.5 `<section>`

作用：定义文档中的一个独立区块或章节，通常具有一个标题。它将内容按主题进行分组。
<section>与<article>的区别：
- <article>是更专门化的<section>，它强调内容的独立性和可分发性。
- <section>用于对文档内容进行更一般性的分块，当内容不适合用<article>, <aside>, <nav>等更具体的语义标签时，可以使用<section>。
- 经验法则：如果一段内容可以被聚合到RSS源中，那它可能是一个<article>。如果只是文档大纲中的一个逻辑分组，那它可能是一个<section>。
每个<section>通常都应该有一个标题（<h1>–<h6>）。
示例：<article> <h1>我的旅行日记</h1> <section> <h2>第一天：抵达巴黎</h2> <p>...</p> </section> <section> <h2>第二天：参观卢浮宫</h2> <p>...</p> <section>  <h3>蒙娜丽莎</h3> <p>...</p> </section> </section> </article>

5.2.6 `<aside>`

作用：定义与页面主要内容不直接相关但又有所关联的补充性内容。通常表现为侧边栏、引言、广告、相关链接组等。
如果<aside>位于<article>内部，其内容应与该<article>相关。
如果<aside>位于<article>外部（例如作为<main>的子元素），其内容应与整个页面主要内容相关。
示例：<main> <article> <h1>文章标题</h1> <p>主要内容...</p> </article> <aside>  <h3>相关文章</h3> <ul> <li><a href="#">另一篇文章</a></li> <li><a href="#">又一篇文章</a></li> </ul> </aside> </main>

5.2.7 `<footer>`

作用：定义文档或某个区块的页脚。
通常包含：
- 作者信息
- 版权信息 (<small>)
- 联系方式 (<address>)
- 相关链接（如服务条款、隐私政策）
- 回到顶部链接
- 有时也包含次要导航
一个页面可以有多个<footer>元素。例如，整个页面可以有一个主<footer>，每个<article>或<section>也可以有自己的<footer>。
示例：<body> <header>...</header> <main> <article> ... <footer>  <p>发布于 <time>...</time> | 分类：Web开发</p> </footer> </article> </main> <footer>  <p>© 2023 我的网站. <a href="/privacy">隐私政策</a></p> <address>联系我：<a href="mailto:webmaster@example.com">webmaster@example.com</a></address> </footer> </body>

5.2.8 `<figure>` 和 `<figcaption>`

已在图像部分介绍过，它们用于包裹独立的媒体内容（如图像、图表、代码块、引用）及其可选的标题/说明。
<figure>的内容应是自包含的，可以从主流程中移走而不影响文档的意义。
示例：<figure> <img src="flowchart.svg" alt="项目流程图"> <figcaption>图 2.1：项目开发的主要流程</figcaption> </figure> <figure> <pre><code> function hello() { console.log("Hello, semantic HTML!"); } </code></pre> <figcaption>代码片段 1：一个简单的JavaScript函数</figcaption> </figure>

5.3 何时使用 `<div>`？

虽然HTML5引入了许多语义化标签，但<div>并没有被废弃。当没有其他更合适的语义化标签来表示某个内容区块时，仍然可以使用<div>。

<div>是一个通用的块级容器，主要用于：

纯粹的样式化目的：当需要一个额外的包裹元素来应用CSS样式或布局（例如，创建一个flex容器或grid容器，而这个容器本身没有特定的语义含义）。
JavaScript操作的钩子：当需要一个特定的元素来被JavaScript选取和操作，而没有语义标签适用时。

原则：优先使用语义化标签。只有在找不到合适的语义标签时，才回退到使用<div>（或<span>用于内联内容）。 过度使用<div>（所谓的 “divitis”）会使HTML结构扁平化，失去语义，降低可维护性和可访问性。

5.4 语义化标签与文档大纲

HTML5的语义化标签（特别是<article>, <section>, <nav>, <aside>）以及标题标签（<h1>–<h6>）共同构成了文档的大纲 (outline)。这个大纲对于辅助技术和搜索引擎理解页面结构至关重要。

HTML5有一个“文档大纲算法”的概念，它允许每个<article>或<section>内部可以从<h1>开始自己的标题层级，而不论其在外部文档中的嵌套深度。例如：

<body>
    <h1>网站标题 (Level 1)</h1>
    <section>
        <h2>章节A (Level 2)</h2>
        <section>
            <h3>小节A1 (Level 3)</h3>
        </section>
    </section>
    <article>
        <h2>文章B (Level 2)</h2> <!-- 理论上，这里可以用<h1>，其级别由article界定 -->
        <section>
            <h3>文章B的小节1 (Level 3)</h3> <!-- 同理，这里可以用<h2> -->
        </section>
    </article>
</body>

然而，实际浏览器和辅助技术对这个“隐式大纲算法”的支持并不完美且存在争议。目前的最佳实践和更安全的做法仍然是：在整个文档中保持一个逻辑一致的、递增的标题层级（不要轻易跳级），即使在使用<article>和<section>时也是如此。 这意味着<article>或<section>内的第一个标题级别应该根据其在整体页面结构中的位置来确定，而不是总是从<h1>开始。

例如，如果页面主标题是<h1>，那么顶级<article>或<section>的标题通常应为<h2>。

使用HTML5语义化标签是现代Web开发的标准。它体现了对内容结构的深刻理解和对可访问性、SEO及代码质量的重视。这与架构设计中强调模型清晰、职责分明、易于理解和扩展的原则是高度一致的。

第六章：多媒体与嵌入内容

现代网页不仅仅是文本和图片，还常常包含音频、视频以及来自其他网站的嵌入内容。HTML5为这些需求提供了强大的原生支持。

6.1 音频 (`<audio>`)

作用：HTML5新增，用于在网页中嵌入音频内容。
基本用法：<audio src="audio.mp3" controls> 您的浏览器不支持 HTML5 audio 标签。 </audio>
- src：指定音频文件的URL。
- controls：布尔属性。如果存在，浏览器会显示标准的音频控件（播放/暂停、音量、进度条等）。
- <audio>标签之间的文本内容是为不支持<audio>标签的旧版浏览器提供的回退信息。
使用 <source> 提供多种格式：
不同的浏览器可能支持不同的音频格式（如 MP3, WAV, Ogg Vorbis）。为了最大化兼容性，可以使用<source>元素提供多种格式的音频源。浏览器会选择第一个它支持的格式进行播放。<audio controls autoplay muted loop preload="auto"> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.wav" type="audio/wav"> 您的浏览器不支持 HTML5 audio 标签。 </audio>
- <source> 元素：
  - src：音频文件URL。
  - type：音频文件的MIME类型（如 audio/mpeg 代表MP3，audio/ogg 代表Ogg，audio/wav 代表WAV）。提供type属性有助于浏览器快速判断是否支持该格式，而无需下载文件。
<audio> 的常用属性：
- autoplay：布尔属性。如果存在，音频会在页面加载完成后自动播放。注意：大多数现代浏览器出于用户体验考虑，会限制或阻止带有声音的自动播放，除非用户与页面有过交互，或者音频是静音的 (muted)。
- muted：布尔属性。如果存在，音频会默认静音。通常与autoplay配合使用以允许自动播放。
- loop：布尔属性。如果存在，音频播放结束后会自动重新开始。
- preload：提示浏览器如何以及何时加载音频文件。
  - "none"：不预加载音频。用户点击播放时才开始加载。
  - "metadata"：只预加载音频的元数据（如时长、尺寸）。
  - "auto" (默认值)：浏览器自行决定预加载整个音频文件还是部分。
- controlsList (实验性/部分支持)：允许对原生控件进行一些自定义，例如 controlsList="nodownload" 可以尝试移除下载按钮。

6.2 视频 (`<video>`)

作用：HTML5新增，用于在网页中嵌入视频内容。
基本用法：<video src="video.mp4" width="640" height="360" controls poster="poster.jpg"> 您的浏览器不支持 HTML5 video 标签。 </video>
- src：视频文件的URL。
- width, height：设置视频播放器的尺寸（像素）。与<img>类似，提供这些有助于浏览器预留空间。
- controls：布尔属性。显示标准视频控件。
- poster：指定一个图像URL，在视频加载完成前或用户点击播放前显示为占位图。
使用 <source> 提供多种格式：
与音频类似，不同浏览器支持不同的视频格式（如 MP4 (H.264), WebM (VP8/VP9), Ogg Theora）。<video width="640" height="360" controls autoplay muted loop preload="metadata"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt" default> <track label="中文" kind="captions" srclang="zh-CN" src="captions_zh.vtt"> </video>
- <source> 元素：
  - src：视频文件URL。
  - type：视频文件的MIME类型（如 video/mp4, video/webm, video/ogg）。可能还需要包含编解码器信息以获得更精确的浏览器判断，例如 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'。
<video> 的常用属性：
- autoplay, muted, loop, preload：与<audio>的同名属性作用类似。同样，带声音的autoplay会受到浏览器限制。
- playsinline：布尔属性。在iOS上，默认情况下视频会全屏播放。设置此属性可以使视频在页面内联播放。
- disablepictureinpicture：布尔属性，尝试禁用画中画模式。
<track> 元素 (文本轨道)：
- HTML5新增，用于为媒体元素（<audio>或<video>）指定外部文本轨道，如字幕、标题、描述等。
- 属性：
  - kind：轨道的类型。
    - "subtitles"：字幕，翻译对话内容，用于观众不理解音频语言的情况。
    - "captions"：隐藏式字幕（CC），除了对话，还包括声音效果和提示，用于听障用户或静音观看。
    - "descriptions"：音频描述，为视障用户描述视频中的视觉信息。
    - "chapters"：章节标记，用于导航。
    - "metadata"：供脚本使用的元数据轨道，用户不可见。
  - src：必需。指向包含轨道文本的文件URL（通常是WebVTT格式，.vtt文件）。
  - srclang：必需（如果kind="subtitles"）。轨道的语言代码（如 “en”, “zh-CN”）。
  - label：必需。在浏览器提供的轨道选择菜单中显示的轨道标题。
  - default：布尔属性。如果存在，表示该轨道应默认启用（每种kind只能有一个default）。
WebVTT (Web Video Text Tracks) 文件格式示例 (subtitles_en.vtt)：WEBVTT 00:00:01.000 --> 00:00:03.500 Hello everyone, and welcome! 00:00:04.000 --> 00:00:06.000 Today we're talking about HTML5 video.

使用HTML5原生的<audio>和<video>标签，使得在网页中集成多媒体变得前所未有的简单，无需依赖Flash等第三方插件。从架构层面，这意味着更少的外部依赖和更好的跨平台兼容性。提供多种媒体格式和文本轨道，则体现了对用户体验和可访问性的全面考虑。

6.2 嵌入其他内容 (`<iframe>`)

作用：<iframe> (Inline Frame) 用于在当前HTML文档中嵌入另一个独立的HTML文档。
可以用来嵌入：
- 来自其他网站的页面（如地图、社交媒体插件、视频网站的分享播放器）。
- 自己网站的其他页面。
基本用法：<iframe src="https://www.example.com" width="800" height="600" name="myInlineFrame"> <p>您的浏览器不支持 iframe。</p> </iframe>
- src：要嵌入的页面的URL。
- width, height：设置iframe的尺寸。
- name：为iframe指定一个名称，可以被链接的target属性或JavaScript引用。
- <iframe>标签之间的内容是当浏览器不支持iframe时的回退信息。
<iframe> 的重要属性：
- sandbox：HTML5，用于对嵌入的内容施加安全限制，以增强安全性。
  - 如果只设置sandbox属性而没有值，则会应用所有限制。
  - 可以指定一些豁免值（用空格分隔）来放宽某些限制：
    - allow-forms：允许表单提交。
    - allow-scripts：允许执行脚本（但不能创建弹出窗口）。
    - allow-same-origin：允许将嵌入的内容视为与父文档同源（需要谨慎使用）。
    - allow-popups：允许弹出窗口（如window.open()）。
    - allow-modals：允许打开模态对话框。
    - allow-pointer-lock：允许指针锁定API。
    - allow-top-navigation：允许嵌入的内容通过导航改变顶级浏览上下文。
    - allow-top-navigation-by-user-activation：仅当用户交互触发时，才允许改变顶级导航。
    - 等等。
  - 示例：<iframe src="ad.html" sandbox="allow-scripts allow-forms"></iframe> (允许脚本和表单，但其他如弹出窗口、插件等仍被禁止)。
  - 强烈建议对来自不可信来源的iframe内容使用sandbox属性。
- allow：HTML5（取代了旧的allowfullscreen, allowpaymentrequest等），用于通过Permissions Policy（以前叫Feature Policy）控制iframe可以访问的浏览器特性。
  - 示例：
    <iframe src="map.html" allow="geolocation 'src'; fullscreen 'none'"></iframe>
    (允许iframe源自src的同源内容访问地理位置，但不允许全屏。)
    (语法比较复杂，'src'指iframe的源，'self'指父文档源，*指所有源，'none'指禁用。)
- loading：HTML新增特性，与<img>的loading属性类似，支持"lazy"实现iframe的懒加载。
  <iframe src="comments.html" loading="lazy" width="100%" height="300"></iframe>
- allowfullscreen (已由allow="fullscreen"取代，但旧属性仍有一定兼容性)：布尔属性，允许iframe内容进入全屏模式。
- referrerpolicy：控制发送到iframe源的HTTP Referer头部。
安全和性能考量：
- 安全：iframe嵌入的内容运行在自己的上下文中，但仍可能存在安全风险（如点击劫持）。使用sandbox和allow属性，以及确保嵌入的内容来自可信来源，至关重要。
- 性能：每个iframe都会创建一个独立的文档环境，加载和渲染它需要额外的资源和时间，可能会影响主页面的性能。谨慎使用，并考虑懒加载。
- 内容阻塞：某些网站通过X-Frame-Options HTTP头部或Content-Security-Policy的frame-ancestors指令来阻止自己的页面被嵌入到iframe中。
替代方案：
- 对于某些特定内容（如视频、地图），许多服务提供商会提供专门的嵌入代码（通常也是基于iframe，但已配置好），或者提供API供JavaScript动态加载内容，这可能比直接iframe一个通用页面更好。
- 如果只是想在自己网站内重用HTML片段，服务器端包含（SSI）、JavaScript模板引擎或现代前端框架的组件化可能是更合适的选择。

<iframe>是一个强大的工具，但也可能带来复杂性。在架构上，引入iframe意味着在你的应用中开辟了一个“黑盒”区域，你需要仔细管理其边界（通过sandbox等）以确保整体系统的稳定和安全。

6.3 `<embed>` 和 `<object>` (旧版嵌入方式)

在HTML5的<audio>, <video>, <svg>以及更强大的<iframe>出现之前，<embed>和<object>是嵌入各种外部内容（如Flash动画、PDF文档、Java Applet、其他HTML等）的主要方式。

<embed>：
- 最初并非标准HTML的一部分，但被广泛支持。HTML5将其标准化。
- 用法：<embed src="plugin.swf" type="application/x-shockwave-flash" width="300" height="200">
- src：资源URL。
- type：资源的MIME类型。
- width, height：尺寸。
- 其他属性特定于所嵌入的插件或内容类型。
<object>：
- 更通用、更标准化的嵌入标签，可以嵌入多种类型的对象。
- 它可以通过嵌套<param>元素向插件传递参数。
- 也可以包含回退内容。
- 用法：<object data="movie.swf" type="application/x-shockwave-flash" width="400" height="300"> <param name="movie" value="movie.swf"> <param name="quality" value="high">  <p>Flash plugin is required to view this content. You can also <a href="movie.swf">download the file</a>. </p> </object>
  - data：资源URL。
  - type：资源MIME类型。
  - <param name="name" value="value">：向插件传递参数。

现代实践：

对于音频和视频，优先使用HTML5的<audio>和<video>标签。
对于SVG图像，可以直接在HTML中编写SVG代码，或使用<img>标签引用.svg文件，或使用<object>。
对于嵌入其他网页，优先使用<iframe>。
由于Flash等插件技术已逐渐被淘汰，<embed>和<object>用于嵌入插件的场景越来越少。
<object>仍然可以用于嵌入PDF等特定文档类型，如果浏览器有相应插件或内置支持的话。

总的来说，HTML5为多媒体和内容嵌入提供了更现代化、更标准化的解决方案，减少了对第三方插件的依赖，提升了安全性和可访问性。作为架构师，我会优先推荐使用这些HTML5原生特性。

第七章：HTML验证与最佳实践 —— 编写高质量代码的准则

编写有效的HTML不仅仅是让页面看起来正确，更重要的是确保代码的质量、可维护性、可访问性和跨浏览器兼容性。遵循最佳实践并验证你的HTML是实现这些目标的关键步骤。

7.1 HTML验证

什么是HTML验证？
HTML验证是检查你的HTML代码是否符合W3C（万维网联盟）制定的HTML标准和规范的过程。验证器会检查语法错误、不正确的标签使用、缺失的必需属性、不当的嵌套等问题。
为何要验证HTML？
1. 捕获错误：帮助发现并修复可能导致渲染问题或行为异常的错误。
2. 提升跨浏览器兼容性：符合标准的HTML更有可能在不同浏览器中表现一致。
3. 确保可访问性：有效的HTML是构建可访问网站的基础。许多可访问性问题源于无效的HTML。
4. 提高可维护性：结构良好、无错误的代码更易于理解和维护。
5. SEO优势：虽然搜索引擎对轻微的HTML错误有一定的容忍度，但严重错误或大量错误可能会影响爬取和索引。有效的HTML通常被认为是高质量页面的一个信号。
6. 专业素养：编写有效的HTML是专业Web开发者的基本要求。
如何验证HTML？
- W3C Markup Validation Service：这是官方的、最权威的HTML验证工具。
  - 网址：https://validator.w3.org/
  - 你可以通过三种方式验证：
    1. Validate by URI：输入公开可访问的网页URL。
    2. Validate by File Upload：上传本地的HTML文件。
    3. Validate by Direct Input：直接粘贴HTML代码片段。
- 浏览器开发者工具：现代浏览器（如Chrome, Firefox, Edge）的开发者工具通常也包含HTML检查功能，可以指出一些明显的错误，但它们不如W3C验证器全面和严格。
- 代码编辑器/IDE插件：许多代码编辑器（如VS Code）有HTML linter或validator插件，可以在你编写代码时提供实时反馈。
常见的验证错误类型：
- 未闭合的标签。
- 不正确的标签嵌套（如块级元素在内联元素内）。
- 使用了废弃的标签或属性。
- 必需属性缺失（如<img>的alt，除非明确）。
- id属性值不唯一。
- 特殊字符未正确转义。
- DOCTYPE声明缺失或不正确。

7.2 HTML编码最佳实践

遵循这些最佳实践可以帮助你编写更清晰、更健壮、更易于维护的HTML代码。这些实践很多都与我作为架构师在软件工程中推崇的原则相通，如代码规范、模块化、文档化等。

始终包含 <!DOCTYPE html>：
确保它是文档的第一行，以触发标准模式渲染。
使用有意义的 <title>：
简洁、描述性强，包含关键词。
声明字符编码 <meta charset="UTF-8">：
尽早放在<head>内。
设置视口 <meta name="viewport" ...>：
为了响应式设计和移动设备友好性。
使用小写标签名和属性名：
例如，用<p>而不是<P>，用class而不是CLASS。这是一种广泛接受的约定。
始终为属性值加引号：
推荐使用双引号 "。例如 class="my-class" 而不是 class=my-class。
闭合所有非空元素标签：
例如 <div>...</div>, <p>...</p>。空元素如 <img>, <br> 不需要显式闭合标签（在HTML5中，<br /> 的斜杠是可选的，但 <br> 更常见）。
正确嵌套标签：
遵循块级元素和内联元素的嵌套规则。避免不当嵌套。
使用语义化标签：
优先选择HTML5语义化标签（<article>, <section>, <nav>, <footer>, <header>, <main>, <aside>, <figure>, <figcaption>, <time>等）来描述内容结构，而不是仅仅依赖<div>和<span>。
为图片提供有意义的 alt 文本：
这对于可访问性和SEO至关重要。如果图片纯粹是装饰性的，使用。
合理使用标题层级 (<h1>–<h6>)：
保持逻辑顺序，不要跳级。一个页面通常只有一个<h1>。不要为了样式而滥用标题。
为表单控件关联 <label>：
使用for和id属性进行显式关联，提升可访问性和用户体验。
保持HTML结构清晰，CSS负责样式，JavaScript负责行为：
遵循“关注点分离”原则。避免在HTML中过度使用内联样式（style属性）或内联脚本事件处理器（如onclick属性，除非非常简单或特定情况）。将CSS放在外部样式表，JavaScript放在外部脚本文件。
缩进和格式化代码：
使用一致的缩进（通常是2个或4个空格）来反映HTML的层级结构，使代码更易读。 <div><p><span>文字</span></p></div>  <div> <p> <span>文字</span> </p> </div>
添加注释：
对复杂的HTML结构或不明显的代码段添加注释 ，解释其目的或用法。但不要过度注释显而易见的内容。注释应帮助他人（或未来的你）理解代码。
避免不必要的标签：
如果一个<div>或<span>没有特定的语义或样式/脚本需求，它可能是不必要的。保持标记简洁。
考虑可访问性 (A11y)：
除了alt文本和<label>，还需注意：
- 确保键盘可导航性（所有交互元素都应能通过Tab键访问）。
- 颜色对比度（虽然这更多是CSS的范畴，但设计时需考虑）。
- 使用ARIA属性（Accessible Rich Internet Applications）来增强复杂UI组件的可访问性（这是一个更高级的主题，但值得了解）。
优化性能：
- 压缩HTML（移除不必要的空格、注释，通常由构建工具完成）。
- 优化图像（选择合适的格式、压缩、使用srcset和loading="lazy"）。
- 异步加载或延迟加载非关键CSS和JavaScript。
- 合理使用<iframe>并考虑懒加载。
定期验证代码：
在开发过程中和部署前使用W3C验证器检查HTML。
保持学习和更新：
Web标准和最佳实践在不断发展。关注W3C、MDN Web Docs等资源，保持知识更新。

这些最佳实践，就像软件开发中的编码规范和设计模式，旨在提高代码质量、协作效率和项目的长期健康。作为一名架构师，我始终认为，对细节的关注和对规范的遵守，是构建大型、复杂、可扩展系统的基石。HTML虽然看似简单，但良好的HTML实践是整个Web应用成功的起点。

第八章：简单实例 —— 构建一个完整的个人简介页面

理论学习之后，让我们通过一个实际例子来巩固所学的HTML知识。我们将创建一个简单的个人简介页面，其中会用到前面章节介绍的多种HTML元素和语义化标签。

页面目标：

包含一个主标题。
一个导航栏。
一个介绍区域，包含个人头像、姓名、简短描述。
一个“关于我”的详细介绍部分。
一个“我的技能”列表。
一个“联系方式”的表单（仅结构，不处理提交）。
一个页脚，包含版权信息。

HTML代码 (profile.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="张三的个人简介页面，介绍其技能和经验。">
    <title>张三的个人主页</title>
    <!-- 在这里可以链接外部CSS文件，我们暂时省略样式 -->
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        /* 为演示添加一些基本样式，实际项目中应放在外部CSS文件 */
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; }
        .container { width: 80%; margin: auto; overflow: hidden; padding: 0 20px; }
        header { background: #333; color: #fff; padding-top: 30px; min-height: 70px; border-bottom: #77aaff 3px solid; }
        header a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; }
        header ul { padding: 0; margin: 0; list-style: none; float: right; }
        header li { display: inline; padding: 0 20px 0 20px; }
        header #branding { float: left; }
        header #branding h1 { margin: 0; }
        main { padding: 20px 0; }
        article#about-me img { float: left; margin-right: 20px; border-radius: 50%; width:150px; height:150px; object-fit:cover;}
        .skills-list { list-style-type: square; }
        form label { display: block; margin-bottom: 5px; }
        form input[type="text"], form input[type="email"], form textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            box-sizing: border-box; /* 确保padding不影响总宽度 */
        }
        form input[type="submit"] {
            background-color: #333;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        form input[type="submit"]:hover { background-color: #77aaff; }
        footer { background: #333; color: #fff; text-align: center; padding: 20px; margin-top: 20px; }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <h1><a href="profile.html">张三</a> <small>的个人主页</small></h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#skills">我的技能</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <article id="about-me">
            <header>
                <h2>欢迎来到我的主页</h2>
            </header>
            <figure>
                <img src="https://via.placeholder.com/150/007bff/FFFFFF?Text=头像" alt="张三的头像" width="150" height="150">
                <figcaption style="display:none;">张三的头像占位图</figcaption> <!-- 通常figcaption对用户可见，这里为了占位图不显示文字 -->
            </figure>
            <h3>我是张三</h3>
            <p>一名充满热情的Web开发者，专注于构建高效、美观且用户友好的网站和应用程序。我对新技术充满好奇，并乐于接受挑战。</p>
            
            <section id="about">
                <h3>更详细的关于我</h3>
                <p>我拥有超过5年的Web开发经验，精通前端和后端技术栈。我坚信代码不仅要能工作，更要易于理解和维护——这正是我在架构设计中所追求的。在我的职业生涯中，我参与了多个大型项目的设计与开发，从需求分析到系统部署，积累了丰富的实战经验。我擅长将复杂问题分解为可管理的模块，并采用敏捷开发方法来确保项目按时高质量交付。</p>
                <p>除了技术工作，我还喜欢阅读、旅行和摄影，这些爱好帮助我拓宽视野，并为我的工作带来新的灵感。我认为持续学习是个人成长的关键，因此我经常参加行业研讨会，并积极在开源社区贡献代码。</p>
            </section>
        </article>

        <section id="skills">
            <h2>我的技能</h2>
            <p>以下是我掌握的一些主要技术和工具：</p>
            <ul class="skills-list">
                <li><strong>编程语言:</strong> Python (Flask, Django), JavaScript (React, Vue, Node.js), HTML5, CSS3</li>
                <li><strong>数据库:</strong> MySQL, PostgreSQL, MongoDB</li>
                <li><strong>版本控制:</strong> Git, GitHub</li>
                <li><strong>DevOps:</strong> Docker, Jenkins</li>
                <li><strong>其他:</strong> API设计, 微服务架构, 云计算 (AWS)</li>
            </ul>
            <p>我还具备以下软技能：</p>
            <ol type="a">
                <li>优秀的问题解决能力</li>
                <li>良好的沟通与团队协作</li>
                <li>项目管理与领导力</li>
                <li>快速学习新技术的能力</li>
            </ol>
        </section>

        <section id="contact">
            <h2>联系我</h2>
            <p>如果您有任何项目合作意向或问题咨询，欢迎通过以下方式联系我：</p>
            <form action="#" method="post"> <!-- action="#" 仅为示例，实际应指向后端处理脚本 -->
                <fieldset>
                    <legend>发送消息</legend>
                    <div>
                        <label for="name">姓名:</label>
                        <input type="text" id="name" name="visitor_name" required placeholder="请输入您的姓名">
                    </div>
                    <div>
                        <label for="email">邮箱:</label>
                        <input type="email" id="email" name="visitor_email" required placeholder="请输入您的邮箱地址">
                    </div>
                    <div>
                        <label for="subject">主题:</label>
                        <input type="text" id="subject" name="subject" placeholder="消息主题">
                    </div>
                    <div>
                        <label for="message">内容:</label>
                        <textarea id="message" name="message" rows="5" required placeholder="请输入您的消息内容..."></textarea>
                    </div>
                    <div>
                        <input type="submit" value="发送消息">
                    </div>
                </fieldset>
            </form>
            <p>您也可以通过以下方式找到我：</p>
            <address>
                邮箱: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
                GitHub: <a href="https://github.com/zhangsan" target="_blank" rel="noopener noreferrer">github.com/zhangsan</a>
            </address>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© <time datetime="2023">2023</time> 张三. 版权所有.</p>
            <p><small>本页面仅为HTML基础教程示例。</small></p>
        </div>
    </footer>
</body>
</html>

代码结构分析：

<!DOCTYPE html>, <html>, <head>, <body>：标准HTML5文档结构。
<head>：
- charset, viewport, description, title：重要的元信息。
- 内嵌了一些基本的CSS样式（在<style>标签中）仅为演示。在实际项目中，这些样式应该放在一个独立的 .css 文件中并通过 <link rel="stylesheet" href="style.css"> 引入。 这正体现了“独立文件优先”和“关注点分离”的原则。
<header> (页面主页眉)：
- 包含网站品牌（<h1>和<small>）和主导航（<nav>内含<ul>和<li>）。
- 导航链接使用了页面内锚点（href="#about"等）。
- <div class="container"> 和 <div id="branding"> 是用于CSS布局和样式的div，因为它们本身没有特定的语义。
<main class="container">：页面的主要内容区域。
- <article id="about-me">：作为主要的独立内容块——个人简介。
  - 内部有自己的<header>（用于“欢迎语”）。
  - <figure>和<img>用于展示头像（使用了placeholder.com的占位图）。
  - 一个简短的介绍段落<h3>和<p>。
  - <section id="about">：作为文章内部的一个主题明确的章节——详细介绍。
- <section id="skills">：另一个与“关于我”同级的主要内容区块——技能列表。
  - 包含无序列表<ul>（用于技术栈）和有序列表<ol>（用于软技能）。
- <section id="contact">：联系方式区块。
  - 包含一个表单<form>，使用了<fieldset>, <legend>, <label>, <input>, <textarea>。
    - action="#" 和 method="post" 仅为示例。
    - 注意input的type属性、placeholder和required的使用。
  - <address>标签用于提供直接联系方式。
<footer> (页面主页脚)：
- 包含版权信息（使用了<time>和<small>）和声明。

思考与架构师视角：

语义化：我们尽可能地使用了HTML5语义化标签（<header>, <nav>, <main>, <article>, <section>, <footer>, <figure>, <address>, <time>），使得页面结构清晰易懂。
模块化：每个<section>和<article>都可以看作一个相对独立的模块。例如，“我的技能”部分如果内容很多，理论上可以拆分成一个独立的“skills.html”页面，然后通过链接导航，这与我提倡的“独立文件优先”理念是相通的。在这个单页面示例中，它们是通过ID划分的独立区域。
可访问性：
- 图片有alt文本。
- 表单控件与<label>通过for和id关联。
- 清晰的标题层级（虽然这里为了简洁，<article>和<section>内部标题从<h2>或<h3>开始，严格遵循了全局层级）。
内容与表现分离：虽然为了演示方便，我们内嵌了一些CSS，但注释中强调了实际项目中应将CSS分离到外部文件。HTML只负责结构和内容。
表单设计：表单结构清晰，使用了<fieldset>和<legend>分组，并为输入字段提供了placeholder和required属性，提升了用户体验和数据初步校验。
扩展性：这种结构化的HTML使得未来添加新的区块（如“我的项目”、“工作经历”）或修改现有内容都相对容易，因为每个部分都有明确的界限和语义。

这个简单的例子展示了如何运用HTML知识来构建一个结构良好、语义清晰的网页。即使是这样一个静态页面，也体现了良好架构设计的一些基本原则：清晰的模块划分、明确的职责分配（HTML负责结构，CSS负责样式）、以及对可维护性和可访问性的考虑。

第九章：超越HTML —— CSS与JavaScript简介

到目前为止，我们深入探讨了HTML，它是构建网页结构和内容的基石。然而，一个只有HTML的网页通常看起来很朴素，并且缺乏交互性。为了创建现代、美观且功能丰富的Web应用，HTML需要与它的两位亲密伙伴协同工作：CSS和JavaScript。

作为一名全栈架构师，我深知技术栈中各个组件的协同配合至关重要。HTML、CSS和JavaScript三者构成了前端开发的核心三驾马车，它们各自承担不同的职责，共同塑造用户所见的Web体验。

9.1 CSS (Cascading Style Sheets – 层叠样式表)

作用：CSS用于描述HTML（或XML，包括SVG、XHTML等）文档的表示和外观。它负责网页的视觉样式，包括：
- 布局 (Layout)：元素的位置、大小、排列方式（如使用Flexbox, Grid）。
- 颜色 (Colors)：文本颜色、背景颜色、边框颜色等。
- 字体 (Fonts)：字体家族、大小、粗细、样式（斜体等）。
- 间距 (Spacing)：内边距 (padding)、外边距 (margin)。
- 背景 (Backgrounds)：背景图片、渐变等。
- 边框 (Borders)：样式、宽度、颜色、圆角。
- 动画与过渡 (Animations & Transitions)：使页面元素动起来。
- 响应式设计 (Responsive Design)：使网页在不同设备（桌面、平板、手机）上都能良好显示。
核心理念：关注点分离 (Separation of Concerns)
HTML负责结构和内容，CSS负责表现和样式。将两者分离有诸多好处：
1. 可维护性：修改页面样式时，无需改动HTML结构，只需编辑CSS文件。
2. 可重用性：一套CSS样式可以应用于多个HTML页面，确保网站视觉风格的统一。
3. 代码简洁性：HTML文件更专注于内容，CSS文件管理所有样式规则。
4. 协作效率：设计师可以专注于CSS，内容编辑者可以专注于HTML。
5. 可访问性：用户可以根据需要禁用或替换样式表，而内容结构依然完整。
引入CSS到HTML的方式：
1. 外部样式表 (External Stylesheet) – 推荐：
  将CSS规则写在一个独立的 .css 文件中，并通过<link>标签在HTML的<head>部分引入。 <link rel="stylesheet" type="text/css" href="styles.css"> /* styles.css 文件内容 */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: navy; } 这是最佳实践，因为它最大化了关注点分离和样式重用。
2. 内部样式表 (Internal Stylesheet)：
  使用<style>标签将CSS规则直接写在HTML文档的<head>部分。<head> <title>My Page</title> <style> body { font-family: Verdana, sans-serif; } p { color: green; } </style> </head> 适用于单个HTML页面特有的少量样式，或者在无法使用外部文件的情况下（如某些邮件模板）。
3. 内联样式 (Inline Styles)：
  使用HTML元素的style属性直接应用CSS规则。<p style="color: red; font-size: 20px;">这是一个红色的段落。</p> 应尽量避免使用，因为它将样式与结构紧密耦合，违反了关注点分离原则，难以维护。仅在非常特殊的情况下（如JavaScript动态修改样式）少量使用。
CSS选择器 (Selectors)：
CSS通过选择器来定位HTML文档中需要应用样式的元素。常见的选择器有：
- 类型选择器 (Type selectors)：选择特定类型的HTML元素 (e.g., p, h1, div)。
- 类选择器 (Class selectors)：选择具有特定class属性的元素 (e.g., .my-class, .important)。
- ID选择器 (ID selectors)：选择具有特定id属性的元素 (e.g., #main-header, #sidebar)。ID在一个页面中必须唯一。
- 属性选择器 (Attribute selectors)：根据元素的属性或属性值选择 (e.g., [type="text"], a[target="_blank"])。
- 伪类 (Pseudo-classes)：选择元素的特定状态或位置 (e.g., :hover, :first-child, :nth-child(n))。
- 伪元素 (Pseudo-elements)：选择元素的特定部分 (e.g., ::before, ::after, ::first-line)。
- 组合选择器 (Combinators)：通过组合其他选择器来定义更复杂的关系 (e.g.,后代选择器 div p, 子选择器 ul > li, 相邻兄弟选择器 h1 + p, 通用兄弟选择器 h1 ~ p)。

学习CSS是一个广阔的领域，它本身就足以成为一门完整的课程。掌握CSS是成为一名前端开发者或全栈开发者的必备技能。

9.2 JavaScript (JS)

作用：JavaScript是一种高级的、解释型的、基于原型（现在也支持类）的、多范式（命令式、函数式、面向对象）的脚本语言。它用于为网页添加交互性、动态行为和复杂功能。
- DOM操作 (Document Object Model)：动态修改HTML结构和内容、改变CSS样式。
- 事件处理 (Event Handling)：响应用户操作（如点击、鼠标移动、键盘输入）或浏览器事件（如页面加载完成、窗口大小改变）。
- 表单验证 (Form Validation)：在客户端进行更复杂的表单数据校验。
- 异步通信 (Asynchronous Communication – AJAX/Fetch API)：在不刷新整个页面的情况下与服务器交换数据，实现动态内容更新。
- 动画 (Animations)：创建复杂的动画效果。
- 数据存储 (Web Storage – localStorage, sessionStorage)：在用户浏览器中存储数据。
- 绘制图形 (Canvas, WebGL)：在浏览器中进行2D和3D图形渲染。
- 以及更多：构建单页面应用 (SPA)、使用第三方库和框架 (如React, Angular, Vue.js, jQuery)、与硬件API交互 (如地理位置、摄像头) 等。
引入JavaScript到HTML的方式：
1. 外部脚本文件 (External Script) – 推荐：
  将JavaScript代码写在一个独立的 .js 文件中，并通过<script>标签的src属性引入。 <script src="myscript.js"></script> // myscript.js 文件内容 document.addEventListener('DOMContentLoaded', function() { const button = document.getElementById('myButton'); if (button) { button.addEventListener('click', function() { alert('按钮被点击了！'); }); } }); 这是最佳实践，因为它促进了代码的模块化、可重用性和可维护性，并允许浏览器缓存脚本文件。
2. 内部脚本 (Internal Script)：
  使用<script>标签将JavaScript代码直接嵌入HTML文档中，通常放在<head>或<body>末尾。<script> function greet() { console.log("Hello from internal script!"); } greet(); </script> 适用于少量、特定于页面的脚本。
3. 内联脚本事件处理器 (Inline Event Handlers) – 不推荐：
  直接在HTML元素的事件属性（如onclick, onmouseover）中写入JavaScript代码。<button onclick="alert('你点击了按钮！'); console.log('不推荐的写法');">点击我</button> 这种方式将行为与结构紧密耦合，难以维护和调试。应优先使用 addEventListener 在外部或内部脚本中绑定事件。
<script>标签的位置和属性：
- 位置：
  - <head>中：脚本会先于HTML内容解析和渲染之前加载执行。如果脚本操作DOM，可能会因DOM未准备好而出错。如果脚本很大或执行慢，会阻塞页面渲染。
  - <body>末尾 (紧邻</body>之前)：推荐做法。确保HTML结构已完全加载并解析完毕，DOM可供脚本操作。用户能更快看到页面内容。
- async属性 (用于外部脚本)：
  <script async src="script.js"></script>
  脚本会异步下载，下载完成后立即执行，不保证执行顺序，可能会阻塞HTML解析。适用于无依赖的独立脚本。
- defer属性 (用于外部脚本)：
  <script defer src="script.js"></script>
  脚本会异步下载，但在HTML文档完全解析完毕后、DOMContentLoaded事件触发之前，按它们在文档中出现的顺序执行。适用于需要操作DOM且有顺序依赖的脚本。
- type="module"：HTML5，允许使用ES6模块（import/export语法）。模块脚本默认具有defer行为。
  <script type="module" src="main.mjs"></script>

JavaScript是一个功能极其强大且生态系统极为庞杂的语言。它是现代Web开发不可或缺的一部分。

9.3 三者如何协同工作

可以把HTML、CSS、JavaScript的关系比作盖房子：

HTML (结构)：像房子的钢筋水泥框架、墙体、房间布局。它定义了“有什么”（一扇门、一扇窗、一个房间）。
CSS (表现)：像房子的装修、油漆颜色、家具风格、壁纸图案。它决定了“看起来怎么样”（门是红色的，窗帘是蓝色的，房间是现代简约风）。
JavaScript (行为)：像房子的电路系统、水管系统、智能家居设备。它决定了“能做什么”（按下开关灯会亮，打开水龙头会出水，窗户可以自动开关）。

这三者通过浏览器协同工作：

浏览器首先解析HTML文档，构建DOM树（Document Object Model），这是一个表示页面结构的树状数据结构。
接着，浏览器解析CSS（来自外部文件、内部<style>块或内联style属性），并将其应用到DOM树的相应节点上，形成渲染树（Render Tree）。
然后，浏览器根据渲染树将页面绘制到屏幕上。
JavaScript引擎会执行<script>标签中的代码。JavaScript可以通过DOM API与DOM树交互（读取、修改、添加、删除节点），也可以修改元素的CSS样式。JavaScript还可以监听事件，当事件发生时执行相应的代码来改变页面内容或行为。

作为一名全栈架构师，我强调在设计系统时，各个组件的职责要清晰，接口要明确。HTML、CSS、JavaScript的这种职责划分正是这种思想的体现。一个良好架构的前端应用，其HTML结构会非常语义化和稳定，CSS实现表现层的高度可定制和可维护，JavaScript则高效地处理用户交互和业务逻辑。

教程总结与展望

恭喜您！通过这篇超过万字的详尽教程，我们一同深入探索了HTML的基础知识，从基本概念、文档结构、核心元素，到语义化标签、多媒体嵌入、表单处理，再到HTML验证与最佳实践，最后还简要介绍了CSS和JavaScript在Web开发中的角色。

我希望通过本教程，您不仅学习了HTML的语法，更能从一名全栈架构师的视角，理解到构建结构良好、语义清晰、可维护、可访问的HTML文档的重要性。这正如我在Python项目开发中始终坚持的“高可维护性与高扩展性”原则——坚实的基础是通往成功的必经之路。HTML作为Web的骨骼，其质量直接影响到后续CSS样式和JavaScript行为的实现效率与稳定性。

核心回顾：

HTML是结构：它定义了网页的内容和组织方式。
语义为王：优先使用语义化标签，使代码更具可读性、可访问性，并对SEO友好。
关注点分离：HTML负责结构，CSS负责表现，JavaScript负责行为。尽量将它们分离到独立的文件中，这与“独立文件优先”的开发理念不谋而合。
验证与最佳实践：编写符合W3C标准的有效HTML，并遵循编码规范，是专业开发者的基本素养。
持续学习：Web技术日新月异，HTML标准也在不断演进。保持好奇心和学习的热情至关重要。

下一步是什么？

掌握了HTML基础后，您的Web开发之旅才刚刚开始。接下来，您可以向以下方向继续深入学习：

CSS深入学习：掌握CSS选择器、盒模型、布局（Flexbox, Grid）、响应式设计、动画、预处理器（Sass/Less）等，让您的网页焕发光彩。
JavaScript编程：学习JavaScript语法、DOM操作、事件处理、异步编程、ES6+新特性，以及流行的前端框架/库（如React, Vue, Angular），为您的网页注入强大的交互能力。
Web可访问性 (A11y)：深入理解如何创建对所有用户（包括残障人士）都友好的Web内容。
Web性能优化：学习如何优化HTML、CSS、JavaScript及媒体资源，提升页面加载速度和运行效率。
版本控制工具 (Git)：学习使用Git进行代码版本管理，这是现代软件开发的必备技能。
后端技术：如果您有志于成为全栈开发者，可以进一步学习一门后端语言（如Python, Node.js, Java, Ruby, PHP等）及其相关框架，以及数据库知识。

记住，理论学习固然重要，但动手实践才能真正巩固知识。尝试自己从头开始构建一些小项目，比如个人博客、作品集网站、简单的在线工具等。在实践中遇到的问题和解决问题的过程，将是您成长最快的途径。

我希望这篇教程能为您打下坚实的HTML基础，并激发您对Web开发的更大兴趣。作为一名架构师，我深知构建任何宏伟“建筑”的第一步都是精心设计和打磨每一块“砖瓦”。HTML就是您Web世界中的第一块重要基石。祝您在Web开发的道路上不断探索，持续进步，创造出卓越的应用！

希望这篇详尽的HTML基础教程符合您的要求。涵盖了HTML的知识点。

1人已评分

赞赏

HTML 基础教程丨入门篇

HTML 基础教程丨入门篇

HTML 基础：构建现代网页的基石

第一章：HTML绪论 —— 网页的骨骼

1.1 什么是HTML？

1.2 HTML简史

1.3 HTML的重要性

第二章：HTML文档基本结构 —— 网页的蓝图

2.1 <!DOCTYPE html> (文档类型声明)

2.2 <html> 元素

2.3 <head> 元素

2.4 <body> 元素

第三章：元素、标签与属性 —— HTML的原子

3.1 HTML元素 (Elements)

3.2 HTML标签 (Tags)

3.2.1 空元素/自闭合元素 (Void Elements / Self-Closing Elements)

3.3 HTML属性 (Attributes)

3.3.1 属性值的引号

3.3.2 常用全局属性

3.3.3 布尔属性 (Boolean Attributes)

3.3.4 自定义数据属性 (Custom Data Attributes)

3.4 元素嵌套 (Nesting Elements)

第四章：核心HTML元素详解 —— 构建网页的砖瓦

4.1 文本元素

4.1.1 标题 (Headings): <h1> – <h6>

4.1.2 段落 (Paragraphs): <p>

4.1.3 文本格式化 (Inline Formatting)

4.1.4 换行与分割线

4.2 链接 (Anchors): <a>

4.3 图像 (Images): <img>

4.4 列表 (Lists)

4.4.1 无序列表 (Unordered Lists): <ul> 和 <li>

4.4.2 有序列表 (Ordered Lists): <ol> 和 <li>

4.4.3 描述列表/定义列表 (Description Lists): <dl>, <dt>, <dd>

4.4.4 嵌套列表 (Nested Lists)

4.5 表格 (Tables): <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

4.6 表单 (Forms): <form>, <input>, <label>, 等

4.6.1 <form> 元素

4.6.2 <label> 元素

4.6.3 <input> 元素 (核心输入控件)

4.6.4 <textarea> 元素

4.6.5 <button> 元素

4.6.6 <select> 和 <option> 元素 (下拉列表)

4.6.7 <optgroup> 元素 (选项分组)

4.6.8 <fieldset> 和 <legend> 元素 (表单控件组)

4.6.9 <output> 元素

4.6.10 <datalist> 和 <input list="..."> (建议列表)

4.6.11 HTML5 表单验证

第五章：HTML5语义化标签 —— 构建更具意义的页面结构

5.1 为何要用语义化标签？

5.2 常用的HTML5语义化标签

5.2.1 <header>

5.2.2 <nav>

5.2.3 <main>

5.2.4 <article>

5.2.5 <section>

5.2.6 <aside>

5.2.7 <footer>

5.2.8 <figure> 和 <figcaption>

5.3 何时使用 <div>？

5.4 语义化标签与文档大纲

第六章：多媒体与嵌入内容

6.1 音频 (<audio>)

6.2 视频 (<video>)

6.2 嵌入其他内容 (<iframe>)

6.3 <embed> 和 <object> (旧版嵌入方式)

第七章：HTML验证与最佳实践 —— 编写高质量代码的准则

7.1 HTML验证

7.2 HTML编码最佳实践

第八章：简单实例 —— 构建一个完整的个人简介页面

第九章：超越HTML —— CSS与JavaScript简介

9.1 CSS (Cascading Style Sheets – 层叠样式表)

9.2 JavaScript (JS)

9.3 三者如何协同工作

教程总结与展望

2.1 `<!DOCTYPE html>` (文档类型声明)

2.2 `<html>` 元素

2.3 `<head>` 元素

2.4 `<body>` 元素

4.1.1 标题 (Headings): `<h1>` – `<h6>`

4.1.2 段落 (Paragraphs): `<p>`

4.2 链接 (Anchors): `<a>`

4.3 图像 (Images): `<img>`

4.4.1 无序列表 (Unordered Lists): `<ul>` 和 `<li>`

4.4.2 有序列表 (Ordered Lists): `<ol>` 和 `<li>`

4.4.3 描述列表/定义列表 (Description Lists): `<dl>`, `<dt>`, `<dd>`

4.5 表格 (Tables): `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`

4.6 表单 (Forms): `<form>`, `<input>`, `<label>`, 等

4.6.1 `<form>` 元素

4.6.2 `<label>` 元素

4.6.3 `<input>` 元素 (核心输入控件)

4.6.4 `<textarea>` 元素

4.6.5 `<button>` 元素

4.6.6 `<select>` 和 `<option>` 元素 (下拉列表)

4.6.7 `<optgroup>` 元素 (选项分组)

4.6.8 `<fieldset>` 和 `<legend>` 元素 (表单控件组)

4.6.9 `<output>` 元素

4.6.10 `<datalist>` 和 `<input list="...">` (建议列表)

5.2.1 `<header>`

5.2.2 `<nav>`

5.2.3 `<main>`

5.2.4 `<article>`

5.2.5 `<section>`

5.2.6 `<aside>`

5.2.7 `<footer>`

5.2.8 `<figure>` 和 `<figcaption>`

5.3 何时使用 `<div>`？

6.1 音频 (`<audio>`)

6.2 视频 (`<video>`)

6.2 嵌入其他内容 (`<iframe>`)

6.3 `<embed>` 和 `<object>` (旧版嵌入方式)