CSS属性（如line-height、letter-spacing、writing-mode）才是控制精美排版的核心，HTML标签仅负责语义；需覆盖浏览器默认样式，用现代CSS实现竖排、缩进、可访问性等需求。
p 和 h1–h6 是排版骨架，但仅靠它们做不出“精美”——真正起作用的是 CSS 属性，比如 line-height、letter-spacing、text-align，以及现代排版核心 writing-mode。
为什么直接写 <p> 和 <h2> 看不出效果
浏览器对这些标签有默认样式：比如 p 自带上下外边距，h1 字体大且加粗，但行高松散、字距生硬、对齐方式单一。不覆盖默认值，就等于没控制排版。
- 所有现代排版控制都必须通过
style属性或外部 CSS 实现，HTML 标签本身只负责语义（比如“这是标题”，不是“这要显示成 24px 加粗居中”） -
align属性（如<p align="center">）已废弃多年，用它会触发 quirks 模式，CSS 解析可能异常 - 中文竖排、英文字符直立、段落首行缩进等需求，
p和h标签完全无法响应
line-height 和 letter-spacing 怎么配才自然
这两个值不是越大越好看，而是要匹配字体大小和语言习惯。中文段落常见组合是：font-size: 16px + line-height: 1.75 + letter-spacing: 0.05em。
-
line-height推荐用无单位数值（如1.6），避免固定像素值在缩放时断裂 -
letter-spacing用em单位比px更稳——0.03em在 14px 字体下约 0.42px，在 20px 下约 0.6px，比例一致 - 标题可适当加大字距（
0.1em～0.15em），但正文超过0.08em就容易降低可读性 - 中英文混排时，
letter-spacing对西文影响更明显，建议用text-rendering: optimizeLegibility微调
竖排文字必须用 writing-mode: vertical-rl
别再用 transform: rotate(90deg) 或手动换行模拟竖排——那样文本不可选、无法复制、SEO 失效，而且响应式一塌糊涂。
立即学习“前端免费学习笔记（深入）”；
-
writing-mode: vertical-rl是唯一语义正确、无障碍友好、支持搜索索引的方案 - 中文竖排必须配
text-orientation: upright，否则英文字母会横向堆叠成一条线（比如 “HTML” 变成 H↵T↵M↵L） - 容器必须设固定
height，否则竖排内容会让父容器无限拉长；配合overflow: hidden或text-overflow: ellipsis控制截断更稳妥 - 竖排时
text-align: center表示垂直居中，text-align: right表示顶部对齐——方向逻辑和横排相反，容易踩坑
容易被忽略的细节：首行缩进、颜色对比、继承污染
很多“精美排版”在真实项目里崩掉，不是因为不会写，而是漏掉了这几个链路：
- 中文段落首行缩进要用
text-indent: 2em，不能靠空格或 -
color和背景色对比度低于 WCAG 4.5:1 时，即使视觉上“挺清楚”，也属于可访问性缺陷；可用 Chrome DevTools 的 Lighthouse 面板一键检测 -
letter-spacing和line-height会继承给子元素（比如strong里的文字），若没重置，加粗部分字距/行高会异常放大 - 用
pre标签保留格式时，它自带等宽字体和空白符渲染，但默认没有行高控制，常需额外加line-height: 1.4
