用语义化HTML标签搭骨架，CSS控制排版属性；禁用align和多余br；p和标题需语义正确；line-height用无单位值；font-size正文16px、标题用em；text-indent用于中文首行缩进；竖排用writing-mode。
直接用 <p>、<h1>～<h6>、<ul> 这些语义化标签搭骨架，再靠 CSS 控制 font-size、line-height、margin 和 letter-spacing，就能做出清晰可读、兼容性好、缩放稳定的排版——别碰 align 属性，它早已被废弃，也别用多个 <br> 代替段落。
用对 <p> 和标题标签是排版的起点
每个 <p> 必须包裹一个逻辑完整的文本块，不是为了换行，而是告诉浏览器“这里是一段独立信息”。嵌套 <div> 或 <h2> 到 <p> 里会触发解析器自动修复，DOM 和你写的不一致。
-
<h1>全页只能有一个，代表主主题；<h2>～<h6>按层级递进，不能跳级（比如<h2>后直接写<h4>） - 标题和段落默认有上下 margin，但这个值不可靠，建议显式重置：
p { margin: 1.2em 0; } - 废弃的
align属性（如<p align="center">）在 HTML5 中无效，必须用 CSS 的text-align
line-height 必须用无单位数值
写 line-height: 1.6，而不是 line-height: 24px 或 line-height: 160%。前者会随 font-size 动态计算，后者在父元素字号变化时会卡死，导致 Flex 容器里文字上下偏移、基线错位。
- 正文推荐
font-size: 16px; line-height: 1.6;（即 25.6px），这是浏览器默认、系统缩放兼容、移动端防强制放大的交集点 - 标题用相对值，比如
h2 { font-size: 1.5em; line-height: 1.4; }，保持垂直节奏连贯 - 避免设
line-height: normal——它依赖字体度量，不同字体渲染结果差异大
letter-spacing 和 text-indent 要按场景微调
中文段落首行缩进用 text-indent: 2em 比用空格或 可靠；而 letter-spacing 主要用于标题强化或西文混排优化，日常正文一般不用。
立即学习“前端免费学习笔记（深入）”；
- 标题加大字间距：
h1 { letter-spacing: 0.1em; }（注意是 em，不是 px，适配缩放） - 中英文混排时，若西文显得拥挤，可对
span.lang-en单独设letter-spacing: 0.02em -
text-indent不继承，子元素需单独设置；且不要给<h1>加，它本身就不该首行缩进
竖排布局必须用 writing-mode，别手写换行
需要竖排（比如古籍、对联），直接上 writing-mode: vertical-rl; + text-orientation: mixed;。手动把每个字包成 <span> 再绝对定位，既不可维护，又破坏 SEO 和可访问性。
-
vertical-rl是中文传统竖排（从右到左、从上到下）；vertical-lr适合蒙古文等 -
text-orientation: mixed让拉丁字母和数字保持水平，upright强制全部直立 - 竖排下的“行高”实际是列宽，用
line-height仍有效，但视觉效果需实测，尤其含 ascender/descender 的字体
真正难的不是写出样式，而是克制——少用 !important，少写固定像素值，少嵌套无意义的 <div>。排版的稳定性，往往藏在那些没写的 CSS 里。
