HTML5 语义元素学习笔记

HTML5 引入了一些新的语义元素，使得开发者可以更好地组织网页内容，并让浏览器和开发者能够更好地理解网页的结构和内容。本文介绍了一些常用的 HTML5 语义元素以及它们的使用场景和实例。

header

<header> 元素表示网页或者其中的一个区域的头部。通常包含一些标题、logo 和导航链接等。

htmlCopy Code
<header>
  <h1>这是网页的标题</h1>
  <a href="#">Home</a>
  <a href="#">Blog</a>
  <a href="#">Contact</a>
</header>

nav

<nav> 元素表示网页的主导航条。通常包含一些链接，用于导航到其他页面。

htmlCopy Code
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

section

<section> 元素表示网页的一个主要部分或一个章节。通常包含一个标题，并且可以嵌套其他的语义元素。

htmlCopy Code
<section>
  <h2>这是一个章节的标题</h2>
  <p>这是一段章节的内容。</p>
  <article>
    <h3>这是一篇文章的标题</h3>
    <p>这是一篇文章的内容。</p>
  </article>
</section>

article

<article> 元素表示独立的文章或者博客帖子。通常包含一个标题、作者信息、发布时间和一些内容。

htmlCopy Code
<article>
  <h2>这是一篇文章的标题</h2>
  <p>作者：张三</p>
  <p>发布时间：2023年6月1日</p>
  <p>这是一篇文章的内容。</p>
</article>

aside

<aside> 元素表示网页的侧边栏，通常包含一些相关的内容或者广告等。

htmlCopy Code
<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>

footer

<footer> 元素表示网页或者其中的一个区域的底部。通常包含一些版权信息，联系方式等。

htmlCopy Code
<footer>
  <p>&copy; 2023 My website. All rights reserved.</p>
  <p>Contact: me@example.com</p>
</footer>

以上是 HTML5 一些常用的语义元素，使用这些语义元素可以使网页更具结构化并提高可访问性。