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

爱谁谁 2025-10-14 00:00:00 次阅读

正确使用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

示例：

这是一个 HTML 段落：

内容

2. 使用

 标签保留原始格式

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

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

示例：


function hello() {
  console.log("Hello World");
}

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