【HTML】一张图 带你了解 网页布局标签 ＜header＞ 、＜nav＞ 、＜article＞、＜section＞ 、＜aside＞、＜footer＞

注意：这些标签在网页布局这样用最合理，要加上 CSS 样式 才会有图上的效果出来

<header>

用于定义文档或节（section）的头部部分。它通常包含网站的标题、logo、导航栏或者其他介绍性的内容。

<header>
  <h1>网站主标题</h1>
  <img src="logo.jpg">
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
    </ul>
  </nav>
</header>

<nav>

用于定义导航链接的集合。这些导航链接可以是网站的主菜单、导航或者页内导航等。使用<nav>标签可以使导航部分在语义上更加清晰，方便用户和搜索引擎识别。

<nav>
  <ul>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">案例展示</a></li>
  </ul>
</nav>

<article>

用于定义文档、页面或者应用程序中独立的、完整的、可以独自被外部引用的内容。比如一篇博客文章、一则新闻报道、一个用户评论等都可以用<article>标签来包裹。

<article>
    <h1>这是一篇文章标题</h1>
    <p>这是文章的第一段内容。文章内容可以包含多个段落、图片、链接等元素。</p>
    <img src="article_image.jpg" alt="文章相关图片">
    <p>这是文章的第二段内容。</p>
</article>

<section>

用于定义文档中的一个节或者一个区域。它是一个具有主题性的内容分组单元，例如，一篇文章可以分为多个<section>，每个<section>可能有自己的标题、段落、图像等内容

<section>
  <header>
    <h2>产品介绍</h2>
  </header>
  <p>这是产品的特性。</p>
  <img src="产品.jpg" alt="产品图片">
  <p>这些特性包括。。。。。。</p>
</section>

<aside>

用于定义与主要内容相关的附属信息部分，这些信息可以是侧边栏内容，如相关文章推荐、广告、社交媒体链接等。

<article>
  <h1>主文章标题</h1>
  <p>主文章内容。</p>
  <aside>
    <h3>相关阅读</h3>
    <ul>
      <li><a href="#">相关文章1</a></li>
      <li><a href="#">相关文章2</a></li>
    </ul>
  </aside>
</article>

<footer>

用于定义文档或者节（section）的底部部分。它通常包含版权信息、联系方式、网站地图、返回顶部链接等内容。和<header>一样，一个页面可以有多个<footer>标签，例如每个<section>也可以有自己的<footer>。

<footer>
  <p>版权所有 &copy; 2023 - 2024 公司名称</p>
  <nav>
    <ul>
      <li><a href="#">网站地图</a></li>
      <li><a href="#">隐私政策</a></li>
      <li><a href="#">使用条款</a></li>
    </ul>
  </nav>
</footer>