可用五种HTML方法精准排版诗歌：一、用<pre>标签保留原始格式；二、用<p><br>组合控制分行；三、用CSS text-indent与line-height精细排版；四、用CSS Grid定义诗节结构；五、用SVG嵌入手写体与装饰元素。
如果您希望用HTML展示诗歌的排版效果，需准确还原诗歌特有的分行、缩进、空行与视觉节奏。以下是实现这一目标的具体方法：
一、使用<pre>标签保留原始格式
<pre>标签会原样显示文本中的空格、换行和制表符，适合直接粘贴已排版好的诗歌文本，无需额外CSS干预。
1、在HTML文件中插入<pre>标签，并将诗歌内容逐行写入其中。
2、确保每行诗句之间用回车换行，缩进部分使用空格或Tab键输入。
立即学习“前端免费学习笔记（深入）”；
3、为提升可读性，可在<pre>外层添加<div>并设置字体为等宽字体，如monospace。
二、使用<p>与<br>组合控制分行
该方式通过语义化段落配合换行符实现精确控制，适用于需对每行诗句单独设置样式或添加交互的场景。
1、将每一句诗分别包裹在<p>标签内。
2、若某句内部需强制换行（如跨行断句），在句中插入<br>标签。
3、为避免段间距过大，可通过CSS设置p { margin: 0; }，再用padding或margin微调行距。
三、使用CSS text-indent与line-height精细排版
借助CSS属性可统一控制首行缩进、行高与垂直对齐，使多段诗歌保持视觉一致性，尤其适合古体诗或需要悬挂缩进的现代诗。
1、为诗歌容器（如<div class="poem">）设置font-family: "KaiTi", "STKaiti", serif;以适配中文书法感字体。
2、对每行诗句对应的<p>元素设置text-indent: 2em; 实现首行缩进。
3、设置line-height: 1.8; 保证行间留白充足，避免诗句拥挤。
四、使用CSS Grid定义诗节结构
当诗歌包含明确分节（如四行一节、八行一节），Grid布局可将每节作为独立单元进行定位与对齐，支持响应式断行与居中排版。
1、将整首诗包裹在<div class="poem-grid">中。
2、为每个诗节创建子<div class="stanza">，内部用<p>逐行放置诗句。
3、在CSS中定义.poem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5em; }。
五、嵌入SVG实现手写体与浮动装饰元素
SVG可用于叠加水墨笔触、印章、边框等传统诗歌视觉元素，增强艺术表现力，且不破坏HTML语义结构。
1、在诗歌主体<div>后插入<svg>标签，设置position: absolute; 与z-index: -1; 置于文字底层。
2、使用<path>绘制毛笔飞白线条，或用<text>元素加载手写体字体渲染题跋。
3、通过viewBox与preserveAspectRatio属性确保SVG在不同屏幕下等比缩放，避免使用固定width/height值。
