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

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

爱谁谁

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

原创

782人浏览过

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

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

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

1. 使用 <code> 标签显示行内代码

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

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

示例：

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

登录后复制

2. 使用 <pre> 标签保留原始格式

pre 标签用于显示多行代码，它会保留空格、缩进和换行，非常适合展示完整的代码块。

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

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

pre 是“预格式化文本”的意思
常与 code 嵌套使用，语义更清晰
适合展示 JavaScript、CSS 或命令行输出等多行内容

示例：

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

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;
}

登录后复制