html排版需先搭语义化骨架（header/nav/main/aside/footer），再用flex控制流向，最后微调尺寸；main标签明确内容重点、提升可访问性与seo，且需父容器设display: flex才能生效。
直接说结论：HTML排版不是“写对标签就行”，而是先搭骨架、再控流向、最后微调尺寸——零基础只要盯住 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这5个语义化标签，就踩准了90%网页的结构底线。
为什么用 <main></main> 而不是 <div> 套来套去
<p>浏览器和搜索引擎靠标签含义理解页面重点。<code><main></main> 明确告诉它们“这里才是核心内容”，而一堆 <div> 就像用纸箱装快递——外包装没标“易碎”“生鲜”，谁也不知道里面该优先处理什么。
<ul>
<li>不加语义标签，<code>screen reader（屏幕阅读器）可能跳过你的正文，残障用户根本读不到
<main></main> 默认是块级元素，天然独占一行，不用额外写 display: block
normalize.css）会对 <main></main> 做默认 margin 优化，<div> 则完全裸奔
<li>真要嵌套布局，<code><main></main> 内部再用 <section></section> 或 <article></article>，比 <div class="content"> 更直白
<h3>
<code>display: flex 必须配对生效，单写子元素 flex: 1 没用
新手最常卡在这一步：给 <aside></aside> 写了 width: 240px，给 <main></main> 写了 flex: 1，但页面还是上下堆叠——因为父容器没开 Flex 上下文。
- 必须先在包裹两者的容器上写
display: flex，比如<div class="layout"> 或直接用 <code> - 侧边栏固定宽 + 主内容自适应，推荐写法：
flex: 0 0 240px（不缩放、不增长、宽240px） +flex: 1 - 如果主内容里有长 URL 或英文单词不断行，得加
min-width: 0，否则flex: 1会撑破容器 - 移动端想变纵向堆叠？把父容器
flex-direction改成column，不用删代码重写
别碰 <table> 做整体布局，哪怕它看起来“很整齐”
<p><code><table> 的本职是展示二维数据（如课程表、价格对比），不是搭网页骨架。强行用它做三栏，等于拿螺丝刀当锤子——能敲，但手疼、效率低、还容易崩。
<ul>
<li>表格单元格默认 <code>vertical-align: middle，文字上下居中，但段落、图片、按钮混排时高度难统一
colspan 和 rowspan 逻辑立刻混乱，改一个地方要同步调十几个属性display: table-cell 是更可控的降级方案，比原生 <table> 标签干净得多
<p>真正难的不是写对某一行代码，而是判断“这个区域该归到哪个语义标签里”。比如“搜索框”放在 <code><header></header> 还是 <nav></nav>？取决于它是否属于全局导航流——如果只在文章页出现，就该进 <main></main> 里的 <section></section>。这种判断比记住 justify-content 参数顺序重要得多。
