html如何作诗_用HTML展示诗歌排版效果【诗歌】

标签会原样显示文本中的空格、换行和制表符，适合直接粘贴已排版好的诗歌文本，无需额外CSS干预。
<p>1、在HTML文件中插入</p><pre class="brush:php;toolbar:false;">标签，并将诗歌内容逐行写入其中。
<p>2、确保每行诗句之间用回车换行，缩进部分使用空格或Tab键输入。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>3、为提升可读性，可在</p><pre class="brush:php;toolbar:false;">外层添加<div>并设置字体为等宽字体，如monospace。

<h2>二、使用</h2>
<p>与<br>组合控制分行
</p>
<p>该方式通过语义化段落配合换行符实现精确控制，适用于需对每行诗句单独设置样式或添加交互的场景。</p>
<p>1、将每一句诗分别包裹在</p>
<p>标签内。</p>
<p>2、若某句内部需强制换行（如跨行断句），在句中插入<br>标签。</p>
<p>3、为避免段间距过大，可通过CSS设置p { margin: 0; }，再用padding或margin微调行距。</p>

<h2>三、使用CSS text-indent与line-height精细排版</h2>
<p>借助CSS属性可统一控制首行缩进、行高与垂直对齐，使多段诗歌保持视觉一致性，尤其适合古体诗或需要悬挂缩进的现代诗。</p>
<p>1、为诗歌容器（如</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/897">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d412b8189711.png" alt="Docky AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/897">Docky AI</a>
                            <p>多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Docky AI">
                                <span>100</span>
                            </div>
                        </div>
                        <a href="/ai/897" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Docky AI">
                        </a>
                    </div>
                
<div class="poem">）设置font-family: "K<a style="color:#f60; text-decoration:underline;" title="ai" href="https://www.php.cn/zt/17539.html" target="_blank">ai</a>Ti", "STKaiti", serif;以适配中文书法感字体。
<p>2、对每行诗句对应的</p>
<p>元素设置text-indent: 2em; 实现首行缩进。</p>
<p>3、设置line-height: 1.8; 保证行间留白充足，避免诗句拥挤。</p>

<h2>四、使用CSS Grid定义诗节结构</h2>
<p>当诗歌包含明确分节（如四行一节、八行一节），Grid布局可将每节作为独立单元进行定位与对齐，支持响应式断行与居中排版。</p>
<p>1、将整首诗包裹在</p>
<div class="poem-grid">中。
<p>2、为每个诗节创建子</p>
<div class="stanza">，内部用<p>逐行放置诗句。</p>
<p>3、在CSS中定义.poem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5em; }。</p>

<h2>五、嵌入SVG实现手写体与浮动装饰元素</h2>
<p>SVG可用于叠加水墨笔触、印章、边框等传统诗歌视觉元素，增强艺术表现力，且不破坏HTML语义结构。</p>
<p>1、在诗歌主体</p>
<div>后插入svg>标签，设置position: absolute; 与z-index: -1; 置于文字底层。
<p>2、使用<path>绘制毛笔飞白线条，或用<text>元素加载手写体字体渲染题跋。</text></path></p>
<p>3、通过viewBox与preserveAspectRatio属性确保SVG在不同屏幕下等比缩放，<strong><font color="green">避免使用固定width/height值</font></strong>。</p>
</div>
</div>
</div>
</div>
</div>