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