君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>css>正文

H5独有的标签说明及使用示例

2023-12-12 20:17 君语贤H5标签

H5独有的标签说明及使用示例

HTML5引入了许多新的语义化标签,以更好地描述文档结构和内容,提高搜索引擎的可读性,以及改善辅助技术的支持。以下是一些HTML5独有的标签以及它们的使用示例:

  1. <header>

    • 说明: 定义文档或区域的页眉。
    • 示例:
      <header>
        <h1>网页标题</h1>
        <p>网页描述</p>
      </header>
  2. <nav>

    • 说明: 定义导航链接的容器。
    • 示例:
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
  3. <section>

    • 说明: 定义文档中的一个区域或部分。
    • 示例:
      <section>
        <h2>文章标题</h2>
        <p>文章内容...</p>
      </section>
  4. <article>

    • 说明: 定义独立的、完整的内容块,比如一篇文章。
    • 示例:
      <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
      </article>
  5. <aside>

    • 说明: 定义与页面内容相关的侧边栏或附属信息。
    • 示例:
      <aside>
        <h3>相关链接</h3>
        <ul>
          <li><a href="#">链接1</a></li>
          <li><a href="#">链接2</a></li>
        </ul>
      </aside>
  6. <figure><figcaption>

    • 说明: <figure>定义媒体元素,<figcaption><figure>元素添加标题。
    • 示例:
      <figure>
        <img src="image.jpg" alt="图片描述">
        <figcaption>图片说明</figcaption>
      </figure>
  7. <main>

    • 说明: 定义文档的主要内容,一个文档应该包含一个 <main> 元素。
    • 示例:
      <main>
        <h1>主要内容</h1>
        <p>网页的主要内容...</p>
      </main>
  8. <footer>

    • 说明: 定义文档或区域的页脚。
    • 示例:
      <footer>
        <p>&copy; 2023 版权所有</p>
      </footer>
  9. <mark>

    • 说明: 定义文本中的高亮部分。
    • 示例:
      <p>这段文字中的<mark>关键词</mark>需要突出显示。</p>
  10. <progress>

    • 说明: 定义任务的完成进度。
    • 示例:
      <progress value="50" max="100"></progress>
  11. <time>

    • 说明: 定义日期和时间。
    • 示例:
      <p>发布时间:<time datetime="2023-01-01">2023年1月1日</time></p>

这些标签帮助开发者更准确地描述文档结构,提高代码的可读性,同时有助于搜索引擎和辅助技术的理解。在实际开发中,根据文档内容和结构的不同,选择合适的标签有助于构建更具语义的HTML文档。