用分段配合css控制样式可提升长文本可读性；是语义声明而非样式开关；仅用于同一逻辑块内换行，不可替代。
直接用 <p></p> 分段，配合 CSS 控制 margin、line-height 和 text-indent，就能解决 90% 的长文本可读性问题；语义化标签如 <strong></strong>、<em></em>、<mark></mark> 不是“加粗斜体开关”，而是内容意图的声明——浏览器默认样式只是副产品。
为什么不能用 <br> 代替 <p></p> 分段
常见错误是连续写多个 <br> 模拟段落，结果页面一缩放或换设备就错位，屏幕阅读器也读不出段落边界。它只表示“此处换行”，不携带任何语义。
-
<br>是行内强制换行，适合诗句、地址等**同一逻辑块内的分行**，比如<p>北京市朝阳区<br>建国路8号</p>
-
<p></p>是块级分段，每个都自带上下 margin，且被搜索引擎和辅助技术识别为独立信息单元 - 嵌套滥用：在
<p></p>里塞<div> 或另一个 <code><p></p>会触发 HTML 解析警告，部分浏览器会自动闭合前一个<p></p><strong></strong>和<b></b>看起来一样，但用法完全不同两者都让文字变粗，但语义天差地别：
<strong></strong>表示内容重要性提升（比如警告、关键结论），<b></b>只是视觉加粗，无强调意图（比如产品名、中文关键词、象声词）。- SEO 和可访问性工具会响应
<strong></strong>，但忽略<b></b> - 用错场景举例：把“iPhone 15”写成
<strong>iPhone 15</strong>是错的——它不是逻辑重点，只是品牌标识，该用<b></b> - 如果需要统一控制加粗样式，应通过 CSS 设置
font-weight，而非依赖标签默认表现
处理超长无空格文本（如 base64、长 URL）必须加
word-wrap或overflow-wrap纯靠
<p></p>标签无法阻止xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx这类字符串撑破容器——它会直接溢出或横向滚动，破坏排版节奏。- CSS 必须显式设置：
p { word-wrap: break-word; }或更现代的overflow-wrap: break-word; - 仅设
white-space: normal;不够，它只管空格换行，对连续无空格字符无效 - 移动端尤其敏感：iOS Safari 对
word-break: break-all;支持不稳定，优先选overflow-wrap
<pre class="brush:php;toolbar:false;"></pre>不是“保留格式万能解”，它会禁用所有换行与缩进优化很多人看到代码块或 ASCII 图就本能套
<pre class="brush:php;toolbar:false;"></pre>，结果正文行高崩坏、首行缩进失效、响应式断点完全失灵。-
<pre class="brush:php;toolbar:false;"></pre>会原样保留所有空白符（包括 tab 和多空格），同时关闭自动换行，适合真正需要“字节级还原”的场景（如调试输出、协议帧） - 普通代码展示推荐用
<code>+<pre class="brush:php;toolbar:false;"></pre>组合，并配 CSS：pre { overflow-x: auto; white-space: pre-wrap; } - 想保留缩进而又允许换行？用
white-space: pre-line;—— 它合并连续空格但保留换行符
最常被忽略的是：段落语义和 CSS 控制必须同步演进。比如你用
<p class="intro"></p>，却没在 CSS 里重置它的 margin，或者给<strong></strong>加了颜色却忘了在暗色模式下适配——排版不是贴标签，是结构、样式、意图三者的持续对齐。 - SEO 和可访问性工具会响应
