在 HTML5 中定义内容的主题变化

在 HTML5 中，我们可以使用一些标记来定义内容的主题变化，这些标记包括：<section>、<article>、<nav>、<header>、<footer> 和 <aside>。这些标记帮助我们将页面分成逻辑块，并为每个块定义适当的主题。

<section> 标记

<section> 标记可用于定义页面的一个主要部分。一般来说，页面应该至少有一个 <section> 标记。可以使用属性 class 或 id 来为 <section> 标记定义样式或标识符。例如：

<section class="intro">
  <h1>Welcome to my website!</h1>
  <p>...</p>
</section>

<article> 标记

<article> 标记用于定义一个与页面上下文无关的独立内容块，例如一篇新闻文章或一篇博客文章。可以使用属性 class 或 id 来为 <article> 标记定义样式或标识符。例如：

<article class="news">
  <h1>New iPhone Released!</h1>
  <p>...</p>
</article>

<nav> 标记

<nav> 标记用于定义导航链接的容器。导航链接通常指向站点上的其他页面或 URL。可以使用属性 class 或 id 来为 <nav> 标记定义样式或标识符。例如：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<header> 和 <footer> 标记

<header> 标记用于定义页面或部分的页眉。<footer> 标记用于定义页面或部分的页脚。可以使用属性 class 或 id 来为这些标记定义样式或标识符。例如：

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

<footer>
  <p>&copy; 2021 My Company</p>
</footer>

<aside> 标记

<aside> 标记用于定义页面或部分的侧边栏。侧边栏通常包含与页面内容相关的辅助信息。可以使用属性 class 或 id 来为 <aside> 标记定义样式或标识符。例如：

<section class="content">
  <article>...</article>
  <aside>
    <h2>Related Posts</h2>
    <ul>
      <li><a href="#">Post 1</a></li>
      <li><a href="#">Post 2</a></li>
      <li><a href="#">Post 3</a></li>
    </ul>
  </aside>
</section>

通过使用这些标记，我们可以使 HTML5 文档更加语义化，并使其更易于阅读和维护。