诗歌排版应避免用<br>替代语义结构，因其仅控制视觉换行而破坏屏幕阅读器对诗行的语义识别；推荐用<pre>或每行套<p>加CSS间距，确保可访问性与语义完整性。
br 标签在诗歌排版中为什么不能用 <br> 替代语义结构
因为诗歌的每行是内容语义单位，不是视觉装饰——<br> 只表示“这里断行”，不表示“这是独立诗行”。如果把整首诗塞进一个 <p> 里靠 <br> 换行，屏幕阅读器会把它读成一句超长串，中间插入生硬停顿，对视障用户极不友好。
真正需要保留分行语义时，应优先考虑 <pre> 或带 white-space: pre-line 的容器；只有当诗歌作为纯静态文本、且明确无需语义分层（如页脚签名档）时，<br> 才是合理选择。
怎么写才让诗歌既保持分行又不破坏可访问性
推荐两种稳妥做法：
- 用
<pre>包裹原始换行文本，浏览器自动按源码折行，且保留语义完整性 - 用
<p>套每行诗，再配 CSS 控制间距：margin-bottom: 0.5em，这样每行都是独立焦点项、可单独加样式、响应式下也能统一控制 - 若必须用
<br>（比如 CMS 导出限制），至少确保父容器有role="poem"和aria-label描述，辅助技术才可能识别上下文
常见错误：连续多个 <br> 在诗歌里制造空行
比如这样写：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<p>床前明月光<br><br>疑是地上霜<br><br>举头望明月</p>
问题不止是冗余——双 <br> 会被某些屏幕阅读器解析为“句间停顿+段落结束”，导致语音节奏错乱。更糟的是，打印或高对比度模式下，多余换行可能撑开布局。
正确做法：
- 空行需求改用 CSS：
margin-bottom: 1.2em控制诗节间距 - 单行换行只用一个
<br>，且前后不加空格或换行符（避免渲染异常） - 富文本编辑器导出时开启“转换换行为
<p>”选项，比手动补<br>更可靠
为什么 <br> 在地址和诗歌里能用，但在按钮文字里不能用
关键看换行是否属于内容本体：
- 地址中的“上海市浦东新区”和“张江路123号”天然属于同一逻辑单元，
<br>是内容表达所需 - 按钮文字如
<button>确<br>认</button>把语义连贯词硬拆，语音合成器会读成“确（停顿）认”，键盘聚焦时也仍是一个焦点，但视觉割裂 - 按钮内换行应走 CSS：
white-space: normal+ 宽度限制，或用display: flex; flex-direction: column
最容易被忽略的一点：哪怕只是临时调试，也不要为了“看起来对齐”就在 HTML 里堆 <br>——它一旦混入生产模板，后续维护者很难分辨哪些是语义必需、哪些是历史遗留。
