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