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>

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