📚 现代前端开发 目录
阶段1：Web基础
第 1 / 35 课

HTML5语义化

用正确的标签做正确的事

📖 核心概念

💻 代码实现

语义化页面结构 ✅ html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>语义化HTML5页面</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; line-height: 1.6; color: #e0e0e0; background: #0f172a; }
    header { background: linear-gradient(135deg, #0f172a, #1e293b); padding: 1rem 2rem; border-bottom: 2px solid #06b6d4; }
    nav { display: flex; gap: 1.5rem; padding: 0.5rem 0; }
    nav a { color: #06b6d4; text-decoration: none; font-weight: 500; }
    nav a:hover { text-decoration: underline; }
    main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
    article { background: #1e293b; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
    section { margin-bottom: 1.5rem; }
    aside { background: #0f172a; border-left: 4px solid #06b6d4; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; }
    footer { background: #0f172a; padding: 1.5rem 2rem; text-align: center; border-top: 1px solid #1e293b; }
    h1 { color: #06b6d4; font-size: 2rem; }
    h2 { color: #e0e0e0; margin-bottom: 0.5rem; }
    time { color: #94a3b8; font-size: 0.9rem; }
    figure { margin: 1rem 0; }
    figcaption { color: #94a3b8; font-size: 0.85rem; text-align: center; }
    details { background: #0f172a; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
    summary { cursor: pointer; color: #06b6d4; font-weight: 600; }
    mark { background: rgba(6,182,212,0.3); color: #e0e0e0; padding: 0 4px; border-radius: 3px; }
  </style>
</head>
<body>
  <header>
    <h1>🌍 我的博客</h1>
    <nav aria-label="主导航">
      <a href="/">首页</a>
      <a href="/articles">文章</a>
      <a href="/about">关于</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>深入理解HTML5语义化</h2>
        <time datetime="2025-01-15">2025年1月15日</time>
      </header>

      <section>
        <h3>为什么要语义化？</h3>
        <p>语义化HTML让<mark>机器和人类</mark>都能理解内容的含义。搜索引擎、屏幕阅读器、开发者工具都依赖语义标签来理解页面结构。</p>
      </section>

      <section>
        <h3>核心语义标签</h3>
        <figure>
          <pre><code>&lt;header&gt;   — 页头或区块头
&lt;nav&gt;      — 导航链接区域
&lt;main&gt;     — 页面主内容（唯一）
&lt;article&gt;  — 独立完整的内容块
&lt;section&gt;  — 主题性分组
&lt;aside&gt;    — 侧边补充内容
&lt;footer&gt;   — 页脚或区块尾</code></pre>
          <figcaption>HTML5 语义标签一览</figcaption>
        </figure>
      </section>

      <aside>
        <p><strong>💡 提示：</strong>不要只因为需要样式而使用语义标签。每个标签都应该准确反映内容的语义角色。</p>
      </aside>

      <details>
        <summary>点击展开：非语义 vs 语义化对比</summary>
        <p>❌ &lt;div class="header"&gt; → ✅ &lt;header&gt;</p>
        <p>❌ &lt;div class="nav"&gt; → ✅ &lt;nav&gt;</p>
        <p>❌ &lt;div class="content"&gt; → ✅ &lt;main&gt;</p>
        <p>❌ &lt;div class="sidebar"&gt; → ✅ &lt;aside&gt;</p>
      </details>
    </article>
  </main>

  <footer>
    <p>&copy; 2025 我的博客 · 使用语义化HTML构建</p>
  </footer>
</body>
</html>
微数据标记 ✅ html 
<article itemscope itemtype="https://schema.org/BlogPosting">
  <h1 itemprop="headline">深入理解HTML5语义化</h1>
  <meta itemprop="datePublished" content="2025-01-15">
  <meta itemprop="author" content="张三">
  <div itemprop="articleBody">
    <p>这是文章正文，搜索引擎可以通过微数据理解文章结构。</p>
  </div>
</article>

🎯 练习任务

🏆 成就解锁
语义化大师 — 掌握HTML5语义标签的正确使用，构建对人类和机器都友好的网页