HTML5语义化编程

常见的 HTML5 语义化标签

<header>：定义文档或节的头部区域，通常包含标题、logo、导航链接等。
<nav>：表示导航链接的部分，适合用来包裹主要的导航菜单。
<main> ：标识文档的主要内容，每个页面应该只有一个 <main> 元素，且不应包含在其他元素（如 <article>, <aside>, <footer>, <header>, 或 <nav>）内。
<article>：代表一个独立的内容块，比如博客文章、新闻故事或用户评论。
<section>：定义文档中的一个部分或章节，通常会有一个标题。它用于组织内容，但不应该用作样式钩子或布局工具。
<aside>：包含与页面内容相关但不是主要内容的信息，例如侧边栏或注释。
<footer>：定义文档或节的尾部区域，通常放置版权信息、联系方式等。
<figure> 和 <figcaption> ：<figure> 用于包裹图像、图表、代码片段等内容，而 <figcaption> 则用于为 <figure> 提供标题或说明文字。
<time> ：表示日期或时间，可以使用 datetime 属性来指定机器可读的格式。
<mark>：高亮显示文本，常用于标记文档中需要引起注意的部分。
<details> 和 <summary> ：<details> 定义用户可以查看或隐藏的额外细节，而 <summary> 定义了 <details> 的标题。
<dialog>：表示对话框或窗口，可以通过 JavaScript 控制其显示和隐藏。
<progress> 和 <meter>：分别用于表示进度条和度量值，适用于展示任务完成情况或数值范围。

语义化示例

以下是一个简单的 HTML5 页面结构，展示了如何使用语义化标签：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的博客</title>
</head>
<body>
  <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>

  <main>
    <article>
      <header>
        <h2>最新文章标题</h2>
        <p>发布于 <time datetime="2025-01-06">2025年1月6日</time></p>
      </header>
      <p>这是文章的内容...</p>
      <figure>
        <img src="image.jpg" alt="图片描述">
        <figcaption>这张图是关于...</figcaption>
      </figure>
    </article>

    <aside>
      <h3>热门文章</h3>
      <ul>
        <li><a href="#">文章一</a></li>
        <li><a href="#">文章二</a></li>
        <li><a href="#">文章三</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 我的博客. 保留所有权利.</p>
  </footer>
</body>
</html>