HTML 内容标签

这一课你将能做到

1. 根据内容语义选择正确的标签（标题、段落、列表、链接、图片、表格），而不是滥用 <div>
2. 写出带有替代文本、响应式图片和懒加载属性的 <img> 标签
3. 创建结构化表格和多种类型的列表，并理解它们的默认渲染与可访问性差异

为什么要学

HTML 的核心不是「让文字显示出来」，而是「告诉浏览器和辅助技术这段内容是什么」。你用 <h1> 还是 <div class="big-title">，浏览器看起来可能一样，但对搜索引擎、屏幕阅读器和代码维护者来说完全不同。

CodeForge 的课程卡片列表用 <article> 和 <ul> 构建，课时详情页用 <h1> 到 <h3> 建立大纲层级，登录表单用 <label> 和 <input> 配对。选错标签不会导致页面崩溃，但会让 SEO 分数下降、屏幕阅读器用户迷路、代码可读性变差。

先建立图像

一个典型的 CodeForge 课程详情页内容结构：

<h1>HTML/CSS 基础精讲</h1>
  <p>课程简介...</p>
  <ul>
    <li>36 课时</li>
    <li>配套练习</li>
  </ul>
  <h2>课程大纲</h2>
    <ol>
      <li>网页如何工作</li>
      <li>HTML 文档结构</li>
    </ol>
  <h2>讲师介绍</h2>
    <img src="avatar.jpg" alt="讲师头像">
    <p>讲师简介...</p>
  <a href="#">立即报名</a>

跟着做

步骤 1：标题层级与页面大纲

创建 content.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>
  <h1>CodeForge 前端课程体系</h1>
  <p>系统化的前端学习路径，从基础到进阶。</p>

  <h2>基础阶段</h2>
  <h3>HTML/CSS 基础</h3>
  <p>掌握语义化标签与现代布局。</p>

  <h3>JavaScript 核心</h3>
  <p>理解变量、函数、异步与 DOM 操作。</p>

  <h2>进阶阶段</h2>
  <h3>React 开发实战</h3>
  <p>组件化思维与 Hooks 深度解析。</p>
</body>
</html>

打开页面后按 F12 → Console 输入 document.querySelectorAll('h1, h2, h3')，可以看到浏览器根据标题标签自动构建了文档大纲。屏幕阅读器用户通过标题快速跳转，搜索引擎通过标题层级理解页面结构。

原则：一个页面只有一个 <h1>；标题层级不要跳跃（如 <h1> 后直接 <h3>）；不要用标题标签单纯为了放大字号——字号是 CSS 的职责。

步骤 2：列表的正确用法

在 content.html 的 <body> 中追加：

<!-- 无序列表：顺序不重要，如功能特性 -->
<ul>
  <li>响应式视频播放</li>
  <li>在线代码运行环境</li>
  <li>章节自动保存</li>
</ul>

<!-- 有序列表：顺序重要，如操作步骤 -->
<ol>
  <li>注册账号</li>
  <li>选择课程</li>
  <li>完成第一节学习</li>
</ol>

<!-- 描述列表：键值对，如术语解释 -->
<dl>
  <dt>DOM</dt>
  <dd>文档对象模型，浏览器在内存中维护的页面结构树。</dd>
  <dt>CSSOM</dt>
  <dd>CSS 对象模型，浏览器解析样式表后形成的规则树。</dd>
</dl>

无序列表默认渲染为圆点，有序列表渲染为数字，描述列表渲染为缩进的术语和解释。不要用 <br> 或 <p> 手动模拟列表结构。

步骤 3：图片标签与响应式处理

<!-- 基础写法：alt 是必选项，不是可选项 -->
<img src="course-cover.jpg" alt="HTML/CSS 基础课程封面，蓝色渐变背景">

<!-- 响应式图片：根据设备像素密度和视口宽度提供不同版本 -->
<img
  srcset="cover-400.jpg 400w, cover-800.jpg 800w, cover-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
  src="cover-800.jpg"
  alt="课程封面"
  loading="lazy"
  width="800"
  height="450"
