当前位置：首页 > 文章列表 > 文章 > 前端 > HTML中使用pre标签显示代码文本，能保留空格和换行，适合展示代码或格式化文本。以下是几个实用技巧：基本用法使用<pre>标签包裹代码内容，浏览器会按原样显示。<pre>functionhello(){console.log("Hello,world!");}</pre>配合<code>标签为了语义化，可将代码嵌套在<code>标签中。
HTML中使用pre标签显示代码文本，能保留空格和换行，适合展示代码或格式化文本。以下是几个实用技巧：基本用法使用<pre>标签包裹代码内容，浏览器会按原样显示。<pre>functionhello(){console.log("Hello,world!");}</pre>配合<code>标签为了语义化，可将代码嵌套在<code>标签中。
2025-11-07 13:37:00
0浏览
收藏
怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《HTML如何显示代码文本？pre标签使用技巧》，涉及到，有需要的可以收藏一下
正确使用code和pre标签可清晰展示网页代码。1. code标签用于行内代码，如
内容
，显示为等宽字体；2. pre标签保留格式，适合多行代码，常嵌套code使用，如function hello() { console.log("Hello World"); }；3. 通过CSS设置等宽字体、背景色、边框和滚动条提升可读性；4. 注意使用HTML实体&;lt;和&;gt;避免解析错误，推荐用Prism.js等工具实现语法高亮。
在网页中显示代码文本时，保持格式清晰、可读性强是关键。HTML 提供了 code 和 pre 两个标签专门用于展示代码内容，合理使用它们能让代码正确呈现。
1. 使用 标签显示行内代码
code 标签用于表示一行内的代码片段，适合展示短代码、函数名或命令。
- 浏览器通常会用等宽字体（如 Courier）显示 code 内容
- 不会保留换行和多余空格，适用于单行代码
- 常用于文档说明中嵌入代码，比如：
Hello
示例：
<p>这是一个 HTML 段落：<code><p>内容</p></code></p>
2. 使用 标签保留原始格式</font></h3>
<p><strong>pre</strong> 标签用于显示多行代码，它会保留空格、缩进和换行，非常适合展示完整的代码块。</p>
<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>
<pre><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;
}
4. 注意事项与最佳实践
为了让代码正确显示，避免常见问题很重要。
- 如果要在页面中显示 < 或 > 符号，必须使用 HTML 实体：
< 和 >
- 避免直接写
< 和 >