富文本排版的可读性取决于结构清晰、语义准确和CSS可控，HTML仅负责内容分层（段落、列表、标题等），所有视觉节奏（行高、间距、缩进、对齐）必须由CSS显式控制；滥用破坏语义与可访问性，<p>应包裹独立信息块，仅用于同一段内强制分行；标题须严格嵌套且唯一，列表必须用<ul><ol><dl>等语义容器，不可用<div>模拟；CSS的line-height、text-indent、margin-bottom等属性才是排版核心。
富文本排版的可读性不靠堆砌标签，而靠结构清晰、语义准确、CSS可控——HTML本身不“美化”，它只负责把内容分出主次、段落、列表、强调和引用；所有视觉节奏（行高、间距、缩进、对齐）必须由 CSS 显式控制。
用对 <p> 而不是滥用 <br>
很多人用多个 <br> 模拟段落间距，这是最常见也最危险的误用。浏览器会把 <br> 当作纯换行指令，不带语义、不参与可访问性树、无法被屏幕阅读器识别为内容分隔；更糟的是，它破坏了段落的逻辑完整性。
-
<p>表示一个完整语义段落，应包裹独立信息块，如一句话、一个观点、一段说明 -
<br>只用于同一段内强制分行场景：地址、诗歌、表单提示（如“密码需包含大小写字母和数字
且长度不少于8位”） - 连续两个
<p>之间默认有 margin-bottom，这是浏览器默认样式，但应显式用 CSS 覆盖，避免依赖 UA 样式 - 若发现页面中
<br>出现在标题后、列表项中或大量成对出现（<br><br>），基本可以判定结构混乱
标题层级必须严格嵌套且唯一使用 <main>
标题不是装饰，是内容骨架。跳级（如 <h1> 后直接 <h3>）、重复（多个 <h1>）、或用 <div class="title"> 替代 <h2>，都会让搜索引擎和读屏软件丢失上下文。
-
<h1>页面中仅出现一次，代表整个文档主题（通常与<title>一致） -
<main>必须包裹核心内容，且内部首个标题应为<h1>或<h2>（取决于是否已在外层定义过<h1>） - 章节标题用
<h2>，子章节用<h3>，以此类推；不要为“看起来大”而用<h1>套样式 - 避免用
style="font-size: 2em"模拟标题——这会让语义和样式彻底脱钩，后期改设计时极易失控
列表必须配语义化容器，不能靠空格或 <div> 拼凑
把一堆 <div> 加 class 写成“列表”，等于放弃浏览器默认样式、键盘导航支持和屏幕阅读器识别能力。无序/有序列表不是视觉样式问题，是结构表达问题。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
<ul>和<ol>是语义容器，<li>是唯一合法子元素，禁止嵌套其他块级标签（如<p>）在<li>外层 - 若列表项内容复杂（含段落、链接、图标），应在
<li>内部组织，而非用<div class="list-item">替代 - 自定义符号（如箭头、勾选）必须用 CSS 的
list-style-type或::marker控制，而非插入 Unicode 字符或图片 - 描述性列表（
<dl>）适用于术语解释、属性清单等场景，<dt>和<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 选择器和属性组合上。
