编程伙伴 - HTML - 基础

# HTML 的语义化标签

HTML5 引入了很多语义化标签（Semantic Tags），这些标签能更清晰地表达网页的结构和含义，有助于搜索引擎优化（SEO）、辅助技术（如屏幕阅读器）理解内容结构，也让代码更易读、维护性更好。

头部
<header>

正文
<main>

文章
<article>

小节
<section>

HTML 不负责排版，语义化标签仅表示语义，即 <nav> 表示导航栏，<article> 表示文章。
界面并不会按照上图那样进行布局，它由样式决定。请通过样式章节和 CSS 教程学习。

示例:

这里使用了很多还没有学习的标签和属性，仅作为演示。

<!DOCTYPE html>
<html>
    <head>
        <title>Primers 编程伙伴</title>
    </head>
    <body style="display:flex; flex-direction:column;">
        <header style="border:1px solid #39c5bb">
            <h1> Primers 编程伙伴 </h1>
        </header>

        <nav style="border:1px solid #39c5bb">
            <a href="/primers/document/zh/02.Python">Python</a>
            <a href="/primers/document/zh/03.HTML">HTML</a>
        </nav>
        
        <main style="display:flex;">
            
            <aside style="border:1px solid #39c5bb">
                <ul>
                    <li><a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/00.%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84.md">文档结构</a></li>
                    <li><a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/01.%E5%85%83%E7%B4%A0%E5%92%8C%E5%B1%9E%E6%80%A7.md">元素和属性</a></li>
                    <li><a href="/primers/document/zh/03.HTML/01.%E5%9F%BA%E7%A1%80/02.%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE.md">语义化标签</a></li>
                </ul>
            </aside>

            <article style="flex:1; border:1px solid #39c5bb">
                <section style="border:1px solid #39c5bb">
                    HTML5 引入了很多语义化标签（Semantic Tags），这些标签能更清晰地表达网页的结构和含义，有助于搜索引擎优化（SEO）、辅助技术（如屏幕阅读器）理解内容结构，也让代码更易读、维护性更好。
                </section>
            </article>
        </main>

        <footer style="border:1px solid #39c5bb">
            Copyright © 2025 <a href="https://xplanc.org/">Plan C</a> All Rights Reserved.
            Powered by <a href="https://github.com/hubenchang0515/primers">primers</a>
        </footer>
    </body>
</html>

本文更新于: 2025-06-19 01:16:07 创建于: 2025-06-19 01:16:07