<code>-计算机代码

<code> 标签在 HTML 中用于标记计算机代码片段，通常以等宽字体显示。它适用于内联代码或短代码片段，而多行代码块建议使用 <pre> 标签包裹。下面详细探讨其用法、属性和实际应用场景。

<code> 标签的基本语法

<code> 是行内元素，默认样式为 monospace 字体。基础用法如下：

<p>在 JavaScript 中，使用 <code>console.log()</code> 打印输出。</p>

渲染效果：
在 JavaScript 中，使用 console.log() 打印输出。

与 <pre> 标签的配合使用

多行代码块需要结合 <pre> 保留格式：

<pre><code>
function greet() {
  console.log("Hello, World!");
}
</code></pre>

效果：

function greet() {
  console.log("Hello, World!");
}

语义化与无障碍

<code> 标签的语义价值：

• 屏幕阅读器会识别为代码片段
• 搜索引擎优先抓取代码内容
• 可通过 aria-label 增强描述：

<code aria-label="JavaScript 定时器示例">setTimeout(() => {}, 1000);</code>

CSS 自定义样式

默认样式可覆盖，常见自定义方案：

code {
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 3px;
  color: #c7254e;
}

pre code {
  display: block;
  overflow-x: auto;
  padding: 1em;
  line-height: 1.5;
}

实际应用示例

示例 1：文档中的内联代码

<p>修改文件权限使用 <code>chmod 755 filename</code> 命令。</p>

示例 2：交互式代码展示

结合 JavaScript 实现动态高亮：

<pre><code id="dynamicCode">// 点击按钮更新代码
document.getElementById('updateBtn').addEventListener('click', () => {
  codeElement.textContent = '新的代码内容';
});
</code></pre>
<button id="updateBtn">更新代码</button>

<script>
  document.getElementById('updateBtn').onclick = function() {
    document.getElementById('dynamicCode').textContent = 
      'console.log("代码已更新！");';
  };
</script>

与其他技术栈的集成

React 中的使用

function CodeExample({ children }) {
  return (
    <code style={{ fontFamily: 'Courier New' }}>
      {children}
    </code>
  );
}

// 调用
<CodeExample>const count = useState(0);</CodeExample>

Vue 的语法高亮

配合 prismjs 实现：

<template>
  <pre><code class="language-javascript">{{ codeSnippet }}</code></pre>
</template>

<script>
import Prism from 'prismjs';

export default {
  data() {
    return {
      codeSnippet: `const message = 'Vue 示例'`
    };
  },
  mounted() {
    Prism.highlightAll();
  }
};
</script>

特殊字符处理

HTML 实体转义规则：

示例：

<code>if (a &lt; b) { /* ... */ }</code>

浏览器兼容性数据

所有现代浏览器均支持 <code> 标签，包括：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Edge 12+
• Opera 6+

性能优化建议

1. 避免嵌套过深：

   <!-- 不推荐 -->
   <code><span><em>嵌套示例</em></span></code>
   
   <!-- 推荐 -->
   <code>简洁结构</code>
   

2. 大量代码时使用虚拟滚动：

   import { VirtualScroller } from 'virtual-scroller';
   
   new VirtualScroller(document.querySelector('pre code'), {
     itemHeight: 20
   });
   

代码可访问性增强

通过 tabindex 和 role 提升体验：

<pre><code tabindex="0" role="document">
// 可聚焦的代码块
function accessibleCode() {
  return "支持键盘导航";
}
</code></pre>