正在加载...

HTML 语义元素

在 div 与 class/id 之后，语义按含义命名区域。

先含义后盒子

CSS 能美化任何标签；语义记录意图。主导航 → nav。本页独特内容 → main。

直接回答

含义匹配时用 landmarks。一个 main。不要把整个站点包进一个 article。

📊 Core landmarks

Element	Typical meaning
header	Introductory or banner content for a page or section
nav	Major navigation links
main	Dominant unique content of this page
article	Independent composition (post, story, card that could stand alone)
section	Thematic grouping, usually with a heading
aside	Side note related to the surrounding content
footer	Closing content for a page or section

简单页面骨架

顶栏与链接，独特内容放 main，页脚收尾。

Simple semantic skeleton

html

HTML Code

<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>

读骨架

header 常含 nav
一个 main
footer 收尾

article、section 与 aside

在 main 内：可独立成篇、主题分段、相关旁注。

Article section and aside

html

HTML Code

<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>

读第二示例

article 可独立成立
section 有标题
aside 不是第二个 main

landmark 与 div

标准角色？landmark。仅布局包裹？div。

练习

header/nav/main/footer
故事只在 main
一个 article
确认只有一个 main

易错点

多个 main
无主题 section
随意堆 landmarks

小结

语义命名含义
一个 main
角色匹配再用 landmark

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言