>

srcset 和 sizes 让浏览器根据设备特性自动选择最合适的图片，避免在手机上加载桌面级大图。loading="lazy" 让图片进入视口前不加载，提升首屏速度。width 和 height 预留空间，防止布局偏移（CLS）。

步骤 4：链接的多种形态

<!-- 外部链接：新标签页打开，注意安全和隐私 -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN 文档
</a>

<!-- 页面内锚点：长页面快速跳转 -->
<a href="#syllabus">跳转到课程大纲</a>
...
<h2 id="syllabus">课程大纲</h2>

<!-- 邮件链接 -->
<a href="mailto:support@codeforge.example.com">联系客服</a>

<!-- 下载链接 -->
<a href="materials.zip" download>下载课程资料</a>

rel="noopener noreferrer" 是安全最佳实践：防止新页面通过 window.opener 操纵原页面，同时保护 referrer 隐私。

步骤 5：语义化表格

<table>
  <caption>CodeForge 课程价格表</caption>
  <thead>
    <tr>
      <th scope="col">课程</th>
      <th scope="col">课时</th>
      <th scope="col">价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML/CSS 基础</th>
      <td>12 课时</td>
      <td>免费</td>
    </tr>
    <tr>
      <th scope="row">JavaScript 核心</th>
      <td>24 课时</td>
      <td>¥199</td>
    </tr>
  </tbody>
</table>

<caption> 描述表格内容；<thead> 和 <tbody> 区分表头和数据；scope="col" 和 scope="row" 告诉屏幕阅读器这个 <th> 是列头还是行头。不要滥用表格做页面布局——那是 CSS Grid 和 Flexbox 的职责。

讲清楚要点

1. 语义化是 HTML 的核心价值：<article> 表示独立的内容块，<nav> 表示导航，<time datetime="2026-10-07"> 表示机器可读的时间。语义正确让代码自解释，也利于 SEO 和无障碍访问。

2. <img> 的 alt 不是装饰：屏幕阅读器会朗读 alt 文本；图片加载失败时 alt 会显示在页面上；搜索引擎通过 alt 理解图片内容。纯装饰性图片（如背景图）应使用 CSS background-image，如果必须用 <img>，则 alt=""（空字符串，不是省略）。

3. 标题层级构成文档大纲：屏幕阅读器用户按 H 键在标题间跳转。跳跃的层级（如 <h1> 后直接 <h4>）会让辅助工具困惑。每个页面有且只有一个 <h1>，通常对应页面最核心的主题。

4. 链接的默认行为与安全：target="_blank" 必须配合 rel="noopener noreferrer"。不加 noopener，新页面可以通过 window.opener.location = '恶意网址' 篡改原页面。

5. 列表嵌套要合法：<ul> 的直接子元素只能是 <li>，但 <li> 内部可以再嵌套 <ul> 或其他块级元素。

6. <div> 和 <span> 是无语义的最后选择：只有当没有更合适的语义标签时才用它们。先问自己「这段内容是什么」，再选择标签。

你可能会懵的地方

• 「为什么不能用 <h1> 到 <h6> 来调整字号？」 标题标签的职责是表达层级关系，不是控制外观。如果你只需要大一点的文字，用 <p class="lead"> 配合 CSS font-size。滥用标题会干扰文档大纲和搜索引擎判断。

• 「<b> 和 <strong> 有什么区别？」 <b> 仅表示视觉上的粗体，没有语义。<strong> 表示内容的重要性，屏幕阅读器会改变语调强调，搜索引擎也会识别。同理，<i> 只是斜体，<em> 表示强调。优先使用语义标签。

• 「图片用 <img> 还是 CSS background-image？」 内容图片（如图标、照片、课程封面）用 <img>，因为它们是文档内容的一部分，需要 alt 文本，需要被搜索引擎索引。装饰性图片（如背景纹理、渐变装饰）用 CSS background-image。

