HTML5 中常用的语义化标签及其简要说明
<title> <!--：页面主体内容。--> <hn> <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。--> <ul> <!--：无序列表。--> <ol> <!--：有序列表。--> <header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。--> <nav> <!--：标记导航，仅对文档中重要的链接群使用。--> <main> <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。--> <article> <!--：定义外部的内容，其中的内容独立于文档的其余部分。--> <section> <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。--> <aside> <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。--> <footer> <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> <small> <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。--> <strong> <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。--> <em> <!--：将其中的文本表示为强调的内容，表现为斜体。--> <mark> <!--：使用黄色突出显示部分文本。--> <figure> <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。--> <figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。--> <cite> <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。--> <blockquote><!--：定义块引用，块引用拥有它们自己的空间。--> <q> <!--：短的引述（跨浏览器问题，尽量避免使用）。--> <time> <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。--> <abbr> <!--：简称或缩写。--> <dfn> <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。--> <address> <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。--> <del> <!--：移除的内容。--> <ins> <!--：添加的内容。--> <code> <!--：标记代码。--> <meter> <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）--> <progress> <!--：定义运行中的进度（进程）。-->
1. <title>
作用：定义网页的标题，显示在浏览器标签页上，对 SEO（搜索引擎优化）非常重要。
注意：它位于<head>中，不是页面可见内容的一部分。
<head><title>我的个人博客</title>
</head>2. <h1> ~ <h6>
作用：表示不同级别的标题，
<h1>最重要，<h6>最次要。
SEO 建议：一个页面通常只用一个<h1>，且应与<title>内容协调。
<h1>主标题（文章标题）</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>3. <ul>
作用：无序列表（Unordered List），项目前默认带圆点。
<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>4. <ol>
- 在
<ul>中 → 无序项 - 在
<ol>中 → 有序项（数字/字母等）
<ol><li>第一步</li><li>第二步</li>
</ol>5. <header>
作用：定义页眉区域，可包含 logo、导航、搜索框等。一个页面可以有多个
<header>（如文章也有自己的 header）。
<header><h1>网站名称</h1><nav>...</nav>
</header>6. <nav>
作用：专门用于主要导航链接，如主导航栏、目录、分页等。不要把所有链接都包进去。
<nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li></ul>
</nav>7. <main>
作用：包裹页面核心内容，每个页面只能出现一次，且不能是
<header>、<footer>等的后代。
<main><article><h1>今日新闻</h1><p>这里是主要内容……</p></article>
</main>8. <article>
作用：表示独立、可复用的内容块，如博客文章、新闻、评论、论坛帖子等。即使脱离上下文也能理解。
<article><h2>如何学习 HTML</h2><p>HTML 是网页的基础……</p>
</article>9. <section>
作用：表示文档中的一个主题区块（如章节、tab 面板），通常有标题。
✅ 与<div>的区别：<section>有语义，<div>无语义。
<section><h2>技术介绍</h2><p>HTML、CSS、JavaScript 是前端三件套。</p>
</section>💡 小技巧：如果能给这个区块加个标题（h1~h6），就适合用
<section>。
10. <aside>
作用：表示与主内容间接相关的内容，如侧边栏、广告、相关链接、引用等。
<aside><h3>相关文章</h3><ul><li><a href="#">CSS 入门</a></li><li><a href="#">JavaScript 基础</a></li></ul>
</aside>11. <footer>
作用：定义页脚。如果直接在
<body>下，就是整个页面的页脚；如果在<article>或<section>内，则是该部分的页脚。
<footer><p>© 2025 我的网站</p>
</footer>12. <small>
作用：显示细则类文本，如版权、免责声明、法律信息等。视觉上字体较小。
<p>使用本网站即表示您同意我们的 <small>服务条款</small>。</p>13. <strong>
作用：强语义强调，表示内容非常重要。默认显示为粗体。
<p>请<strong>务必</strong>保存您的文件！</p>14. <em>
作用：一般强调，表示语气上的重音。默认显示为斜体。
<p>你真的<em>确定</em>要删除吗？</p>✅ 区别：
<strong>= 重要性，<em>= 语气强调。
15. <mark>
作用：高亮显示文本（默认黄色背景），用于突出搜索关键词或重点。
<p>搜索结果中包含 <mark>HTML</mark> 教程。</p>16. <figure> 和 <figcaption>
作用：
<figure>包裹独立媒体（图、表、代码等），<figcaption>为其标题。
<figure><img src="chart.png" alt="销售图表"><figcaption>图1：2024年销售额趋势</figcaption>
</figure>✅
<figcaption>可放在<figure>的开头或结尾。
17. <cite>
作用：表示作品标题（书、电影、歌曲等），通常斜体显示。
<p>我最近读了 <cite>三体</cite>。</p>18. <blockquote>
作用：引用大段外部内容，通常会缩进显示。
<blockquote><p>知识就是力量。</p>
</blockquote>
<cite>—— 弗兰西斯·培根</cite>19. <q>
作用：短引号，浏览器会自动加引号（但兼容性差，建议慎用）。
<p>他说：<q>明天会更好</q>。</p>
<!-- 渲染效果：他说：“明天会更好”。 -->20. <time>
作用：标记日期或时间，
datetime属性提供机器可读格式。
<p>会议时间：<time datetime="2025-11-10">11月10日</time></p>
<p>发布时间：<time datetime="2025-11-05T16:20">今天下午</time></p>21. <abbr>
作用：标注缩写，
title属性可提供全称（鼠标悬停显示）。
<p>世界卫生组织（<abbr title="World Health Organization">WHO</abbr>）发布了新指南。</p>22. <dfn>
作用：定义术语（首次出现时使用），通常斜体。
<p><dfn>API</dfn> 是应用程序编程接口的缩写。</p>23. <address>
作用：提供作者或组织的联系信息，不是普通地址！
<address>作者：<a href="mailto:author@example.com">张三</a><br>网站：<a href="https://example.com">example.com</a>
</address>24. <del> 和 <ins>
作用：
<del>：表示已删除的内容（通常带删除线）<ins>：表示新增的内容（通常带下划线）
<p>原价：<del>¥199</del>，现价：<ins>¥99</ins></p>25. <code>
作用：标记计算机代码片段，默认等宽字体。
<p>使用 <code>console.log()</code> 输出调试信息。</p>大段代码可用
<pre><code>...</code></pre>保留格式。
26. <meter>
作用：表示已知范围内的标量值（如磁盘使用率、投票比例）。
❌ IE 不支持。
<p>存储使用：<meter value="0.7" min="0" max="1">70%</meter></p>27. <progress>
作用：表示任务进度（如文件上传、加载状态）。
<p>上传进度：<progress value="60" max="100">60%</progress></p>若不知道具体进度，可省略
value，显示为“不确定进度条”。