HTML中code与pre标签使用技巧

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《HTML中常用和

标签来标记代码。以下是它们的用法：<code>标签
用于定义一段计算机代码片段，通常用于内联代码。
示例：<p>使用 <code>print("Hello World")</code> 可以输出文本。</p><pre class="brush:php;toolbar:false">标签
用于定义预格式化的文本，保留空格和换行符，常用于显示代码块或诗歌等。
示例：<pre class="brush:php;toolbar:false">
function hello() {
    console.log("Hello World");
}

中，以保持代码的格式和语义。
示例：<pre class="brush:php;toolbar:false"><code>
function greet(name) {
    return "Hello, " + name;
}
</code>

在 HTML 中展示代码最常用的是 和

 标签。1. <code> 用于标记一小段内联代码，适合变量名、函数名或简单语句，不会保留换行和空格；2. <pre> 用于多行代码展示，保留原有格式包括空格和换行；3. 常将 <code> 嵌套在 <pre> 中，既保留格式又明确内容类型；4. 配合 CSS 可美化代码块，如添加背景色、边框、语法高亮等，以提升可读性。正确使用这两个标签并搭配样式，能有效提升网页中代码的展示效果。</p><p><img src="/uploads/20250628/1751070467685f37032274a.jpg" alt="HTML如何标记代码？code和pre标签怎么用？"></p><p>在 HTML 中标记代码，最常用的就是 <code><code></code> 和 <code><pre></code> 这两个标签。它们各自有不同的用途，搭配使用可以更好地展示代码内容。</p><h2><code><code></code> 标签：标记一小段代码</h2><p><code><code></code> 标签用来表示一段计算机代码，适合用在内联文本中，比如写一个变量名、函数名或者简单的语句。</p><p><strong>用法示例：</strong></p><pre class="brush:html;toolbar:false;"><p>使用 <code>alert("Hello")</code> 可以弹出提示框。</p>

浏览器会默认将 里的内容显示为等宽字体（比如 Courier），但不会保留换行和空格。所以如果是一整段多行的代码，只用 就不太合适了。

</code> 标签：保留格式的预格式化文本</h2><p>如果你有一段多行代码，想保持原来的缩进和换行，那就需要用到 <code><pre></code> 标签。它会原样显示内容，包括空格和换行符。</p><p><strong>基本用法：</strong></p><pre class="brush:html;toolbar:false;"><pre>
function hello() {
    console.log("Hello World");
}

这样写的话，浏览器就会按照你在 HTML 文件里写的格式来显示这段代码。

但通常我们会把 嵌套在

</code> 里面一起使用，这样既能保留格式，又能明确这段内容是代码：</p><pre class="brush:html;toolbar:false;"><pre><code>
function hello() {
    console.log("Hello World");
}
</code>

这样做不仅结构清晰，也有利于 SEO 和可访问性。

搭配 CSS 更好地展示代码块

虽然 和

</code> 已经能很好地显示代码了，但如果想让代码看起来更美观，比如加个背景色、边框或语法高亮，就需要配合 CSS 使用。</p><p><strong>简单样式示例：</strong></p><pre class="brush:css;toolbar:false;">code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
}

pre {
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px;
    overflow-x: auto;
}

加上这些样式后，代码区域会更有“代码感”，也更容易阅读。

基本上就这些。用好 和

，再配上点 CSS，就能在网页上清楚地展示代码内容了。
今天关于《HTML中code与pre标签使用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！
                    

    
        前往漫画官网入口并下载 ➜
    


    

        
您即将跳转至第三方网站，请注意保护好个人信息和财产安全！
        继续访问