正在加载...

HTML 布局

语义之后是布局：组装区域；CSS 负责摆放。

先结构后视觉摆放

先理清页面故事，再做栏——不要巨型表格。

直接回答

landmarks 骨架。独特内容放 main。栏用 CSS。不要用布局 table。

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

landmark 页面骨架

header、行、main+article、aside、footer。div.row 只是 CSS 钩子。

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

读骨架

故事在 main
aside 相关
无 CSS 时仍纵向堆叠

用小段 CSS 提示分栏

同一 landmarks；.row 用 flex。

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

读 flex 预览

含义不变
main 更宽
不要用 td 做栏

表格用于数据，不是页面框架

避免布局表格。

练习

header/main/aside/footer
article 只在 main
不要布局 table

易错点

布局表格
省略 main
把 row 当 landmark

小结

HTML 命名；CSS 摆放
避免布局表格
下一课：响应式

🧠 测试您的知识

准备开始

测试您的知识

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

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

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

语言