您的位置:

HTML5语义化标签的详细介绍

一、<header> 标签

<header> 标签用于定义文档或节的页眉。通常包含导航元素和标题元素。

<header>
  <h1>这是一个标题</h1>
  <nav>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
  </nav>
</header>

在上面的代码中, <header> 用于包含一个

标签和导航元素的容器。

二、<article> 标签

<article> 标签用于定义一个独立的、完整的内容块。 例如,一篇博客文章或新闻报道。

<article>
  <h2>这是一个标题</h2>
  <p>这是一段文章</p>
</article>

在上面的代码中, <article> 包含一个

标题

和一段段落

三、<section> 标签

<section> 标签用于定义文档或应用程序的区域,例如章节,页眉、页脚或区块组。

<section>
  <h3>这是一个小节</h3>
  <p>这里是小节中的文本</p>
</section>

在上面的代码中,<section> 用于组织小节中的区块,包含一个

标题

和一段

段落文本。

四、<aside> 标签

<aside> 标签用于定义与页面内容相关但不是主要的内容,例如侧边栏或广告栏。

<aside>
  <h4>这是一个侧边栏标题</h4>
  <p>这是侧边栏的内容</p>
</aside>

在上面的代码中,<aside> 包含一个

标题

和一段

段落文本,用于现实与主内容相关的附加信息。

五、<footer> 标签

<footer> 标签用于定义文档或节的页脚。通常包含版权信息、作者信息和关联链接。

<footer>
  <p>版权所有 © 2020©</p>
  <p>作者:Nancy </p>
</footer>

在上面的代码中,<footer> 包含一些版权和作者信息的

段落文本。