HTML5 基础内容标签

前置知识#

建议先阅读以下内容再进入本文：

• HTML5 概述与核心特性

0. 核心认知：HTML 标签就是”搭积木”#

在开始背标签之前，先理解一个道理：HTML 标签的本质，是告诉浏览器”这块内容是什么”，而不是”这块内容长什么样”。

记住：选择标签的唯一标准是”这个内容在语义上是什么”，而不是”我希望它长什么样”。样式是 CSS 的工作，不是 HTML 的工作。

0.1 使用频率分级：哪些标签必须背#

讲解：标为”必背”的标签需要你闭着眼睛都能写对，它们是每页网页的基础零件；标为”常用”的标签出现频率也很高，记不住可以靠编辑器提示；“用到再查”和”知道即可”的标签了解存在即可，真到使用时再查文档，不需要浪费记忆空间。表格（table）与定义列表（dl）在下一篇 009-HTML5TableAndStructuredContent 单独讲。

1. 基础文本标签#

基础文本标签用于定义和格式化网页中的文本内容，是构建网页结构的基础。

1.1 标题标签#

标题标签用于定义网页中的标题，从 <h1> 到 <h6>，级别依次递减。

实际开发中，<h3> 以下的标题使用频率急剧下降，多数页面用到 <h3> 就足够了。<h4>-<h6> 只需知道存在，遇到复杂文档结构时再查。

示例：

<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>
<h4>子子章节标题</h4>

讲解：

• <h1> 到 <h6> 表示六级标题，级别逐级降低，构成页面大纲；
• 每页只保留一个 <h1>，后续章节从 <h2> 开始依次递进，不要跳级；
• 标题表达语义层级，字号样式应交给 CSS，而不是用标题硬撑视觉效果。

最佳实践：

• 每个页面应该只有一个 <h1> 标签，用于页面的主标题
• 标题应该按照层级顺序使用，不要跳过层级
• 标题内容应该简洁明了，能够准确反映章节内容

1.2 段落标签#

<p> 标签用于定义段落，是最常用的文本容器之一。 示例：

<p>这是一个段落。段落是网页中最基本的文本单位，用于组织和展示文本内容。</p>
<p>这是另一个段落。每个段落都会自动在前后添加空白，使文本更易于阅读。</p>

1.3 行内文本容器#

<span> 是行内容器，用于对文本的一部分进行样式设置或标记。它的完整讲解（什么时候用、怎么和 div 配合）在 005-HTML5DivSpanContainers，这里只需要知道：span 不换行、宽高由内容撑开。

<p>这是一段文本，其中 <span style="color: red;">红色部分</span> 是使用 span 标签标记的。</p>

1.4 强调标签#

用于对文本进行强调，具有语义含义。

<p>这是 <strong>重要内容</strong>，这是 <em>强调内容</em>。</p>
<p>这是 <mark>突出显示</mark> 的内容。</p>
<p>这是 <small>辅助性内容</small>。</p>
<p>这是 <del>已删除</del> 的内容，这是 <ins>已插入</ins> 的内容。</p>
<p>水的化学式是 H<sub>2</sub>O，2 的平方是 2<sup>2</sup>。</p>

1.5 换行和分割线#

<br> 和 <hr> 都是空元素（没有闭合标签，见 004-HTML5BlockVsInline）。 示例：

<p>这是第一行<br />这是第二行</p>
<hr />
<p>这是分割线下面的内容</p>

2. 列表标签#

列表标签用于组织和展示一系列相关的项目。

2.1 无序列表#

无序列表使用 <ul> 标签定义，列表项使用 <li> 标签定义，默认使用圆点作为列表项标记。 示例：

<h3>购物清单</h3>
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>牛奶</li>
</ul>

2.2 有序列表#

有序列表使用 <ol> 标签定义，列表项使用 <li> 标签定义，默认使用数字作为列表项标记。 属性：

• start: 指定列表的起始编号
• reversed: 倒序列表
• type: 指定编号类型（1, A, a, I, i） 示例：

 <h3>步骤说明</h3>
 <ol>
  <li>准备材料</li>
  <li>混合 ingredients</li>
  <li>加热</li>
  <li>冷却</li>
 </ol>
 <h3>倒序列表</h3>
 <ol reversed>
  <li>第四步</li>
  <li>第三步</li>
  <li>第二步</li>
  <li>第一步</li>
 </ol>
 <h3>字母编号列表</h3>
 <ol type="A">
  <li>选项 A</li>
  <li>选项 B</li>
  <li>选项 C</li>
 </ol>

讲解：

• <ol> 表示有序列表，列表项按编号顺序排列，适合步骤说明；
• start 指定起始编号，reversed 让编号倒序，type 切换编号样式（1/A/a/I/i）；
• 编号由浏览器自动生成，无需手工书写数字，便于插入或删除列表项。

