HTML5 - 新标签(元素)

HTML5是最新的HTML标准，它推出了一些新的标签(元素)。这些新标签旨在提高Web应用程序的可读性、可访问性和可维护性。下面是一些HTML5的新标签：

1. <article>

<article> 是一个独立的文章或者页面的主要内容区域。这意味着它可以在单独的页面中展示，并且可以在不同的站点之间共享。

<article>
    <h1>这是文章标题</h1>
    <p>这是文章内容</p>
</article>

2. <aside>

<aside> 用于表示文章内容之外的一些信息，如侧边栏或者引用。

<aside>
    <h2>相关文章</h2>
    <ul>
        <li><a href="#">文章1</a></li>
        <li><a href="#">文章2</a></li>
        <li><a href="#">文章3</a></li>
    </ul>
</aside>

3. <details> 和 <summary>

<details> 和 <summary> 用于创建一个可以展开和收缩的信息框。<summary> 提供了标题，而 <details> 提供了详细信息。

<details>
    <summary>点击展开</summary>
    <p>这里是详细信息</p>
</details>

4. <header> 和 <footer>

<header> 和 <footer> 分别表示页面的头部和尾部。

<header>
    <h1>这里是头部</h1>
    <nav>
        <ul>
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
        </ul>
    </nav>
</header>

<footer>
    <p>版权所有 © 2022</p>
</footer>

5. <main>

<main> 用于表示页面的主要内容，通常只会出现一次。

<main>
    <h1>这是页面标题</h1>
    <p>这是页面内容</p>
</main>

6. <nav>

<nav> 用于表示页面中的导航链接。

<nav>
    <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
    </ul>
</nav>

7. <section>

<section> 用于表示在文档中的一节，通常用于组织内容。

<section>
    <h2>节标题</h2>
    <p>节内容</p>
</section>

8. <time>

<time> 用于表示日期和时间，可以使用 datetime 属性来指定日期和时间的值。

<p>这篇文章发布于 <time datetime="2022-01-01T01:00:00+08:00">2022年1月1日</time>。</p>

这些标签(元素)旨在使Web应用程序更具结构化和可读性，并提高代码的可维护性。如果您开发Web应用程序，那么这些标签应该成为您工具箱中的一部分。