• 基础
  • 样式

  • 设置

4760

24 分钟

#语义化标签

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

头部
<header>
正文
<main>
文章
<article>
小节
<section>
页脚
<footer>

示例:

Primers 编程伙伴

Primers 编程伙伴

HTML5 引入了很多语义化标签(Semantic Tags),这些标签能更清晰地表达网页的结构和含义,有助于搜索引擎优化(SEO)、辅助技术(如屏幕阅读器)理解内容结构,也让代码更易读、维护性更好。
Copyright © 2025 Plan C All Rights Reserved. Powered by primers
<!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/5/14 17:15:21

更新于 2025/5/14 20:25:19