`<code>` 标签

<code> 标签用于定义计算机代码片段。它表示文档中的程序代码、文件名、用户输入等技术内容。

概述

<code> 标签是 HTML 中的语义化标签，用于标识文档中的计算机代码片段。浏览器通常会使用等宽字体（monospace font）来显示 <code> 标签中的内容。

语法

html

<code>代码片段</code>

基本用法

内联代码

html

<p>使用 <code>console.log()</code> 函数可以在控制台输出信息。</p>

文件名和路径

html

<p>配置文件位于 <code>/etc/nginx/nginx.conf</code>。</p>

实际示例

编程教程

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>code 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    code {
      background-color: #f4f4f4;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.95em;
    }
    
    pre {
      background-color: #f4f4f4;
      padding: 1rem;
      border-radius: 5px;
      overflow-x: auto;
    }
    
    pre code {
      background-color: transparent;
      padding: 0;
    }
  </style>
</head>
<body>
  <h1>JavaScript 基础教程</h1>
  
  <p>在 JavaScript 中，可以使用 <code>let</code> 关键字声明变量：</p>
  
  <pre><code>let name = "张三";
let age = 25;
console.log("姓名: " + name + ", 年龄: " + age);</code></pre>
  
  <p>函数定义使用 <code>function</code> 关键字：</p>
  
  <pre><code>function greet(name) {
  return "你好, " + name + "!";
}</code></pre>
  
  <p>调用函数：</p>
  
  <pre><code>let message = greet("李四");
console.log(message); // 输出: 你好, 李四!</code></pre>
</body>
</html>

命令行指令

html

<section>
  <h2>系统管理命令</h2>
  
  <p>在 Linux 系统中，可以使用以下命令：</p>
  
  <ul>
    <li>查看当前目录：<code>pwd</code></li>
    <li>列出文件：<code>ls -la</code></li>
    <li>创建目录：<code>mkdir new_folder</code></li>
    <li>复制文件：<code>cp source.txt destination.txt</code></li>
    <li>删除文件：<code>rm filename.txt</code></li>
  </ul>
  
  <p>安装 Node.js 包：</p>
  
  <pre><code>npm install package-name
npm install -g package-name  # 全局安装</code></pre>
</section>

错误消息

html

<section>
  <h2>常见错误及解决方案</h2>
  
  <p>如果遇到以下错误：</p>
  
  <pre><code>Error: Cannot find module 'express'</code></pre>
  
  <p>请运行以下命令安装缺失的模块：</p>
  
  <pre><code>npm install express</code></pre>
  
  <p>如果端口被占用：</p>
  
  <pre><code>Error: listen EADDRINUSE: address already in use :::3000</code></pre>
  
  <p>可以修改端口号或终止占用端口的进程：</p>
  
  <pre><code>lsof -i :3000  # 查看占用端口的进程
kill -9 PID    # 终止进程</code></pre>
</section>

与相关标签的区别

与 `<pre>` 标签的区别

html

<!-- code 标签：用于内联代码 -->
<p>使用 <code>console.log()</code> 输出信息。</p>

<!-- pre 标签：用于预格式化文本块 -->
<pre>
function hello() {
  console.log("Hello, World!");
}
</pre>

<!-- code + pre 标签：用于代码块 -->
<pre><code>function hello() {
  console.log("Hello, World!");
}</code></pre>

与 `<kbd>` 标签的区别

html

<!-- code 标签：表示计算机代码 -->
<p>使用 <code>git commit</code> 命令提交更改。</p>

<!-- kbd 标签：表示键盘输入 -->
<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制选中内容。</p>

与 `<samp>` 标签的区别

html

<!-- code 标签：表示源代码 -->
<p>程序代码：<code>console.log("Hello");</code></p>

<!-- samp 标签：表示程序输出 -->
<p>程序输出：<samp>Hello</samp></p>

样式化

自定义代码样式

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 code 样式 */
    code {
      font-family: 'Courier New', Courier, monospace;
      background-color: #f4f4f4;
      padding: 2px 4px;
      border-radius: 3px;
      font-size: 0.9em;
    }
    
    /* 行内代码样式 */
    .inline-code {
      background-color: #e8f4fd;
      color: #007acc;
      border: 1px solid #b3d9ff;
    }
    
    /* 错误代码样式 */
    .error-code {
      background-color: #fdf0f0;
      color: #c00;
      border: 1px solid #f8c8c8;
    }
    
    /* 代码块样式 */
    pre {
      background-color: #2d2d2d;
      color: #f8f8f2;
      padding: 1rem;
      border-radius: 5px;
      overflow-x: auto;
    }
    
    pre code {
      background-color: transparent;
      padding: 0;
      color: inherit;
    }
  </style>
</head>
<body>
  <p>普通代码：<code>console.log()</code></p>
  <p>行内代码：<code class="inline-code">npm install</code></p>
  <p>错误代码：<code class="error-code">Error 404</code></p>
  
  <pre><code>function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}</code></pre>
</body>
</html>

无障碍访问

屏幕阅读器支持

html

<p>使用 <code aria-label="console dot log">console.log()</code> 函数输出调试信息。</p>

在不同语境中的使用

SQL 查询

html

<p>执行以下 SQL 查询获取用户信息：</p>
<pre><code>SELECT name, email FROM users WHERE age > 18;</code></pre>

CSS 属性

html

<p>设置元素的 <code>display</code> 属性为 <code>flex</code> 可以启用弹性布局。</p>

HTML 标签

html

<p>使用 <code>&lt;article&gt;</code> 标签定义独立的内容。</p>

最佳实践

语义化使用：只在表示计算机代码时使用 <code> 标签
与 <pre> 配合：对于多行代码块，应与 <pre> 标签配合使用
样式化：使用 CSS 为代码提供合适的样式，如等宽字体和背景色
避免转义：在 HTML 中使用代码标签时，注意转义特殊字符
考虑可读性：为代码块提供适当的间距和滚动条

浏览器兼容性

<code> 标签在所有浏览器中都得到完美支持：

Chrome
Firefox
Safari
Edge
Internet Explorer

注意事项

<code> 标签是内联元素
浏览器通常使用等宽字体显示其内容
对于多行代码，应与 <pre> 标签配合使用
在 HTML 代码中使用时，需要转义 < 和 > 字符
可以通过 CSS 自定义代码的外观

<code> 标签 ​

概述 ​

语法 ​

基本用法 ​

内联代码 ​

文件名和路径 ​

实际示例 ​

编程教程 ​

命令行指令 ​

错误消息 ​

与相关标签的区别 ​

与 <pre> 标签的区别 ​

与 <kbd> 标签的区别 ​

与 <samp> 标签的区别 ​

样式化 ​

自定义代码样式 ​

无障碍访问 ​

屏幕阅读器支持 ​

在不同语境中的使用 ​

SQL 查询 ​

CSS 属性 ​

HTML 标签 ​

最佳实践 ​

浏览器兼容性 ​

注意事项 ​

相关标签 ​

`<code>` 标签

概述

语法

基本用法

内联代码

文件名和路径

实际示例

编程教程

命令行指令

错误消息

与相关标签的区别

与 `<pre>` 标签的区别

与 `<kbd>` 标签的区别

与 `<samp>` 标签的区别

样式化

自定义代码样式

无障碍访问

屏幕阅读器支持

在不同语境中的使用

SQL 查询

CSS 属性

HTML 标签

最佳实践

浏览器兼容性

注意事项

相关标签