首页 > 文章 > 前端

PRE和CODE标签怎么用？

时间：2025-11-07 10:05:44 392浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《PRE和CODE标签怎么用？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

使用PRE和CODE标签组合可语义化地展示代码，PRE保留格式，CODE声明代码语义，嵌套使用并添加language-类名以支持语法高亮，通过CSS设置等宽字体、背景色、圆角、内边距及滚动，结合Prism.js等工具实现美观可读的代码展示。

怎样在网页上优雅地展示代码块？PRE和CODE标签的组合拳。

在网页中展示代码，既要保证可读性，又要保持样式美观。使用 PRE 和 CODE 标签的组合，是语义化且实用的最佳实践。

PRE（preformatted text）保留空格和换行，适合展示原始代码结构。它让缩进、制表符和回车都原样呈现。 CODE 用于标记代码片段，是语义化的“这就是代码”的声明。浏览器默认会为其设置等宽字体。两者嵌套使用，既保留格式，又增强语义：
...

标准结构如下：

把 CODE 套在 PRE 里，表示“一段格式化的代码”：

  
def hello():
    print("Hello, world!")

给 CODE 添加 language-xxx 类名，便于后续语法高亮工具识别语言类型。

默认样式往往不够美观。通过 CSS 可以大幅提升视觉体验：

这样既防止代码撑破布局，又提升阅读舒适度。

纯文本代码缺少色彩区分。引入如 Prism.js 或 Highlight.js 等工具，能自动为不同语法元素着色。只需引入库文件，并确保 CODE 标签有正确的类名：

const greet = (name) => {
  return `Hello, ${name}!`;
};

这些工具会解析类名中的语言标识，自动完成着色。

基本上就这些。PRE 负责格式保留，CODE 提供语义，加上一点样式和高亮，就能在网页上优雅地呈现代码块。不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《PRE和CODE标签怎么用？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

CSS样式语法高亮 pre标签 code标签代码块