HTML不作诗，语义化标记（section/p）加CSS排版才让诗歌像诗；禁用div堆砌和br换行，用section+role="region"+aria-label定义诗题，p标签表语义单元，br仅限p内强制断行；CSS用text-align:center+line-height控行高，首字缩进用span+margin-left:-2em，竖排用writing-mode:vertical-rl；禁用pre和 ，对齐用Grid；行距1.8、段距1.5em营造呼吸感。
HTML 本身不“作诗”，它只负责结构；真正让诗歌像诗的，是语义化标记 + CSS 排版控制。别用 <div> 堆砌诗句，也别靠多个 <code><br> 换行假装有韵律——那样既难维护，也不利于屏幕阅读器理解停顿与段落关系。
用 <poem></poem>？不，用 <section></section> 和 <p></p> 搭配 aria-label
HTML 标准里没有 <poem></poem> 标签（那是某些旧 CMS 或自定义方言）。正确做法是：
- 每首诗用
<section></section>包裹，加role="region"和aria-label="《静夜思》"明确语义 - 每一节（如四句一节）用
<p></p>，不是<div>；<code><p></p>天然表达“一个完整语义单元”，屏幕阅读器会自然停顿 - 如果某行需强制换行（如“床前明月光 / 疑是地上霜”中间断开），用
<br>—— 仅限此处，且必须在<p></p>内部 -
text-align: justify对中文无效（浏览器无汉字断词逻辑），改用text-align: center+line-height控制行高 - 实现「每行首字缩进两字符」：不用
text-indent（它缩进整行），而是给每行首字套<span class="first-char"></span>，再用margin-left: -2em往左拉，配合display: inline-block防止塌陷 - 若需「竖排右到左」（如仿古籍），用
writing-mode: vertical-rl，但注意 Firefox 对text-orientation: mixed支持不稳定，建议降级为text-orientation: upright
CSS 实现中文诗歌「空格对齐」与「悬挂缩进」
古诗常需「字字居中」「行尾对齐」「首字缩进两字符」等效果，纯靠 text-align: center 不够。关键在：
避免用 对齐、别硬塞 white-space: pre
常见错误是把整首诗塞进 <pre class="brush:php;toolbar:false;"></code> 或大量使用 <code> </code> 强制空格对齐。问题在于：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li><code><pre class="brush:php;toolbar:false;"></code> 会禁用自动换行，小屏幕直接溢出；且语义上它表示「预格式化文本」，比如代码块，不是诗歌</li>
<li><code> </code> 是不可折行空格，破坏响应式；用户缩放字体时，空格宽度不随文字缩放，对齐立刻错乱</li>
<li>真正需要对齐（如词牌名上下阕对照），用 CSS Grid：设 <code>display: grid; grid-template-columns: 1fr 1fr</code>，把左右两阕分别放进 <code><div></code> 子项</li>
</ul>
<pre class="brush:php;toolbar:false;"><section role="region" aria-label="《水调歌头》">
<p>明月几时有？<br>把酒问青天。</p>
<p>不知天上宫阙，<br>今夕是何年。</p>
</section></pre>
<p>最易被忽略的点：诗歌的「呼吸感」来自行间距与段间距的比例。别设 <code>line-height: 1.2 这种紧凑值——试试 line-height: 1.8，段间距设为 margin-bottom: 1.5em。人眼识别诗句停顿，靠的不是标点，是留白节奏。
