用<p>逐行包裹诗句是唯一兼顾语义、响应式与可访问性的做法；<pre>强制等宽字体、禁用换行，破坏缩放与屏幕阅读器理解；每行须独立<p>，配合line-height:1.8、margin-bottom:0.6rem、text-indent:2em精准控制呼吸感。
用 <p> 逐行包裹诗句，配合 CSS 控制 line-height、text-indent 和 margin-bottom，是唯一兼顾语义、响应式与可访问性的做法；<pre> 或硬塞 <br> 看似省事，实则破坏缩放、对齐和屏幕阅读器理解。
为什么不能直接用 <pre> 包整首诗
浏览器会强制等宽字体、禁用自动换行，移动端极易横向溢出；text-align、text-indent 在多数环境里被忽略，white-space: pre 还会让空格和制表符原样渲染——你写两行诗，结果贴着左边缘挤成小字号，无法居中、不能缩放、不继承父级字体。错误示例：<pre>明月几时有？把酒问青天。\n不知天上宫阙，今夕是何年。</pre>
每行诗必须单独用 <p> 包裹
HTML 不压缩 <p> 标签之间的空白，但会压缩标签内部的换行和多余空格，所以必须显式写开：
<section aria-label="《水调歌头》"> <p>明月几时有？把酒问青天。</p> <p>不知天上宫阙，今夕是何年。</p> <p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p> </section>
-
<section>加aria-label告诉屏幕阅读器这是独立文学单元，不是普通段落集合 - 别用
<div>替代<p>：它没有语义停顿，读屏软件不会在句尾自然停顿 - 禁止
<p><h2>标题</h2>正文</p>：浏览器会自动闭合<p>，导致 DOM 结构断裂
CSS 控制“呼吸感”的关键参数
诗歌排版的质感不在字体或颜色，而在行高、段距、缩进三者的比例关系：
立即学习“前端免费学习笔记（深入）”；
-
line-height: 1.8——无单位值，避免小屏下像素固定导致拥挤 -
margin-bottom: 0.6rem——用rem而非px，随根字体缩放；只设margin-bottom，防外边距合并 -
text-indent: 2em——仅首行缩进，不影响整段位置；别用全角空格或 -
text-align: center适合短诗；若需两端对齐（如词牌上下阕对照），改用display: grid划分列容器，而非依赖text-align: justify（对中文基本无效）
最容易被忽略的是：空行不是靠敲回车实现的，而是由 margin-bottom 的数值决定的；同一首诗里混用 <pre>、<br> 和 <p>，等于放弃对行距的统一控制——哪怕只错一行，整首诗的节奏就塌了。
