HTML 基础
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础。这一章将带你了解 HTML 的核心概念，从文档结构到常用标签，帮助你打下扎实的网页开发基础。
HTML 是什么
HTML 是一种标记语言，不是编程语言。它的作用是告诉浏览器如何展示内容——哪里是标题，哪里是段落，哪里是图片，哪里是链接。浏览器读取 HTML 文件后，会将其渲染成可视化的网页。
HTML 使用"标签"（Tag）来标记内容。标签通常成对出现，包含开始标签和结束标签，中间是被标记的内容。例如 <p>这是一个段落</p>，其中 <p> 是开始标签，</p> 是结束标签，中间的文字就是段落内容。
有些标签是自闭合的，不需要结束标签，比如 <img>、<br>、<input>。这些标签通常用于插入内容或表示某种功能，而不是包裹文本。
文档结构
每个 HTML 文档都遵循一个基本结构。理解这个结构是学习 HTML 的第一步。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容放在这里 -->
</body>
</html>
让我们逐行理解这个结构：
DOCTYPE 声明
<!DOCTYPE html> 是文档类型声明，告诉浏览器这是一个 HTML5 文档。它必须是文档的第一行，位于 <html> 标签之前。虽然看起来像标签，但它实际上不是 HTML 标签，而是一条指令。
这个声明很重要，因为浏览器有多种渲染模式。有了它，浏览器会使用标准模式渲染页面，确保页面在不同浏览器中表现一致。如果没有这个声明，浏览器可能会进入"怪异模式"，导致页面显示异常。
html 元素
<html> 是整个文档的根元素，所有其他元素都包含在其中。lang="zh-CN" 属性指定了文档的语言为简体中文。这个属性对搜索引擎优化和无障碍访问都很重要——屏幕阅读器会根据它选择正确的发音规则，搜索引擎也会用它来判断页面的目标受众。
head 元素
<head> 包含了文档的元数据，这些信息不会直接显示在页面上，但对浏览器和搜索引擎很重要：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是页面的描述，会显示在搜索结果中">
<meta name="keywords" content="HTML, CSS, 教程">
<meta name="author" content="作者名">
<title>页面标题</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
charset 属性指定字符编码为 UTF-8，这是目前最通用的编码方式，能正确显示中文和其他非 ASCII 字符。如果忘记设置，中文可能会显示为乱码。
viewport 元标签对移动端适配至关重要。width=device-width 让视口宽度等于设备宽度，initial-scale=1.0 设置初始缩放比例为 100%。没有这个设置，移动端浏览器可能会以桌面版宽度渲染页面然后缩放显示，导致文字太小难以阅读。
title 元素定义浏览器标签页上显示的标题，也是搜索引擎结果中的可点击标题。标题应该简洁明了，准确描述页面内容。
body 元素
<body> 包含页面的所有可见内容——文字、图片、视频、表单等。用户在浏览器中看到的一切都来自 body 元素的内容。
常用标签详解
标题标签 h1-h6
HTML 提供了六个级别的标题标签，从 <h1> 到 <h6>，重要性依次递减。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题标签的使用有几个重要原则：
每个页面通常只使用一个 <h1> 标签，它代表页面的主标题。搜索引擎会特别关注 <h1> 的内容来判断页面主题。
标题标签应该按层级顺序使用，不要跳级。比如不要从 <h1> 直接跳到 <h3>，中间应该有 <h2>。这种层级结构不仅对 SEO 友好，也方便屏幕阅读器用户理解页面结构。
标题标签是语义化的体现。不要仅仅为了让文字变大而使用标题标签——样式的调整应该用 CSS。标题标签的意义在于表达内容的结构层次。
段落与文本格式
<p>这是一个段落。浏览器会在段落前后自动添加空白。</p>
<p>这是另一个段落。段落之间会有明显的间隔。</p>
<p>段落中可以使用<br>换行标签来强制换行，
而不会产生新的段落间隔。</p>
<p> 标签定义段落。浏览器会在段落前后添加 margin，使段落之间有间隔。如果只是想换行而不想开始新段落，使用 <br> 标签。
除了段落，HTML 还提供了多种文本格式标签：
<p>
<strong>重要文字</strong>会加粗显示，并表示重要性。
<em>强调文字</em>会斜体显示，并表示强调。
<b>粗体文字</b>只是样式上的粗体，没有语义含义。
<i>斜体文字</i>只是样式上的斜体，没有语义含义。
<u>下划线文字</u>会添加下划线。
<s>删除线文字</s>表示不再相关的内容。
<mark>高亮文字</mark>会用背景色标记。
<small>小号文字</small>用于注释或细则。
<sub>下标</sub>和<sup>上标</sup>用于数学公式或脚注。
</p>
这里需要区分语义标签和纯样式标签。<strong> 和 <em> 是语义标签，不仅改变样式，还表达了含义——这对屏幕阅读器和搜索引擎很重要。<b> 和 <i> 只是改变样式，没有语义。在现代开发中，优先使用语义标签。
链接
链接是 HTML 的核心特性，正是它让 Web 成为一个互联的网络。
<!-- 基本链接 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 在新窗口打开 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a>
<!-- 页面内锚点跳转 -->
<a href="#section1">跳转到第一章</a>
<h2 id="section1">第一章</h2>
<!-- 邮件链接 -->
<a href="mailto:[email protected]">发送邮件</a>
<!-- 电话链接 -->
<a href="tel:+8612345678900">拨打电话</a>
<!-- 下载链接 -->
<a href="/files/document.pdf" download>下载文档</a>
href 属性指定链接目标，可以是绝对 URL、相对路径、锚点 ID 或特殊协议。target="_blank" 让链接在新窗口或标签页打开，但要注意这会带来安全风险，建议同时添加 rel="noopener noreferrer"：
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
安全地在新窗口打开
</a>
锚点跳转通过 href="#id" 实现，页面会滚动到对应 ID 的元素位置。这在长页面的目录导航中很常用。
图片
<!-- 基本图片 -->
<img src="photo.jpg" alt="一张风景照片">
<!-- 指定宽高 -->
<img src="photo.jpg" alt="风景照片" width="800" height="600">
<!-- 响应式图片 -->
<img src="photo.jpg" alt="风景照片" style="max-width: 100%; height: auto;">
<!-- 使用 figure 和 figcaption -->
<figure>
<img src="diagram.png" alt="系统架构图">
<figcaption>图1：系统架构示意图</figcaption>
</figure>
src 属性指定图片路径，可以是相对路径或绝对 URL。alt 属性提供替代文本，当图片无法加载时显示，也供屏幕阅读器朗读。alt 文本对 SEO 和无障碍访问都很重要，应该认真填写，描述图片的实际内容。
指定宽高可以帮助浏览器在图片加载前预留空间，避免页面布局抖动。使用 CSS 设置 max-width: 100% 可以让图片在小屏幕上自适应。
<figure> 和 <figcaption> 用于包裹图片及其说明文字，这是语义化的做法，表示它们是一个整体。
列表
HTML 支持三种列表类型：无序列表、有序列表和定义列表。
无序列表使用 <ul> 标签，列表项使用 <li> 标签。默认会在每项前显示圆点：
<ul>
<li>HTML - 结构</li>
<li>CSS - 样式</li>
<li>JavaScript - 交互</li>
</ul>
有序列表使用 <ol> 标签，列表项前会显示序号：
<ol>
<li>学习 HTML 基础</li>
<li>学习 CSS 样式</li>
<li>学习 JavaScript 交互</li>
</ol>
有序列表支持多种属性：
<!-- 从指定数字开始 -->
<ol start="5">
<li>第五项</li>
<li>第六项</li>
</ol>
<!-- 使用字母编号 -->
<ol type="a">
<li>a. 第一项</li>
<li>b. 第二项</li>
</ol>
<!-- 倒序排列 -->
<ol reversed>
<li>第三项</li>
<li>第二项</li>
<li>第一项</li>
</ol>
定义列表使用 <dl> 标签，包含术语 <dt> 和定义 <dd>：
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于定义网页结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于定义网页样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，用于实现网页交互</dd>
</dl>
列表可以嵌套使用，形成层级结构：
<ul>
<li>前端技术
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端技术
<ul>
<li>Python</li>
<li>Java</li>
</ul>
</li>
</ul>
容器元素
HTML 提供了两个通用的容器元素：<div> 和 <span>。
<!-- div 是块级容器，用于组合块级元素 -->
<div class="card">
<h2>卡片标题</h2>
<p>卡片内容</p>
</div>
<!-- span 是行内容器，用于标记文本片段 -->
<p>价格：<span class="price">¥99.00</span></p>
<div> 是块级元素，默认占据整行宽度，前后会有换行。<span> 是行内元素，只占据内容所需的宽度，不会换行。
这两个元素本身没有语义，纯粹用于组织和样式化内容。应该优先使用语义化标签（如 <article>、<section>、<nav> 等），只有在没有合适语义标签时才使用 <div> 和 <span>。
全局属性
全局属性是可以用于任何 HTML 元素的属性，它们提供了通用的功能：
<!-- id：唯一标识符，用于锚点、JavaScript 选择、CSS 选择 -->
<div id="main-content">主内容区域</div>
<!-- class：类名，用于 CSS 样式和 JavaScript 选择 -->
<p class="highlight important">高亮的重要段落</p>
<!-- style：内联样式 -->
<p style="color: red; font-size: 20px;">红色大字</p>
<!-- title：提示文本，鼠标悬停时显示 -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- data-*：自定义数据属性 -->
<div data-user-id="123" data-role="admin">用户信息</div>
<!-- hidden：隐藏元素 -->
<div hidden>这个元素被隐藏了</div>
<!-- lang：元素内容的语言 -->
<p lang="en">This is English text.</p>
<!-- tabindex：键盘导航顺序 -->
<button tabindex="1">第一个</button>
<button tabindex="2">第二个</button>
id 在页面中必须唯一，而 class 可以重复使用。一个元素可以有多个类名，用空格分隔。
data-* 属性用于存储自定义数据，可以通过 JavaScript 的 dataset 属性访问：
const element = document.querySelector('[data-user-id]');
console.log(element.dataset.userId); // "123"
console.log(element.dataset.role); // "admin"
注释
HTML 注释不会被浏览器显示，用于在代码中添加说明：
<!-- 这是一个注释，不会显示在页面上 -->
<!--
多行注释
可以跨越多行
用于详细的代码说明
-->
<!-- TODO: 需要优化这部分结构 -->
<!-- FIXME: 这里有个 bug 需要修复 -->
注释对代码维护很有帮助，但要避免过多注释使代码变得混乱。好的代码结构应该尽量自解释，注释主要用于解释复杂的逻辑或说明暂时不清楚的历史原因。
小结
HTML 是网页的基础，理解文档结构和常用标签是学习 Web 开发的第一步。这一章我们学习了：
- HTML 文档的基本结构，包括 DOCTYPE、html、head、body
- 标题、段落、链接、图片、列表等常用标签
- 块级元素和行内元素的区别
- 全局属性的使用
记住，HTML 的核心是语义化——使用正确的标签表达内容的含义，而不是仅仅关注视觉效果。语义化的 HTML 对搜索引擎优化、无障碍访问和代码维护都有重要意义。
下一章我们将学习 HTML 表单和表格，它们是收集用户数据和展示结构化数据的重要工具。