语义元素

什么是语义元素？

语义元素 = 有意义的元素。它们清楚地描述了元素的用途和其内容的意义。

主要 HTML5 语义元素

1. 页面结构元素

• <div> - 盒子
• <header> - 页眉
• <nav> - 导航
• <main> - 主要内容
• <article> - 独立内容
• <section> - 内容区块
• <aside> - 侧边内容
• <footer> - 页脚

2. 内容语义元素

• <figure>和<figcaption>

<!-- 
    <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
    <figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
    <figcaption> 标签定义 <figure> 元素的标题.
    <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
 -->
<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

• <mark> - 突出显示
• <time> - 时间信息

语义化示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技新闻网站</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; line-height: 1.6; }
        header, footer { background: #333; color: white; padding: 1rem; }
        nav ul { list-style: none; display: flex; gap: 2rem; }
        nav a { color: white; text-decoration: none; }
        main { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; padding: 2rem; }
        article { margin-bottom: 2rem; }
        aside { background: #f4f4f4; padding: 1rem; }
    </style>
</head>
<body>
    <!-- 网站页眉 -->
    <header>
        <h1>科技前沿</h1>
        <p>最新科技动态与深度分析</p>
        
        <!-- 主导航 -->
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#ai">人工智能</a></li>
                <li><a href="#web">前端技术</a></li>
                <li><a href="#mobile">移动开发</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- 页面主要内容 -->
    <main>
        <!-- 文章内容区域 -->
        <article>
            <header>
                <h2>HTML5 语义化的重要性</h2>
                <p>发布时间：<time datetime="2024-01-15">2024年1月15日</time></p>
            </header>
            
            <section>
                <h3>什么是语义化</h3>
                <p>语义化 HTML 是指使用恰当的标签来传达内容的意义，而不仅仅是定义外观。</p>
                <p>例如，使用 <mark>&lt;article&gt;</mark> 而不是 <mark>&lt;div class="article"&gt;</mark>。</p>
            </section>
            
            <section>
                <h3>为什么重要</h3>
                <p>语义化对可访问性、SEO 和代码维护都有重要意义。</p>
                
                <figure>
                    <img src="semantic-structure.jpg" alt="HTML5语义结构示意图">
                    <figcaption>图：HTML5 文档结构示意图</figcaption>
                </figure>
            </section>
            
            <footer>
                <p>作者：前端开发者</p>
                <p>标签：HTML5, 语义化, 前端开发</p>
            </footer>
        </article>

        <!-- 侧边栏 -->
        <aside>
            <section>
                <h3>相关文章</h3>
                <ul>
                    <li><a href="#">CSS Grid 布局指南</a></li>
                    <li><a href="#">JavaScript ES6 新特性</a></li>
                    <li><a href="#">响应式设计最佳实践</a></li>
                </ul>
            </section>
            
            <section>
                <h3>广告</h3>
                <p>学习前端开发的最佳课程...</p>
            </section>
        </aside>
    </main>

    <!-- 网站页脚 -->
    <footer>
        <p>&copy; 2024 科技前沿. 保留所有权利.</p>
        <address>
            联系我们: <a href="mailto:contact@example.com">contact@example.com</a>
        </address>
    </footer>
</body>
</html>