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 排版控制。别用 HTML 标准里没有 古诗常需「字字居中」「行尾对齐」「首字缩进两字符」等效果，纯靠 常见错误是把整首诗塞进 立即学习“前端免费学习笔记（深入）”； 明月几时有？ 不知天上宫阙， 最易被忽略的点：诗歌的「呼吸感」来自行间距与段间距的比例。别设 相关文章 带边框线的HTML5按钮细线样式写法【攻略】 html如何转圈_html实现加载转圈动画的CSS技巧【详解】 html如何变圆_html实现元素圆形样式的CSS技巧【详解】 html如何画圆_HTML+CSS实现圆形元素的技巧【详解】 HTML5空格在React里会失效吗_React空格显示问题排查【汇总】 本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 热门AI工具用
和 搭配 aria-label
包裹，加 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
或大量使用 强制空格对齐。问题在于：
会禁用自动换行，小屏幕直接溢出；且语义上它表示「预格式化文本」，比如代码块，不是诗歌 是不可折行空格，破坏响应式；用户缩放字体时，空格宽度不随文字缩放，对齐立刻错乱display: grid; grid-template-columns: 1fr 1fr，把左右两阕分别放进
把酒问青天。
今夕是何年。line-height: 1.2 这种紧凑值——试试 line-height: 1.8，段间距设为 margin-bottom: 1.5em。人眼识别诗句停顿，靠的不是标点，是留白节奏。
