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