HTML如何标记代码？code和pre标签怎么用？

在 html 中展示代码最常用的是 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 标签。1. &lt;code&gt; 用于标记一小段内联代码，适合变量名、函数名或简单语句，不会保留换行和空格；2. &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 用于多行代码展示，保留原有格式包括空格和换行；3. 常将 &lt;code&gt; 嵌套在 &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 中，既保留格式又明确内容类型；4. 配合 css 可美化代码块，如添加背景色、边框、语法高亮等，以提升可读性。正确使用这两个标签并搭配样式，能有效提升网页中代码的展示效果。&lt;/p&gt;&lt;p&gt;@@##@@&lt;/p&gt;&lt;p&gt;在 HTML 中标记代码，最常用的就是 &lt;code&gt; 和 &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 这两个标签。它们各自有不同的用途，搭配使用可以更好地展示代码内容。&lt;/p&gt;&lt;h2&gt;&lt;code&gt; 标签：标记一小段代码&lt;/h2&gt;&lt;p&gt;&lt;code&gt; 标签用来表示一段计算机代码，适合用在内联文本中，比如写一个变量名、函数名或者简单的语句。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;用法示例：&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;p&gt;使用 &lt;code&gt;alert(&quot;Hello&quot;)&lt;/code&gt; 可以弹出提示框。&lt;/p&gt;</pre><div class="contentsignin">登录后复制</div></div><p><a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>会默认将 <code> 里的内容显示为等宽字体（比如 Courier），但不会保留换行和空格。所以如果是一整段多行的代码，只用 <code> 就不太合适了。

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

登录后复制

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

但通常我们会把 嵌套在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 里面一起使用，这样既能保留格式，又能明确这段内容是代码：&lt;/p&gt;&lt;pre class='brush:html;toolbar:false;'&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code&gt; function hello() { console.log(&quot;Hello World&quot;); } &lt;/code&gt;</pre><div class="contentsignin">登录后复制</div></div><p>这样做不仅结构清晰，也有利于 SEO 和可访问性。</p> <h2>搭配 CSS 更好地展示代码块</h2> <p>虽然 <code> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 已经能很好地显示代码了，但如果想让代码看起来更美观，比如加个背景色、边框或语法高亮，就需要配合 CSS 使用。&lt;/p&gt;&lt;p&gt;&lt;strong&gt;简单样式示例：&lt;/strong&gt;&lt;/p&gt;&lt;pre class='brush:css;toolbar:false;'&gt;code { background-color: #f4f4f4; padding: 2px 4px; border-radius: 4px; } pre { background-color: #2d2d2d; color: #fff; padding: 10px; overflow-x: auto; }</pre><div class="contentsignin">登录后复制</div></div><p>加上这些样式后，代码区域会更有“代码感”，也更容易阅读。</p> <p>基本上就这些。用好 <code> 和 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">，再配上点 CSS，就能在网页上清楚地展示代码内容了。</pre><div class="contentsignin">登录后复制</div></div>

以上就是HTML如何标记代码？code和pre标签怎么用？的详细内容，更多请关注php中文网其它相关文章！