2.3 定义列表#

定义列表 <dl>（术语 + 描述）用于术语表、问答对等”键值对”场景，与表格同属结构化内容，已移到 009-HTML5TableAndStructuredContent 与表格一起讲解。

2.4 嵌套列表#

列表可以嵌套使用，创建层次结构。 示例：

 <h3>课程大纲</h3>
 <ul>
  <li>HTML 基础
  <ul>
  <li>标签语法</li>
  <li>语义化标签</li>
  <li>表单元素</li>
  </ul>
  </li>
  <li>CSS 基础
  <ul>
  <li>选择器</li>
  <li>盒模型</li>
  <li>布局技巧</li>
  </ul>
  </li>
  <li>JavaScript 基础
  <ul>
  <li>变量和数据类型</li>
  <li>控制流</li>
  <li>函数</li>
  </ul>
  </li>
 </ul>

讲解：

• 嵌套列表通过”<li> 内再放 <ul>/<ol>”实现多级层级；
• 浏览器会自动缩进子列表，形成清晰的目录结构；
• 注意嵌套深度不要过深，超过三层时应考虑用页面导航替代。

2.5 三种列表的选择指南#

3. 链接与图片#

3.1 超链接#

超链接使用 <a> 标签定义，用于链接到其他网页、文件或位置。 属性：

• href: 指定链接目标
• target: 指定打开链接的方式
• _self: 在当前窗口打开（默认）
• _blank: 在新窗口打开
• _parent: 在父框架打开
• _top: 在整个窗口打开
• title: 指定悬停提示文字
• rel: 指定链接与当前页面的关系 示例：

 <!-- 链接到外部网站 -->
 <a href="https://www.example.com" target="_blank">访问示例网站</a>
 <!-- 链接到同一网站的其他页面 -->
 <a href="about.html">关于我们</a>
 <!-- 链接到页面内的锚点 -->
 <a href="#section1">跳转到第一部分</a>
 <!-- 链接到电子邮件 -->
 <a href="mailto:info@example.com">发送邮件</a>
 <!-- 链接到电话 -->
 <a href="tel:+1234567890">拨打电话</a>

讲解：

• href 决定链接目标：网页、锚点、mailto: 邮件或 tel: 电话；
• target="_blank" 在新标签页打开，应同时搭配 rel="noopener" 防止反向标签页劫持；
• 锚点链接 #section1 跳转到页面内 id="section1" 的元素，无需重新加载页面（id 属性见 006-HTML5CoreGlobalAttributes）。

3.2 图像#

图像使用 <img> 标签定义，用于在网页中插入图片。 属性：

• src: 指定图像源文件路径
• alt: 指定图像的替代文本（对 SEO 和无障碍至关重要）
• width: 指定图像宽度
• height: 指定图像高度
• title: 指定悬停提示文字
• loading: 指定图像加载方式（lazy 用于延迟加载） 示例：

<!-- 基本图像 -->
<img src="images/photo.jpg" alt="美丽的风景" width="400" height="300" />
<!-- 带有标题的图像 -->
<img src="images/logo.png" alt="网站标志" title="网站标志" />
<!-- 延迟加载的图像 -->
<img src="images/large-image.jpg" alt="大型图像" loading="lazy" />

讲解：

• src 指定图片地址，alt 提供替代文本，图片加载失败时仍可理解内容；
• 显式给出 width/height 可让浏览器提前预留空间，避免布局抖动（CLS）；
• loading="lazy" 让图片进入视口附近再加载，适合长页面中的非首屏图片。

3.3 其他多媒体标签（知道即可）#

示例：

<!-- 音频播放器 -->
<audio controls>
<source src="audio/song.mp3" type="audio/mpeg" />
您的浏览器不支持音频元素。
</audio>
<!-- 视频播放器 -->
<video controls width="600">
<source src="video/movie.mp4" type="video/mp4" />
您的浏览器不支持视频元素。
</video>
<!-- 嵌入网页 -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1422937950146!2d-74.0061380845947!3d40.71277577933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen
  loading="lazy"
></iframe>

讲解：

• <audio>/<video> 内部可放多个 <source> 供浏览器按格式依次尝试，fallback 文本用于不支持时的提示；
• controls 属性显示浏览器原生控制条，移除后需自行实现播放控制；
• <iframe> 用于嵌入第三方页面，应设置 width/height 并谨慎使用 allowfullscreen。

这三个标签的完整 API 分别在 021-AudioVideo 与 023-EmbeddedContent 展开，第一遍知道存在即可。

