HTML如何显示代码文本_HTML code/pre标签代码显示技巧-html教程-PHP中文网

HTML如何显示代码文本_HTML code/pre标签代码显示技巧

爱谁谁

发布： 2025-10-14 20:42:01

原创

839人浏览过

正确使用code和pre标签可清晰展示网页代码。1. code标签用于行内代码，如内容，显示为等宽字体；2. pre标签保留格式，适合多行代码，常嵌套code使用，如function hello() { console.log("Hello World"); }；3. 通过CSS设置等宽字体、背景色、边框和滚动条提升可读性；4. 注意使用HTML实体&;lt;和&;gt;避免解析错误，推荐用Prism.js等工具实现语法高亮。

html如何显示代码文本_html code/pre标签代码显示技巧

在网页中显示代码文本时，保持格式清晰、可读性强是关键。HTML 提供了 code 和 pre 两个标签专门用于展示代码内容，合理使用它们能让代码正确呈现。

1. 使用 `标签显示行内代码`

code 标签用于表示一行内的代码片段，适合展示短代码、函数名或命令。

浏览器通常会用等宽字体（如 Courier）显示 code 内容
不会保留换行和多余空格，适用于单行代码
常用于文档说明中嵌入代码，比如：<p>Hello</p>

示例：

立即学习“前端免费学习笔记（深入）”；

<p>这是一个 HTML 段落：<code><p>内容</p></code></p>

登录后复制

2. 使用

 标签保留原始格式</font></H3>
<p><strong>pre</strong> 标签用于显示多行代码，它会保留空格、缩进和换行，非常适合展示完整的代码块。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2194">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680269459383.png" alt="MacsMind">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2194">MacsMind</a>
                            <p>电商AI超级智能客服</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="MacsMind">
                                <span>192</span>
                            </div>
                        </div>
                        <a href="/ai/2194" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="MacsMind">
                        </a>
                    </div>
                
<ul>
  <li><strong>pre</strong> 是“预格式化文本”的意思</li>
  <li>常与 <strong>code</strong> 嵌套使用，语义更清晰</li>
  <li>适合展示 JavaScript、CSS 或命令行输出等多行内容</li>
</ul>

<font face="Consolas,Monaco,'Courier New',monospace">
<p>示例：</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>

登录后复制

<code>
function hello() {
  console.log("Hello World");
}
</code>

登录后复制

3. 结合 CSS 提升代码显示效果

仅靠标签还不够，通过 CSS 可以让代码更美观易读。

设置背景色区分代码区域，例如浅灰色背景
添加边框和圆角提升视觉效果
控制最大宽度和滚动条，防止长代码溢出

常用 CSS 示例：

code {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
  margin: 10px 0;
}

登录后复制