HTML: HTML 语义化标签
语义标签为您的网页结构赋予了意义——它们不仅告诉浏览器如何展示内容，还明确“这一部分是什么”。这在搜索引擎优化、网站可访问性和代码可读性方面都大有裨益。
1. 什么是语义化
"语义"就是"含义"。用 <div> 也能搭出任何布局，但浏览器看不懂容器的含义。语义化标签用名字直接说明用途：
▶ 示例
HTML
<header>
<h1>我的博客</h1>
<nav>
<a href="index.html">首页</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容……</p>
</article>
<aside>侧边栏</aside>
</main>
<footer>
<p>© 2026</p>
</footer>
📌 常用标签：
<header> 页眉、<nav>导航、<main>主体、<section> 区块、<article> 文章、<aside> 侧栏、<footer> 页脚。它们都是块级容器，作用和 <div> 一样，但名字说明了用途。
2. 语义化的好处
语义化有三个直接好处：搜索引擎更准确理解页面结构；屏幕阅读器可跳转到特定区域；开发者看代码就知道布局，无需猜 <div> 的 class 含义。
3. 图文容器：<figure> 与<figcaption>
<figure> 用于包裹图片、代码块、图表等独立内容，<figcaption> 为其添加标题说明：
▶ 示例
HTML
<figure>
<img src="/assets/images/tutorials/html-sales-chart.webp" alt="2026 sales data chart">
<figcaption>图1：2026年各季度销售额对比</figcaption>
</figure>
<figure>
<pre><code>console.log("Hello World");</code></pre>
<figcaption>代码示例：打印Hello World</figcaption>
</figure>
4. 时间与标记：<time> 与 <mark>
▶ 示例
<time> 让机器可读的日期时间，<mark> 高亮显示搜索关键词或重要文本：
HTML
<p>发布于 <time datetime="2026-06-12">2026年6月12日</time></p>
<p>请搜索关键词：<mark>语义化标签</mark>，
搜索结果中会高亮显示。</p>
<p><time datetime="2026-06-12T14:30:00+08:00">
明天下午 2:30</time> 将召开会议。</p>
5. 可折叠内容：<details>与 <summary>
<details> 创建一个可展开/折叠的交互组件，<summary> 定义其可见标题。纯 HTML 实现，不需要 JavaScript：
▶ 示例
HTML
<details>
<summary>什么是语义化标签？</summary>
<p>语义化标签是用有意义的名称来描述内容用途的HTML标签，
比如 <header>、<nav>、<article> 等。</p>
</details>
<details open>
<summary>已展开的折叠面板（open属性）</summary>
<p>添加 open 属性可以让面板默认展开。</p>
</details>
💡 更多语义化标签：
<blockquote>引用、<code>代码、<address>联系信息、<dialog>对话框。万物皆可为语义，找到最贴切的标签再用。
❓ 常见问题
Q 语义化标签对SEO有什么影响？
A 搜索引擎通过语义化标签理解页面结构和内容重要性。
<header>告诉搜索引擎"这是页眉"，<main>表示"这是核心内容"，<article>表示"这是一篇独立文章"。搜索引擎会给予<main>和<article>中的内容更高的权重。此外，语义化标签有助于搜索引擎生成更准确的搜索结果摘要（如显示文章标题、作者、发布时间）。Q
<section>和<article>有什么区别？A
<article>是独立的、完整的内容块，可以单独发布或复用（如博客文章、新闻报道、评论）；<section>是内容的分组，通常有标题，但不是独立的内容（如章节、标签页、产品特性）。判断标准：如果这个内容块脱离上下文仍然有意义，用<article>；如果需要依赖上下文才能理解，用<section>。Q 什么时候用
<div>？A
<div>只在没有合适的语义化标签时使用。常见场景：1）纯粹的样式容器（如包裹一组元素方便Flexbox布局）；2）JavaScript操作的钩子（如模态框、弹窗）；3）没有语义含义的分组。原则：先找语义化标签（header/nav/main/section/article/aside/footer），找不到时再用div。Q
<details>和<summary>的兼容性如何？A
<details>和<summary>是HTML5原生折叠面板，现代浏览器（Chrome、Firefox、Safari、Edge）都支持，兼容性很好。好处：无需JavaScript就能实现折叠效果，支持键盘导航和屏幕阅读器。局限：样式自定义能力有限（如箭头图标），复杂交互仍需JavaScript。IE不支持，但IE已停止维护，无需考虑。📖 小节
- 核心语义标签：
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer> <figure>+<figcaption>包裹图片/代码并加标题<time>标记机器可读时间，<mark>高亮文本<details>+<summary>纯HTML折叠面板- 语义化提升 SEO、无障碍和代码可读性
<div>和<span>没有语义，只在没有合适标签时使用
📝 作业
- 搭建骨架：用语义化标签搭建一个博客页面结构，填充一些占位文字。
- 对比体验：分别用屏幕阅读器朗读纯
<div>页面和语义化页面，感受差异。
