HTML5 基础标签详解

HTML5 是当前最流行的网页制作语言之一，它引入了许多新的标签，旨在简化网页开发过程，提高网页的可读性和可维护性。本文将详细介绍 HTML5 中常见的几个基础标签，帮助您快速掌握 HTML5 的使用。

1. <header> 标签

<header> 标签用于定义文档或页面中的标题区域，通常包含导航链接、logo、页眉等信息。使用 <header> 标签可以让页面结构更加清晰，便于搜索引擎抓取和优化。

• 示例代码：
• <header>

  <h1>网站标题</h1>

  <nav>

  <ul>

  <li><a href="index.html">首页</a></li>

  <li><a href="about.html">关于我们</a></li>

  <li><a href="contact.html">联系方式</a></li>

  </ul>

  </nav>

  </header>

2. <nav> 标签

<nav> 标签用于定义页面中的导航链接，如菜单、目录等。使用 <nav> 标签可以更好地组织页面结构，提高用户体验。

• 示例代码：
• <nav>

  <ul>

  <li><a href="index.html">首页</a></li>

  <li><a href="about.html">关于我们</a></li>

  <li><a href="contact.html">联系方式</a></li>

  </ul>

  </nav>

3. <section> 标签

<section> 标签用于定义页面中的独立内容区域，如文章、论坛帖子等。使用 <section> 标签可以更好地组织页面内容，提高页面可读性。

• 示例代码：
• <section>

  <h2>文章标题</h2>

  <p>这里是文章内容...</p>

  </section>

4. <article> 标签

<article> 标签用于定义页面中的独立文章，如博客文章、新闻报道等。使用 <article> 标签可以让文章结构更加清晰，便于搜索引擎抓取和优化。

• 示例代码：
• <article>

  <h2>文章标题</h2>

  <p>这里是文章内容...</p>

  </article>

5. <footer> 标签

<footer> 标签用于定义文档或页面中的页脚区域，通常包含版权信息、联系方式等。使用 <footer> 标签可以让页面结构更加完整，提高用户体验。

• 示例代码：
• <footer>

  <p>版权所有 © 2022 网站名称。</p>

  </footer>