<article>
<section>
约 4760 字
约 24 分钟
HTML5 引入了很多语义化标签(Semantic Tags),这些标签能更清晰地表达网页的结构和含义,有助于搜索引擎优化(SEO)、辅助技术(如屏幕阅读器)理解内容结构,也让代码更易读、维护性更好。
头部
<header>正文
<main>文章
<article>小节
<section>
示例:
Primers 编程伙伴Primers 编程伙伴
HTML5 引入了很多语义化标签(Semantic Tags),这些标签能更清晰地表达网页的结构和含义,有助于搜索引擎优化(SEO)、辅助技术(如屏幕阅读器)理解内容结构,也让代码更易读、维护性更好。
<!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