HTML 代码相关

学习目标

掌握 HTML 中用于表示计算机代码的五种语义化标签
理解每种标签的适用场景与语义含义
能够正确组合使用 <pre> 与 <code> 实现代码块展示
提升网页内容的可访问性与专业性

为什么需要

普通段落文本无法准确表达编程内容的语义。HTML 提供了一组语义化标签，不仅在视觉上区分代码，还能：

帮助屏幕阅读器理解内容类型
便于搜索引擎识别技术文档结构
为开发者提供清晰的上下文（如“这是变量”、“这是用户输入”）

五种相关元素

1. `<code>`

表示一段计算机代码

用途：用于标记内联代码片段或短小的代码示例。

特点：

默认使用等宽字体（monospace）
不保留空格和换行（需配合 <pre> 使用）
具有明确的语义：这是程序代码

基本用法：

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

代码块用法（配合 <pre>）：

<pre><code>
#include &lt;stdio.h&gt;
int main() {
    printf("Hello World");
    return 0;
}
</code></pre>

注意：在 HTML 中，< 和 > 需转义为 < 和 >，避免被解析为标签。

2. `<kbd>`

表示键盘输入

用途：标识用户应通过键盘输入的内容，如按键、快捷键组合。

典型场景：

快捷键说明（如 Ctrl + C）
命令行指令
表单输入提示

示例：

<p>按 <kbd>Alt</kbd> + <kbd>Tab</kbd> 可在 Windows 中切换应用程序。</p>

<p>在终端中输入：<kbd>npm install</kbd></p>

视觉建议：可通过 CSS 添加边框、背景色，使其更像“按键”。

3. `<pre>`

预格式化文本

用途：保留原始文本中的空格、换行和缩进，常用于显示代码、日志、诗歌等。

关键特性：

浏览器不会合并多个空格或忽略换行
默认使用等宽字体
不具有代码语义，仅控制格式 → 建议与 <code> 联用

单独使用示例：

<pre>
编程学习网
一个面向程序员的计算机科学门户
</pre>

与 <code> 联用（推荐）：

<pre><code class="language-python">
def greet(name):
    print(f"Hello, {name}!")
</code></pre>

最佳实践：所有代码块都应使用 <pre><code>...</code></pre> 结构。

4. `<samp>`

表示程序输出示例

用途：展示程序运行后的输出结果，强调这是“机器生成的内容”。

语义重点：这不是用户输入，也不是代码，而是程序的返回值或打印内容。

示例：

<p>执行命令后，终端显示：</p>
<samp>Hello, GeeksforGeeks!</samp>

结合其他元素：

<p>运行以下代码：</p>
<pre><code>print("Welcome")</code></pre>
<p>输出为：</p>
<samp>Welcome</samp>

5. `<var>`

表示变量或数学符号

用途：

编程中的变量名（如 count, user_id）
数学公式中的变量（如 x, y）
占位符（如 “将 <var>filename</var> 替换为实际文件名”）

默认样式：斜体（但可通过 CSS 自定义）

示例：

<p>计算圆的面积：A = π × <var>r</var>²</p>

<p>循环变量 <var>i</var> 从 0 开始递增。</p>

语义价值：帮助辅助技术理解“这是一个可变的量”，而非普通文本。

元素对比

标签	语义含义	典型用法	默认样式
`<code>`	计算机源代码	`console.log()`	等宽字体
`<kbd>`	用户键盘输入	`Ctrl + S`	等宽字体（常加样式）
`<pre>`	预格式化文本	代码块、日志	等宽字体，保留空白
`<samp>`	程序输出结果	`Hello World`	等宽字体
`<var>`	变量或占位符	`x`, `username`	斜体

综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码元素示例</title>
    <style>
        body { font-family: system-ui, sans-serif; }
        kbd {
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 2px 6px;
            font-family: monospace;
        }
        pre {
            background: #f8f8f8;
            padding: 12px;
            border-left: 4px solid #007acc;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h2>Python 快速入门</h2>
    
    <p>在终端中输入以下命令安装包：</p>
    <pre><code>pip install requests</code></pre>
    
    <p>编写代码（保存为 <var>example.py</var>）：</p>
    <pre><code>import requests

response = requests.get('https://api.example.com')
print(response.status_code)
</code></pre>
    
    <p>运行程序：</p>
    <pre><code>python <var>example.py</var></code></pre>
    
    <p>预期输出：</p>
    <samp>200</samp>
    
    <p>提示：按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 可终止程序。</p>
</body>
</html>

思考与练习

语义判断题
以下场景应使用哪个标签？
- 用户需按的按键：Esc
- Python 变量名：total_count
- 程序打印的结果：Error: File not found
- 一段 JavaScript 函数代码
动手实践
创建一个 HTML 页面，包含：
- 一段带缩进的 Python 代码（使用 <pre><code>）
- 说明如何运行（使用 <kbd> 表示命令）
- 展示预期输出（使用 <samp>）
- 在说明文字中引用变量名（使用 <var>）
无障碍思考
为什么使用 <var> 比直接用 <i> 或 <em> 更适合表示变量？

源本科技 | 码上会

学习目标

为什么需要

五种相关元素

1. <code>

2. <kbd>

3. <pre>

4. <samp>

5. <var>