HTML怎么用格式化标签美化诗歌排版-html教程-PHP中文网

用逐行包裹诗歌并配css控制间距是最稳定、语义正确、可维护性最强的做法；因强制等宽字体、禁用换行、不支持缩进与响应式，不适合正式排版。

html怎么用格式化标签美化诗歌排版

直接用 <p></p> 逐行包裹诗歌，再配 text-indent 和 line-height 控制间距，是最稳定、语义正确、可维护性最强的做法；<pre class="brush:php;toolbar:false;"></pre> 虽能保留换行，但会破坏响应式、无法缩进、字体固定，仅适合极简展示或调试。

为什么不用 `<pre class="brush:php;toolbar:false;"></pre>` 排版正式诗歌

<pre class="brush:php;toolbar:false;"></pre> 强制使用等宽字体，禁用文本自动换行，且默认 white-space: pre 会让所有空格、制表符原样渲染——这在移动端极易横向溢出；更关键的是它不支持首行缩进、段间距调整或字体继承，text-align、text-indent 在多数浏览器里会被忽略。你写成：

<pre class="brush:php;toolbar:false;">明月几时有？把酒问青天。  
不知天上宫阙，今夕是何年。

结果就是两行紧贴左边缘、字号小、不能居中、不能响应式缩放。

用 `<p></p>` + CSS 实现可控的诗歌呼吸感

每行诗单独用 <p></p> 包裹，靠 CSS 控制视觉节奏，这才是现代做法。关键不是“怎么分行”，而是“怎么留白”：

line-height: 1.8 —— 行高设为无单位值，避免固定像素导致小屏拥挤
margin-bottom: 0.6rem —— 段后距用相对单位，比 margin-top 更安全（防外边距合并）
text-indent: 2em —— 首行缩进只作用于第一行，不影响整段位置
text-align: center 或 text-align: justify —— 居中更适合短诗，两端对齐需配合 hyphens: auto

示例结构：

<section aria-label="《水调歌头》"><p>明月几时有？把酒问青天。</p>
  <p>不知天上宫阙，今夕是何年。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
														src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
													<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
</section>

别碰已废弃的属性：比如 `align`、`<font></font>`、`<center></center>`

这些标签和属性在 HTML5 中已被移除语义支持，现代浏览器虽可能兼容，但：

<h2 align="center"></h2> 不触发任何可访问性角色，屏幕阅读器不会识别对齐意图
<font color="red"></font> 无法被 CSS 变量或暗色模式接管，硬编码颜色等于放弃设计一致性
<center></center> 是纯表现标签，W3C 明确标记为 obsolete，VS Code 的 Prettier 会直接报 warning

所有样式必须走 CSS：section { text-align: center; }，p { color: var(--poem-accent, #c00); }。

容易被忽略的细节：语义、可访问性与空行处理

诗歌不是代码块，它的结构需要被机器理解：

用 <section></section> 包裹整首诗，并加 aria-label（如 aria-label="《登高》杜甫"），让读屏软件知道这是独立文学单元
避免在 <p></p> 内部用 <br> 换行——它没语义，且破坏段落间距控制逻辑
源码里两个 <p></p> 之间留空行，是给开发者看的，不影响渲染，但大幅提升协作可读性
如果某首诗有“叠句”或“重复段”，不要复制粘贴 <p></p>，改用 CSS ::before 或 JS 动态注入，避免冗余 DOM