HTML 教程 / 计算机代码

HTML 计算机代码

HTML提供了多个用于显示代码和计算机相关内容的标签。这些标签帮助浏览器正确显示代码格式，也便于搜索引擎识别代码内容。

<code> 标签

定义行内代码片段，显示为等宽字体。

<p>使用 <code>console.log()</code> 输出信息。</p>

在浏览器中显示为：

使用 console.log() 输出信息。

<pre> 标签

定义预格式化文本，保留空格和换行。

<pre>
function hello() {
    console.log("Hello World!");
}
</pre>
注意

在 <pre> 标签中使用 < 和 > 时，需要使用实体编码：&lt; 和 &gt;

<kbd> 标签

定义键盘输入内容。

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p>

在浏览器中显示为：

按 Ctrl + C 复制。

<samp> 标签

定义程序或计算机系统的输出内容。

<p>错误信息：<samp>File not found</samp></p>

<var> 标签

定义数学表达式或编程中的变量。

<p>变量 <var>x</var> 的值是 10。</p>

组合使用示例

<pre><code>
function calculate(a, b) {
    let sum = a + b;
    return sum;
}

const result = calculate(5, 3);
console.log(result); // 输出: 8
</code></pre>

最佳实践

建议
  • 使用 <code> 显示行内代码
  • 使用 <pre> 包裹多行代码
  • 在 <pre> 中使用 <code> 包裹代码内容
  • 使用 <kbd> 表示键盘按键
  • 使用 <samp> 表示程序输出
  • 考虑使用Prism.js或Highlight.js实现代码高亮

交互式示例

在下面的代码编辑器中，尝试使用这些代码标签：

💻 在线代码编辑器
👁️ 预览效果