正文

HTML5常用标签一览：从《
`到`
`，掌握这些基本元素构建网页基础

/0 浏览量
0531

在构建网页的过程中，了解和使用HTML5的常用标签是至关重要的。这些标签不仅帮助我们组织内容，还赋予网页结构化的布局。以下是一份详细的标签清单，从<header>到<footer>，帮助您掌握HTML5的基本元素，构建坚实的网页基础。

<header>

<header>标签通常用于定义页面或区块的页眉部分。它可以包含网站的标志、标题、导航链接等。

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#contact">联系方式</a></li>
    </ul>
  </nav>
</header>

<nav>

<nav>标签用于定义网站的导航链接部分，它通常包含一系列链接，用于帮助用户在网站内或网站间导航。

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系方式</a></li>
  </ul>
</nav>

<article>

<article>标签用于表示独立的、可以独立分配的内容。例如，博客帖子、新闻故事、论坛帖子等。

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

<section>

<section>标签用于定义文档中的一个章节。它可以包含标题和其他内容，但通常不包含导航链接。

<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>

<aside>

<aside>标签用于表示页面内容的一部分，该部分的内容与页面主体内容相关，但不是页面主体内容的一部分。例如，侧边栏、广告、相关链接等。

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#link1">链接1</a></li>
    <li><a href="#link2">链接2</a></li>
  </ul>
</aside>

<footer>

<footer>标签用于定义页面或区块的页脚部分。它通常包含版权信息、联系信息、法律声明等。

<footer>
  <p>&copy; 2023 网站名称. 版权所有。</p>
</footer>

<figure>和<figcaption>

<figure>标签用于封装媒体内容，如图片、视频或图表，而<figcaption>标签用于为这些媒体内容提供标题或说明。

<figure>
  <img src="image.jpg" alt="图片描述">
  <figcaption>这是一张图片的描述</figcaption>
</figure>

<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

这些标签用于创建表格，其中<table>是表格的主体，<thead>、<tbody>和<tfoot>分别用于表格的头部、主体和底部。<tr>代表表格的一行，<th>代表表头单元格，而<td>代表标准单元格。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

通过掌握这些HTML5常用标签，您可以为您的网页构建一个坚实的结构。记住，良好的网页结构不仅有助于搜索引擎优化（SEO），还能提升用户体验。在网页设计的过程中，不断实践和探索，您将发现更多标签的奇妙之处。

-- 展开阅读全文 --