• 「srcset 和 sizes 好复杂，能不能只用 width: 100%？」 可以显示，但性能差。srcset 让浏览器根据设备像素密度（DPR）和视口选择分辨率合适的图片，避免在 375px 宽的手机上加载 1920px 的桌面大图，节省流量和加载时间。

• 「表格能用 border 属性吗？」 HTML 的 border、cellpadding、cellspacing 等表现属性已废弃。表格的边框、间距、背景色应完全由 CSS 控制。HTML 只负责结构和语义。

错法对照

错法	问题	正解
用 <div> 代替所有标签	丧失语义，SEO 和无障碍受损	根据内容选择 <article>、<nav>、<section> 等
<img> 不写 alt	屏幕阅读器无法描述，图片失败时无 fallback	始终提供描述性 alt，装饰图用 alt=""
多个 <h1> 做子标题	大纲混乱，SEO 扣分	每页一个 <h1>，子标题用 <h2> 及以下
target="_blank" 不加 rel="noopener"	新页面可操纵原页面，存在安全风险	外部链接始终加 rel="noopener noreferrer"
用 <br><br> 做段落间距	表现逻辑混入结构	用 <p> 分段的 CSS margin 控制间距
用表格做页面布局	结构僵化，移动端灾难，无障碍极差	布局用 CSS Flexbox 或 Grid

卡点急救

1. 图片显示为裂图图标：检查 src 路径是否正确（相对路径基于 HTML 文件位置）；检查文件名大小写是否匹配（Linux 服务器区分大小写）；在 Network 面板查看图片请求状态码。

2. 链接点了没反应：检查 href 是否拼写正确；检查是否被 CSS pointer-events: none 禁用；检查是否有 JS 阻止了默认行为（event.preventDefault()）。

3. 列表前的圆点/数字不显示：检查是否被 CSS list-style: none 重置；检查 <ul>/<ol> 的直接子元素是否都是 <li>（嵌套其他标签会导致渲染异常）。

面试常问

• 「什么是 HTML 语义化？为什么要语义化？」 HTML 语义化是指使用恰当的标签描述内容的结构和含义，而非仅仅关注视觉效果。好处有三：一、SEO 友好，搜索引擎通过 <header>、<article>、<h1> 等标签理解页面结构和重点；二、无障碍访问，屏幕阅读器依赖语义标签为用户提供导航和朗读；三、代码可读性和可维护性提升，开发者能快速理解页面结构。

• 「<img> 的 alt 属性在什么情况下可以省略？」 几乎不应该省略。如果图片是纯装饰性的（如背景纹理、分隔线），且已有 CSS 替代方案，则不应使用 <img>。如果因技术原因必须用 <img> 展示装饰图，应设置 alt=""（空字符串），告诉屏幕阅读器跳过这张图片。内容图片必须有描述性 alt。

• 「如何实现图片懒加载？」 现代浏览器原生支持 loading="lazy" 属性，加在 <img> 标签上即可。图片进入视口一定距离（视浏览器实现而定，通常为视口下方一定偏移量）时才会开始加载。对于不支持该属性的旧浏览器，可使用 Intersection Observer API 配合 data-src 属性实现自定义懒加载。

自测三问

1. 你正在写一个博客文章页面，文章标题、发布日期、正文段落、评论列表分别应该用什么标签？
2. 一张课程封面图，同时需要在桌面端显示 1200px 宽、在手机端显示 400px 宽的版本，应该怎么写？
3. 为什么外部链接使用 target="_blank" 时必须加 rel="noopener noreferrer"？

小结一句话

HTML 内容标签的本质是「用正确的词描述正确的事」——标题表达层级、列表表达集合、链接表达关联、图片表达视觉内容；语义化不仅关乎代码整洁，更关乎 SEO、无障碍访问和长期可维护性。

延伸

• MDN：HTML 文本基础
• MDN：HTML 图片
• 下一课：HTML 表单——收集用户输入的标准方式。