富文本排版的可读性取决于结构清晰、语义准确和css可控，html仅负责内容分层（段落、列表、标题等），所有视觉节奏（行高、间距、缩进、对齐）必须由css显式控制；滥用破坏语义与可访问性，应包裹独立信息块，仅用于同一段内强制分行；标题须严格嵌套且唯一，列表必须用等语义容器，不可用模拟；css的line-height、text-indent、margin-bottom等属性才是排版核心。
富文本排版的可读性不靠堆砌标签，而靠结构清晰、语义准确、CSS可控——HTML本身不“美化”，它只负责把内容分出主次、段落、列表、强调和引用；所有视觉节奏（行高、间距、缩进、对齐）必须由 CSS 显式控制。
用对 <p></p> 而不是滥用 <br>
很多人用多个 <br> 模拟段落间距，这是最常见也最危险的误用。浏览器会把 <br> 当作纯换行指令，不带语义、不参与可访问性树、无法被屏幕阅读器识别为内容分隔；更糟的是，它破坏了段落的逻辑完整性。
-
<p></p>表示一个完整语义段落，应包裹独立信息块，如一句话、一个观点、一段说明 -
<br>只用于同一段内强制分行场景：地址、诗歌、表单提示（如“密码需包含大小写字母和数字
且长度不少于8位”） - 连续两个
<p></p>之间默认有 margin-bottom，这是浏览器默认样式，但应显式用 CSS 覆盖，避免依赖 UA 样式 - 若发现页面中
<br>出现在标题后、列表项中或大量成对出现（<br><br>），基本可以判定结构混乱
标题层级必须严格嵌套且唯一使用 <main></main>
标题不是装饰，是内容骨架。跳级（如 <h1></h1> 后直接 <h3></h3>）、重复（多个 <h1></h1>）、或用 <div class="title"> 替代 <code><h2></h2>，都会让搜索引擎和读屏软件丢失上下文。
-
<h1></h1>页面中仅出现一次，代表整个文档主题（通常与<title></title>一致） -
<main></main>必须包裹核心内容，且内部首个标题应为<h1></h1>或<h2></h2>（取决于是否已在外层定义过<h1></h1>） - 章节标题用
<h2></h2>，子章节用<h3></h3>，以此类推；不要为“看起来大”而用<h1></h1>套样式 - 避免用
style="font-size: 2em"模拟标题——这会让语义和样式彻底脱钩，后期改设计时极易失控
列表必须配语义化容器，不能靠空格或 <div> 拼凑
<p>把一堆 <code><div> 加 class 写成“列表”，等于放弃浏览器默认样式、键盘导航支持和屏幕阅读器识别能力。无序/有序列表不是视觉样式问题，是结构表达问题。
<ul>
<li>
<code><ul></ul> 和 <ol></ol> 是语义容器，<li> 是唯一合法子元素，禁止嵌套其他块级标签（如 <p></p>）在 <li> 外层
<li> 内部组织，而非用 <div class="list-item"> 替代
<li>自定义符号（如箭头、勾选）必须用 CSS 的 <code>list-style-type 或 ::marker 控制，而非插入 Unicode 字符或图片<dl></dl>）适用于术语解释、属性清单等场景，<dt></dt> 和 <dd></dd> 必须成对出现，不可省略任一标签CSS 控制排版节奏比 HTML 标签更重要
HTML 定义“这是什么”，CSS 决定“它怎么呼吸”。很多团队花时间调整 HTML 缩进和换行，却忽略真正影响可读性的 CSS 参数。
- 段落行高优先用无单位值：
line-height: 1.6，而非line-height: 24px，否则字号变大时行高不会同比例放大 - 首行缩进统一用
text-indent: 2em，不要混用margin-left，后者会整体偏移整段 - 段落间距只设
margin-bottom，避免margin-top引发外边距合并（collapsing margin）导致空白不可预期 - 长文推荐
text-align: justify+hyphens: auto（配合lang属性），但中文慎用hyphens，优先靠字间距或行宽控制 -
white-space不要乱设：普通正文必须是normal；只有代码块、诗歌、用户输入预览才考虑pre-wrap
最容易被忽略的点是：HTML 格式化（缩进、换行）只影响开发者阅读效率，不影响渲染结果；而 CSS 中任何一个排版属性写错，都会立刻破坏用户端的阅读流。别在 HTML 里“假装排版”，真功夫得下在 CSS 选择器和属性组合上。
