代码显示标签(code)

代码显示标签(code)

<code>标签用于在HTML文档中标记计算机代码片段。它通常以等宽字体呈现，适合展示单行代码或短代码片段。与<pre>标签不同，<code>默认不会保留空白字符和换行符。

<p>在JavaScript中，<code>console.log()</code>方法用于向控制台输出信息。</p>

基本用法

<code>标签可以单独使用，也可以嵌套在其他标签中。浏览器默认会以等宽字体显示其内容：

<code>const x = 10;</code>

当需要显示多行代码时，通常与<pre>标签组合使用：

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

样式定制

可以通过CSS为<code>元素添加自定义样式：

<style>
  code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    color: #c7254e;
    font-family: Consolas, Monaco, monospace;
  }
  
  pre code {
    display: block;
    padding: 10px;
    line-height: 1.5;
    overflow-x: auto;
  }
</style>

与其他标签的配合

<code>常与<var>、<kbd>、<samp>等标签一起使用：

<p>按下<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>保存文件。</p>
<p>变量<var>i</var>在循环中用作计数器。</p>
<p>程序输出：<samp>Hello, World!</samp></p>

代码高亮实现

对于复杂的代码高亮，可以使用第三方库如Prism.js或highlight.js：

<!-- 使用Prism.js的示例 -->
<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-javascript">
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
</code></pre>

响应式代码块

确保代码块在不同设备上都能正常显示：

<style>
  .code-container {
    max-width: 100%;
    overflow-x: auto;
    background: #f5f5f5;
    padding: 1em;
    border-radius: 3px;
  }
</style>

<div class="code-container">
  <pre><code>
  // 这是一个很长的代码行，可能会在小屏幕设备上产生水平滚动条
  const longVariableName = "This is a very long string value that might cause horizontal scrolling on mobile devices";
  </code></pre>
</div>

语义化考量

<code>标签不仅影响视觉呈现，还具有语义价值：

<article>
  <h2>数组排序</h2>
  <p>JavaScript数组的<code>sort()</code>方法默认按字符串Unicode码点排序：</p>
  
  <pre><code class="language-javascript">
  const numbers = [10, 5, 80, 1];
  numbers.sort(); // 结果为 [1, 10, 5, 80]
  </code></pre>
  
  <p>要正确排序数字，需要提供比较函数：</p>
  
  <pre><code class="language-javascript">
  numbers.sort((a, b) => a - b); // 结果为 [1, 5, 10, 80]
  </code></pre>
</article>

无障碍访问

确保代码展示对屏幕阅读器友好：

<div role="region" aria-label="代码示例">
  <pre><code>
  // 无障碍代码示例
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    alert('按钮被点击');
  });
  </code></pre>
</div>

动态代码展示

使用JavaScript动态插入和格式化代码：

<div id="dynamic-code"></div>

<script>
  const code = `function calculate(a, b) {
    return a * b + (a + b);
  }`;
  
  const formattedCode = code
    .replace(/function/g, '<span class="keyword">function</span>')
    .replace(/return/g, '<span class="keyword">return</span>');
  
  document.getElementById('dynamic-code').innerHTML = 
    `<pre><code>${formattedCode}</code></pre>`;
</script>

<style>
  .keyword {
    color: #0077aa;
    font-weight: bold;
  }
</style>

代码与用户交互

创建可交互的代码示例：

<pre><code id="editable-code" contenteditable="true">
// 尝试编辑这段代码
function sayHello() {
  console.log("Hello!");
}
</code></pre>

<button onclick="runCode()">运行代码</button>

<script>
  function runCode() {
    const code = document.getElementById('editable-code').textContent;
    try {
      new Function(code)();
    } catch (e) {
      console.error(e);
    }
  }
</script>

代码标签的嵌套规则

<code>标签可以包含短语内容，但不能包含块级元素：

<!-- 正确用法 -->
<p>使用<code>setTimeout()</code>函数延迟执行。</p>

<!-- 错误用法 -->
<code>
  <div>这会导致HTML验证错误</div>
</code>

代码片段的复制功能

添加一键复制代码的功能：

<div class="code-wrapper">
  <button class="copy-btn" onclick="copyCode(this)">复制</button>
  <pre><code class="language-javascript">
  const message = "复制这段文本";
  console.log(message);
  </code></pre>
</div>

<script>
  function copyCode(button) {
    const code = button.nextElementSibling.textContent;
    navigator.clipboard.writeText(code.trim())
      .then(() => {
        button.textContent = "已复制!";
        setTimeout(() => button.textContent = "复制", 2000);
      });
  }
</script>

<style>
  .code-wrapper {
    position: relative;
  }
  .copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #333;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
  }
</style>

代码标签的SEO优化

为搜索引擎优化代码展示：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Code",
  "name": "斐波那契数列实现",
  "description": "JavaScript实现的斐波那契数列计算函数",
  "text": "function fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}"
}
</script>

<pre><code>
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
</code></pre>

代码标签的性能考虑

大量代码展示时的优化方案：

<!-- 初始只显示代码摘要 -->
<details>
  <summary>显示代码 (点击展开)</summary>
  <pre><code class="language-javascript">
  // 这里是非常长的代码
  // 只有当用户点击时才加载
  // 可以节省初始页面加载时间
  </code></pre>
</details>

<!-- 或者使用懒加载 -->
<div id="long-code-placeholder"></div>

<script>
  window.addEventListener('load', () => {
    fetch('long-code-snippet.txt')
      .then(response => response.text())
      .then(code => {
        document.getElementById('long-code-placeholder').innerHTML = 
          `<pre><code>${code}</code></pre>`;
      });
  });
</script>