HTML5的新语义化标签
HTML5引入了许多新的语义化标签，这些标签旨在使网页的结构更加清晰和易于理解，不仅对开发者有帮助，对搜索引擎和辅助技术也非常友好。本文将详细介绍HTML5中的新语义化标签及其用途。
HTML5语义化标签概述
HTML5中的语义化标签通过定义网页内容的结构和意义，使得网页内容更加清晰，便于搜索引擎和浏览器理解。这些标签包括：
<header><nav><section><article><aside><footer><main><figure><figcaption><mark><time><details><summary>
1. <header>
<header>标签用于定义文档或部分的页眉。它通常包含导航链接、标题、标志等。
<header><h1>网站标题</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系</a></li></ul></nav>
</header>
2. <nav>
<nav>标签用于定义导航链接的部分。它包含一组导航链接。
<nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系</a></li></ul>
</nav>
3. <section>
<section>标签表示文档中的一个独立部分，可以包含主题内容或功能。
<section><h2>关于我们</h2><p>这是关于我们的内容。</p>
</section>
4. <article>
<article>标签表示一篇独立的内容，如文章、博客、新闻等。
<article><h2>文章标题</h2><p>这是文章的内容。</p>
</article>
5. <aside>
<aside>标签表示与主要内容相关的附属内容，如侧边栏、广告等。
<aside><h3>侧边栏标题</h3><p>这是侧边栏的内容。</p>
</aside>
6. <footer>
<footer>标签表示文档或部分的页脚，通常包含版权信息、链接等。
<footer><p>© 2024 网站名称. 版权所有.</p>
</footer>
7. <main>
<main>标签用于表示文档的主要内容，内容应是文档中唯一的主要内容。
<main><h1>主要内容标题</h1><p>这是主要内容。</p>
</main>
8. <figure>
<figure>标签用于表示独立的内容，通常与图片、图表、代码块等一起使用。
<figure><img src="image.jpg" alt="描述" style=""><figcaption>图像描述</figcaption>
</figure>
9. <figcaption>
<figcaption>标签用于为 <figure>元素提供说明。
<figure><img src="image.jpg" alt="描述" style=""><figcaption>图像描述</figcaption>
</figure>
10. <mark>
<mark>标签用于高亮显示文本，表示其重要性或相关性。
<p>请注意这个<mark>重要</mark>的部分。</p>
11. <time>
<time>标签用于表示时间或日期。
<p>活动日期是<time datetime="2024-06-15">2024年6月15日</time>。</p>
12. <details> 和 <summary>
<details>标签用于表示用户可以查看或隐藏的额外细节，<summary>标签用于提供 <details>元素的概要。
<details><summary>更多信息</summary><p>这是详细信息的内容。</p>
</details>