正确使用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 提供了 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;
}
4. 注意事项与最佳实践
为了让代码正确显示，避免常见问题很重要。
- 如果要在页面中显示 < 或 > 符号，必须使用 HTML 实体：
和 <code>> - 避免直接写 <script> 或 <style> 标签内容，可能被解析
- 考虑使用第三方库如 Prism.js 或 Highlight.js 实现语法高亮
