html5怎么编写诗_HTML5用分行加CSS设字体样式编诗歌内容【编写】

 标签天然保留文本中的空格和换行，适合呈现格式固定的诗歌，且无需额外 CSS 即可维持分行结构。
<p>1、在 </p> 中插入 <pre class="brush:php;toolbar:false;"> 标签，并将诗歌逐行写入其中。
<p>2、为 </p><pre class="brush:php;toolbar:false;"> 添加 CSS 样式，设置字体为等宽或衬线字体，如 font-family: "Songti SC", "Noto Serif CJK SC", serif;<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、设置 font-size 为 18px，line-height 为 1.6，确保行距舒展。</p>
<p>4、添加 text-align: center 使诗句居中对齐。</p>

<h2>二、使用 </h2><p> 标签包裹每行诗句
</p><p>将每一句诗单独放入一个 </p><p> 标签，可完全掌控每行样式，便于后续为不同诗句添加颜色、动画或交互效果。</p>
<p>1、为每句诗创建独立的 </p><p> 标签，例如 </p><p>山高水远路漫漫</p>。
<p>2、对所有诗句的 </p><p> 标签统一设置 margin: 0.5em 0，避免默认上下边距过大。</p>
<p>3、设置 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", cursive; 以模拟手写体风格。</p>
<p>4、为偶数行诗句添加 background-color: #f9f9f9; 实现隔行底色区分。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1337">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d64b79043646.png" alt="盘古大模型">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1337">盘古大模型</a>
                            <p>华为云推出的一系列高性能人工智能大模型</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="盘古大模型">
                                <span>207</span>
                            </div>
                        </div>
                        <a href="/ai/1337" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="盘古大模型">
                        </a>
                    </div>
                

<h2>三、使用 <div> + <span> 实现字级样式控制
<p>当需要对单字、词或特定字符（如诗眼、韵脚）进行高亮或变形时，应将诗句拆解为嵌套的 <span> 元素，再通过类名绑定 CSS 规则。</span></p>
<p>1、将整首诗放入一个 </p>
<div class="poem"> 容器中。
<p>2、每句诗用 </p>
<div class="verse"> 包裹，每个字或关键词用 <span class="char"> 或 <span class="rhyme"> 包裹。
<p>3、为 .rhyme 类设置 color: <strong><font color="green">#c00</font></strong>; 和 font-weight: bold; 突出押韵字。</p>
<p>4、为 .char 类添加 transition: transform 0.2s; 并在 hover 时触发 transform: scale(1.2); 实现悬停放大效果。</p>

<h2>四、使用 CSS 的 white-space 和 display: inline-block 控制分行</h2>
<p>当诗歌需响应式适配多端宽度，又须严格保持“一句一行”时，可结合 white-space: pre-line 与 display: inline-block 布局实现弹性分行。</p>
<p>1、将整首诗放入 </p>
<div class="poem-responsive">，内部每句用 <span class="line"> 包裹。
<p>2、为 .poem-responsive 设置 width: 100%; max-width: 600px; margin: 0 auto;</p>
<p>3、为 .line 设置 display: inline-block; width: 100%; white-space: pre-line;</p>
<p>4、为防止小屏幕下文字溢出，添加 <a style="color:#f60; text-decoration:underline;" title="word" href="https://www.php.cn/zt/15726.html" target="_blank">word</a>-break: keep-all; 和 font-size: clamp(14px, 4vw, 18px);</p>

<h2>五、引入 @font-face 加载古典中文字体</h2>
<p>为增强诗歌的文学气质，可引入支持繁体、异体字的开源中文字体（如“霞鹜文楷”），避免系统默认字体缺失导致渲染异常。</p>
<p>1、下载霞鹜文楷 Light 字体文件（.woff2 格式），存放于项目 fonts/ 目录下。</p>
<p>2、在 <style> 中定义 @font-face，src 指向该文件路径，font-family 设为 "LXGW WenKai"</style></p>
<p>3、在 .poem 选择器中设置 font-family: "LXGW WenKai", "Noto Serif CJK SC", serif;</p>
<p>4、添加 font-feature-settings: "liga" on, "clig" on; 启用连字特性，提升“之乎者也”等虚词显示效果。</p></span>
</div></span></span>
</div>
</div></span>
</div>
</h2>