HTML高亮显示代码用什么标签_HTMLcode标签行内代码展示
在HTML页面中展示代码片段时，我们经常需要对代码内容进行高亮区分，让代码和正文内容形成视觉差异，提升可读性。HTML原生提供了<code>标签用于标记行内代码，同时结合<pre>标签可以实现多行代码的格式化展示。
code标签的基本作用
<code>是HTML的行内代码标签，它的语义是定义计算机代码片段，浏览器默认会以等宽字体显示标签内的内容，让代码和普通文本区分开。如果是简单的行内代码，比如文章中提到某个函数名、变量名，直接使用<code>标签包裹即可。
比如我们在描述JavaScript的打印函数时，可以这样写：
调用console.log()函数可以在控制台输出内容，这是前端调试最常用的方式之一。
搭配pre标签展示多行代码
如果只是单独使用<code>标签，多行代码会连在一起显示，丢失原本的换行和缩进格式。这时候需要搭配<pre>标签使用，<pre>标签会保留文本中的空格、换行等格式，和<code>结合就能完整展示格式化的多行代码。
下面是一个展示HTML基础结构的高亮代码块示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码示例页面</title>
</head>
<body>
<h1>这是标题</h1>
<p>这是一段普通文本</p>
<!-- 这里可以插入更多内容 -->
</body>
</html>上面的代码块中，我们将所有HTML标签的尖括号都做了转义处理，同时保留了代码原本的缩进结构，浏览器渲染时会按照预格式化的方式展示，代码可读性更强。
不同场景的使用建议
- 如果是正文里穿插的短代码片段，比如函数名、单个标签名，直接使用
<code>标签包裹即可，不需要额外添加<pre>。 - 如果是独立展示的多行代码块，比如完整的函数、HTML结构、CSS样式，建议用
<pre><code>代码内容</code></pre>的组合，既能保留格式，又能明确语义。 - 如果需要更丰富的代码高亮效果（比如关键字变色、字符串标色），可以在
<code>标签的基础上，通过CSS自定义样式，或者引入专门的代码高亮库实现。
注意事项
在使用<code>标签展示包含HTML标签的代码时，一定要注意对尖括号等特殊字符做转义处理，否则浏览器会把代码里的标签当成真实的HTML标签解析，导致代码显示异常。比如要展示<div>这个标签，在代码块里需要写成<div>，而不是直接写<div>。
另外<code>标签只是语义化的行内代码标记，本身没有高亮颜色，如果需要彩色高亮效果，可以通过自定义CSS设置code的样式，比如设置背景色、文字颜色、内边距等，让代码块的视觉效果更明显。