html语义化标签有哪些

<!-- HTML 语义化标签示例 -->

<!-- 文章标题 -->
<article>
    <header>
        <h1>HTML 语义化标签有哪些</h1>
        <p>发布日期: 2023-10-05</p>
    </header>

    <!-- 正文内容 -->
    <section>
        <h2>什么是语义化标签</h2>
        <p>语义化标签是指那些能够清晰表达网页结构和内容含义的 HTML 标签。使用语义化标签有助于提高代码的可读性和可维护性，同时也有利于搜索引擎优化 (SEO) 和无障碍访问。</p>
    </section>

    <section>
        <h2>常见的语义化标签</h2>
        <ul>
            <li><code>&lt;article&gt;</code> - 定义独立的内容块，如博客文章、新闻报道等。</li>
            <li><code>&lt;section&gt;</code> - 定义文档中的节或部分。</li>
            <li><code>&lt;header&gt;</code> - 定义页面或部分的页眉。</li>
            <li><code>&lt;footer&gt;</code> - 定义页面或部分的页脚。</li>
            <li><code>&lt;nav&gt;</code> - 定义导航链接部分。</li>
            <li><code>&lt;aside&gt;</code> - 定义与主要内容相关的辅助信息。</li>
            <li><code>&lt;main&gt;</code> - 定义文档的主要内容。</li>
            <li><code>&lt;figure&gt;</code> - 定义自包含的内容，如图表、照片等。</li>
            <li><code>&lt;figcaption&gt;</code> - 定义 figure 元素的标题。</li>
            <li><code>&lt;time&gt;</code> - 定义日期或时间。</li>
            <li><code>&lt;mark&gt;</code> - 定义有高亮显示的文本。</li>
        </ul>
    </section>

    <!-- 结尾 -->
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</article>

解释说明：

1. <article>：用于定义独立的内容块，例如博客文章或新闻报道。
2. <section>：用于定义文档中的节或部分。
3. <header>：用于定义页面或部分的页眉，通常包含标题和元数据。
4. <footer>：用于定义页面或部分的页脚，通常包含版权信息或附加链接。
5. <nav>：用于定义导航链接部分，通常包含网站的主要导航菜单。
6. <aside>：用于定义与主要内容相关的辅助信息，例如侧边栏。
7. <main>：用于定义文档的主要内容，确保每个页面只有一个 <main> 标签。
8. <figure> 和 <figcaption>：用于定义自包含的内容（如图片、图表）及其标题。
9. <time>：用于定义日期或时间，可以包含机器可读的时间格式。
10. <mark>：用于定义有高亮显示的文本，通常用于强调某些内容。

这些语义化标签不仅使代码更具可读性和结构性，还能提升网页的 SEO 和无障碍访问性能。