HTML写诗：诗歌排版与样式设计教程

用 ？不，用

和

搭配 aria-label

HTML 标准里没有 标签（那是某些旧 CMS 或自定义方言）。正确做法是：

• 每首诗用
  包裹，加 role="region" 和 aria-label="《静夜思》" 明确语义
• 每一节（如四句一节）用

  ，不是

  ；

  天然表达“一个完整语义单元”，屏幕阅读器会自然停顿

• 如果某行需强制换行（如“床前明月光 / 疑是地上霜”中间断开），用
—— 仅限此处，且必须在

  内部

CSS 实现中文诗歌「空格对齐」与「悬挂缩进」

古诗常需「字字居中」「行尾对齐」「首字缩进两字符」等效果，纯靠 text-align: center 不够。关键在：

• text-align: justify 对中文无效（浏览器无汉字断词逻辑），改用 text-align: center + line-height 控制行高
• 实现「每行首字缩进两字符」：不用 text-indent（它缩进整行），而是给每行首字套 ，再用 margin-left: -2em 往左拉，配合 display: inline-block 防止塌陷
• 若需「竖排右到左」（如仿古籍），用 writing-mode: vertical-rl，但注意 Firefox 对 text-orientation: mixed 支持不稳定，建议降级为 text-orientation: upright

避免用   对齐、别硬塞 white-space: pre

常见错误是把整首诗塞进

</code> 或大量使用 <code>&nbsp;</code> 强制空格对齐。问题在于：</p>
<ul><li><code><pre></code> 会禁用自动换行，小屏幕直接溢出；且语义上它表示「预格式化文本」，比如代码块，不是诗歌</li>
<li><code>&nbsp;</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>