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

常见错误是把整首诗塞进

 或大量使用   强制空格对齐。问题在于：

 会禁用自动换行，小屏幕直接溢出；且语义上它表示「预格式化文本」，比如代码块，不是诗歌
  是不可折行空格，破坏响应式；用户缩放字体时，空格宽度不随文字缩放，对齐立刻错乱
真正需要对齐（如词牌名上下阕对照），用 CSS Grid：设 display: grid; grid-template-columns: 1fr 1fr，把左右两阕分别放进 
 子项

  
明月几时有？
把酒问青天。
  
不知天上宫阙，
今夕是何年。


最易被忽略的点：诗歌的「呼吸感」来自行间距与段间距的比例。别设 line-height: 1.2 这种紧凑值——试试 line-height: 1.8，段间距设为 margin-bottom: 1.5em。人眼识别诗句停顿，靠的不是标点，是留白节奏。
理论要掌握，实操不能落！以上关于《HTML写诗：诗歌排版与样式设计教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！