4. 综合示例：基本网页结构（纯 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>
    <!-- 注意：本示例只有 HTML 骨架，没有 CSS 样式 -->
    <!-- 样式将在后续 CSS 课程中学习 -->
  </head>
  <body>
    <!-- ====== 页面头部 ====== -->
    <header>
      <h1>我的网站</h1>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">联系</a></li>
        </ul>
      </nav>
    </header>

    <!-- ====== 页面主体 ====== -->
    <main>
      <section>
        <h2>欢迎访问我的网站</h2>
        <p>这是一个使用 HTML5 基础标签构建的网页。</p>
        <p>HTML5 提供了丰富的标签和属性，用于创建结构清晰、语义化的网页。</p>
      </section>

      <section>
        <h2>服务列表</h2>
        <ul>
          <li>网站设计</li>
          <li>前端开发</li>
          <li>后端开发</li>
          <li>移动应用开发</li>
        </ul>
      </section>

      <section>
        <h2>联系我们</h2>
        <p>邮箱：<a href="mailto:info@example.com">info@example.com</a></p>
        <p>电话：<a href="tel:+1234567890">123-456-7890</a></p>
      </section>
    </main>

    <!-- ====== 页面底部 ====== -->
    <footer>
      <p>&copy; 2026 我的网站. 保留所有权利.</p>
    </footer>
  </body>
</html>

讲解：

• 这个页面在浏览器中会显示为”白底黑字”的朴素风格——这正是 HTML 的本职工作：只负责内容和结构，不负责美化；
• header 包住标题与导航，main 包住三个 section，footer 放版权信息，三段结构一目了然；这些语义容器的完整讲解在 010-SemanticTag；
• 导航里的 <ul> 和”服务列表”里的 <ul> 表达的都是”一组并列项目”，语义正确；
• mailto: 与 tel: 链接让用户点击后直接唤起邮件与拨号应用。

5. 最佳实践#

5.1 链接和图像#

• 链接的可访问性：为链接添加 title 属性，提供额外的上下文信息；
• 图像的 alt 属性：为所有图像添加 alt 属性，描述图像的内容，这对 SEO 和无障碍访问都很重要；
• 图像的尺寸：为图像指定 width 和 height 属性，这样浏览器可以在加载图像之前预留空间，避免页面布局跳动；
• 图像的延迟加载：对于大型图像，使用 loading="lazy" 属性来延迟加载，提高页面加载速度。

5.2 代码风格#

• 缩进：使用一致的缩进（通常是 2 或 4 个空格）来提高代码的可读性；
• 大小写：HTML 标签和属性通常使用小写；
• 引号：属性值应该使用双引号包围；
• 注释：为复杂的代码添加注释，提高代码的可维护性。注释的完整写法（<!-- ... -->）、用途与注意事项见 001-HTML5CommentsAndEntities。

6. 动手试试：写一个”我的个人简介”页面#

目标：用今天学的标签，写一个”我的个人简介”页面。

要求：

1. 页面标题为”关于我”；
2. 有一个一级标题 <h1> 显示你的名字；
3. 用 <p> 写一段自我介绍；
4. 用 <ul> 列出你的 3 个爱好；
5. 用 <ol> 列出你今天的 3 件事；
6. 用 <a> 放一个你最喜欢的网站链接（target="_blank"）。

挑战（可选）：

• 用 <figure> + <figcaption> 放一张图片；
• 用 <dl> 列出 3 个你学会的 HTML 标签及其含义（语法在 007）；
• 用 <details> + <summary> 做一个”展开看更多”区域（在 007 的进阶知识点里）。

7. 核心知识点#

• 标题（h1-h6）、段落（p）、强调（strong/em）等文本标签构成内容语义；
• 无序列表 ul、有序列表 ol 各有适用场景，嵌套可表达层级；定义列表 dl 在 007；
• 链接 a 支持网页、锚点、mailto、tel 四种目标；图片必须提供 alt；
• br/hr/img 是空元素，没有闭合标签；
• 先保证结构正确：语义容器（header/main/footer）细节见 008，表格与全局属性见 007。

一句话记住这节课：标题别跳级，段落用 p；列表看顺序（ul/ol）；链接有 href，图片写 alt。

8. 注意事项与改进建议#

9. 扩展学习#

• 表格方向：150-HTML5TableAndStructuredContent 学习 table 与定义列表 dl；
• 语义方向：阅读 170-SemanticTag 掌握 article 与 section 的边界；
• 表单方向：深入 190-HTML5FormValidation 学习输入类型与验证 API；
• 数据方向：结合 340-CustomDataAttribute 实践 data-* 与 dataset；
• 无障碍方向：参考 180-Accessibility 补齐 ARIA 与键盘导航；
• 媒体方向：在 200-AudioVideo 中学习 audio/video 的完整 API。