纯靠html标签无法可靠调整文字视觉效果，所有排版样式必须由css控制；p、h1等标签仅负责语义，浏览器默认样式松散不可控，行高、字距、缩进、对齐等均需通过line-height、letter-spacing、text-indent、text-align等css属性实现。
纯靠 HTML 标签无法可靠调整文字视觉效果，所有排版样式必须交由 CSS 控制；<p></p>、<h1></h1> 等标签只负责语义，浏览器默认样式只是临时参考，不能当作设计依据。
为什么直接写 <p></p> 和 <h2></h2> 看不出排版效果
浏览器确实给 <p></p> 加了上下 margin，<h1></h1> 加了粗体和缩放，但这些值松散、不一致、不可控。比如 <p></p> 默认 margin 是 1em，但在重置 CSS（如 * { margin: 0; }）后就完全消失，段落贴在一起——这不是 bug，是设计使然。
- HTML 不提供行高、字距、对齐、缩进等视觉参数，这些全是 CSS 职责
-
align属性（如<p align="center"></p>）在 HTML5 中已废弃，现代浏览器虽兼容，但会触发 quirks 模式，与 CSS 冲突风险高 - 用
<br>强制换行 ≠ 分段，它不产生语义分隔，也不带间距，CSS 难以统一控制
text-indent、line-height、letter-spacing 怎么设才自然
中文排版常见崩坏点不是不会写，而是参数没匹配语言习惯和字体尺寸。例如首行缩进用空格或 <span> </span>，既破坏语义，又在缩放或屏幕阅读器下失效。
- 中文段落首行缩进：必须用
text-indent: 2em，不用 px 或固定空格 - 正文行高建议用无单位值：
line-height: 1.6—— 它随字体大小缩放，line-height: 24px在 12px 字体下会撑开两倍行距 - 字距推荐
letter-spacing: 0.05em（正文）、0.1em（标题），超过0.08em易降低可读性 - 中英文混排时加
text-rendering: optimizeLegibility，能改善连字与字距渲染
竖排、居中、对齐这些“看起来简单”的操作为什么总出错
竖排不是旋转容器，居中不是瞎调 margin，对齐更不是靠 align 属性硬塞——每个都有明确的语义路径和兼容前提。
- 中文竖排必须用
writing-mode: vertical-rl+text-orientation: upright，否则英文字母堆成一列 -
text-align: center在竖排下是垂直居中（即文字沿水平轴居中），不是横向居中，容易误判 - 容器需设固定
height或配合overflow: hidden，否则竖排内容会让父元素无限拉高 - 居中标题用
text-align: center可行，但正文应保持text-align: left（中文阅读更自然），不要全局居中
真正卡住人的从来不是某个 CSS 属性不会写，而是没意识到：HTML 只回答“这是什么”，CSS 才回答“它看起来怎样”；一旦混淆这两层，所有调整都会变成补丁套补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
