HTML5 是构建现代网页的基石，它包含了一系列标签，用于创建从简单文本到复杂交互的各种元素。本文将为初学者提供一个完整的 HTML5 标签列表，按照功能分类并配以通俗易懂的解释和示例。

一、结构标签：搭建网页骨架

结构标签用于定义网页的布局和组织方式，就像建筑物的框架一样。

<header>
  <!-- 页面或区块的头部，通常包含标题、Logo和导航 -->
</header>

<nav>
  <!-- 导航链接区域，用于放置主导航菜单 -->
</nav>

<main>
  <!-- 页面的主要内容，每个页面应该只有一个<main> -->
</main>

<article>
  <!-- 独立的内容块，如博客文章、评论等，可以独立存在 -->
</article>

<section>
  <!-- 文档中的节，例如章节、页眉、页脚等 -->
</section>

<aside>
  <!-- 侧边栏或辅助内容，与主要内容相关但非必需 -->
</aside>

<footer>
  <!-- 页面或区块的底部，通常包含版权信息、联系方式等 -->
</footer>

二、文本标签：格式化内容

文本标签用于定义和格式化页面上的文字内容。

<h1>大标题</h1> <!-- 最大的标题，通常用于页面标题 -->
<h2>副标题</h2> <!-- 次大标题，用于章节标题 -->
<h3>子标题</h3> <!-- 以此类推，共有h1~h6六级标题 -->
<h4>小标题</h4>
<h5>小小标题</h5>
<h6>最小标题</h6>

<p>这是一个段落。</p> <!-- 段落标签，自动在前后添加换行 -->

<a href="https://example.com">链接文本</a> <!-- 超链接，href属性指定目标URL -->

<strong>这段文字很重要</strong> <!-- 强调重要性，默认显示为粗体 -->

<em>这段文字需要强调</em> <!-- 斜体强调，通常显示为斜体 -->

<br> <!-- 换行符，强制文本换行 -->

<hr> <!-- 水平线，用于分隔内容 -->

<blockquote>这是一段引用内容</blockquote> <!-- 长引用，通常会缩进显示 -->

<cite>书籍名称</cite> <!-- 引用作品标题，如书籍、电影等 -->

<q>这是一个短引用</q> <!-- 短引用，浏览器可能会添加引号 -->

三、列表标签：有序与无序

列表标签用于组织信息，分为有序列表和无序列表。

<!-- 无序列表（项目符号） -->
<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

<!-- 有序列表（数字编号） -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<!-- 定义列表（术语和定义） -->
<dl>
  <dt>HTML</dt> <!-- 术语 -->
  <dd>超文本标记语言</dd> <!-- 定义 -->
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

四、表单标签：创建交互元素

表单标签用于创建用户输入区域，如登录表单、注册表单等。

<form action="/submit" method="post">
  <!-- 表单容器，action指定提交地址，method指定提交方式 -->
  
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入姓名">
  <!-- 单行文本输入框 -->
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <!-- email类型输入框，有内置格式验证 -->
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <!-- 密码输入框，输入内容会被隐藏 -->
  
  <label>性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
  <!-- 单选按钮组，name相同的为一组 -->
  
  <label>爱好：</label>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">阅读</label>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">运动</label>
  <!-- 复选框，可以选择多个选项 -->
  
  <label for="country">国家：</label>
  <select id="country" name="country">
    <option value="cn">中国</option>
    <option value="us">美国</option>
    <option value="uk">英国</option>
  </select>
  <!-- 下拉选择框 -->
  
  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
  <!-- 多行文本输入框 -->
  
  <input type="submit" value="提交">
  <!-- 提交按钮 -->
  
  <input type="reset" value="重置">
  <!-- 重置按钮，清空表单内容 -->
</form>

五、媒体标签：嵌入多媒体内容

媒体标签用于在网页中嵌入图片、音频、视频等内容。

<img src="image.jpg" alt="图片描述" width="300" height="200">
<!-- 图片标签，src指定图片路径，alt提供图片描述 -->

<figure>
  <img src="nature.jpg" alt="自然风光">
  <figcaption>图1：美丽的自然风光</figcaption>
</figure>
<!-- figure标签用于组合媒体内容和说明文字 -->

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放
</audio>
<!-- 音频播放器，controls显示控制条 -->

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放
</video>
<!-- 视频播放器，controls显示控制条 -->

<canvas id="myCanvas" width="200" height="100"></canvas>
<!-- 画布，用于通过JavaScript绘制图形 -->

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<!-- SVG矢量图形，用于创建可缩放的图形 -->

六、表格标签：展示数据表格

表格标签用于展示结构化数据。

<table border="1">
  <!-- 表格，border属性设置边框宽度 -->
  
  <thead>
    <!-- 表格头部 -->
    <tr>
      <!-- 表格行 -->
      <th>姓名</th>
      <!-- 表格表头单元格 -->
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  
  <tbody>
    <!-- 表格主体 -->
    <tr>
      <td>张三</td>
      <!-- 表格数据单元格 -->
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
  </tbody>
  
  <tfoot>
    <!-- 表格底部 -->
    <tr>
      <td colspan="3">总计：2人</td>
      <!-- colspan属性跨列合并单元格 -->
    </tr>
  </tfoot>
</table>

七、其他常用标签

1. 语义化标签

提供更清晰的文档结构和语义：

<time datetime="2023-05-15">2023年5月15日</time>
<!-- 表示时间，datetime属性提供机器可读格式 -->

<mark>这段文字被高亮显示</mark>
<!-- 标记/高亮文本，默认显示为黄色背景 -->

<wbr>
<!-- 软换行符，指定在文本中适当的换行位置 -->

<progress value="75" max="100">75%</progress>
<!-- 进度条，显示任务完成进度 -->

<meter value="60" min="0" max="100">60%</meter>
<!-- 度量衡，显示已知范围的标量值 -->

2. 元数据标签

提供关于HTML文档的元数据：

<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->

<html lang="zh-CN">
<!-- 根标签，lang属性指定页面语言 -->

<head>
  <!-- 文档头部，包含元数据 -->
  <meta charset="UTF-8">
  <!-- 设置字符编码为UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 响应式设计，控制页面在移动设备上的显示 -->
  <title>页面标题</title>
  <!-- 页面标题，显示在浏览器标签上 -->
  <meta name="description" content="这是一个关于HTML5标签的指南">
  <!-- 页面描述，用于搜索引擎优化 -->
  <meta name="keywords" content="HTML5, 标签, 指南">
  <!-- 页面关键词，用于搜索引擎优化 -->
  <link rel="stylesheet" href="style.css">
  <!-- 链接外部CSS样式表 -->
  <script src="script.js"></script>
  <!-- 链接外部JavaScript脚本 -->
</head>

3. 分组和布局标签

用于组织和布局页面元素：

<div>
  <!-- 块级通用容器，用于分组元素 -->
</div>

<span>
  <!-- 内联通用容器，用于分组文本 -->
</span>

<div class="container">
  <!-- 常用作页面容器 -->
  <div class="row">
    <!-- 常用作行容器 -->
    <div class="col">
      <!-- 常用作列容器 -->
    </div>
  </div>
</div>

总结

以上就是HTML5中最常用的标签分类和解释。掌握这些标签是学习网页开发的基础，通过组合使用它们，你可以创建出各种复杂而精美的网页。建议初学者从基础标签开始练习，逐步掌握更高级的用法。