HTML 计算机代码
教程与文档经常展示命令、属性名和 HTML 片段。若把这些文字直接贴进普通段落，浏览器可能折叠空格，并把 < 当成真实标签的开始。HTML 提供面向计算机文本的元素，让示例既可读又安全。没有它们，教学页可能“吃掉”片段的缩进，更糟的是把示例里的 <p> 变成真正的标签，破坏课程本身的版面。本课教你用正确角色标记代码、按键与程序输出，并在“HTML 里演示 HTML”时对尖括号做编码。把这些元素想成语义标签：它们告诉浏览器和辅助技术这段内容不是普通散文，并在有助于阅读时默认使用等宽字体。掌握它们之后，你才能稳定地写出看起来像文档、又不会误执行示例标记的教学页。
什么是计算机代码元素？
这些元素标记代表代码、键盘输入或程序输出的文本——而不是普通叙述。它们帮助浏览器选择合适的默认字体（code 与 pre 常常是等宽字体），并告诉辅助工具该区间与计算机相关。字符仍由你亲自写入；标签增加含义，配合 pre 还能保留版式。实践中，code 突出句中的短令牌，pre 在块中冻结空格与换行，kbd 标明用户真正按下的键，samp 展示程序或命令返回的内容。不要只因为“看起来像代码”就选元素：要按文本的角色来选。这样页面对人更清晰，对可能样式化这些元素的 CSS 更清晰，对会播报内容类型的辅助技术也更清晰。语义诚实比单纯的“等宽外观”更重要。
直接答案
句中的短片段用 code。必须保留空格与换行时用 pre。常见的块级写法是 <pre><code>...</code></pre>。当角色真实匹配时，用 kbd 标记键盘键，用 samp 标记程序示例输出。当示例本身就是 HTML 时，写成 < 与 >，而不是原始的 < 与 >，以免浏览器意外构建出真正的元素。若本课只记住一条规则，请记住：展示标记不等于执行标记——实体编码就是二者之间的边界。其余内容（行内与块、键盘与输出）都遵循同一套语义诚实逻辑。把这条边界练成肌肉记忆，教学页会稳定许多。
元素一览
📊 计算机文本元素
| 元素 | 角色 | 典型用途 |
|---|---|---|
| code | 短计算机文本 | 属性名、行内命令 |
| pre | 预格式化块 | 保留缩进与换行 |
| kbd | 键盘输入 | Ctrl 或 Enter 等键名 |
| samp | 示例输出 | 终端或程序输出示例 |
行内代码
在句子里提到短令牌时，用 code 包起来。这样既能让该词在视觉上突出，又不必强迫整块显示。教程里，CSS 属性名、HTML 属性、短命令和 API 标识符常出现在解释句中间；code 正是这些碎片的正确位置。读者可以快速扫读并找到技术词，默认样式（多为等宽）也强调它不是普通词典词。把 pre 块留给多行列表——不要用在段落中间的单个词上。行内 code 可以在同一句里出现多次，只要每个片段确实是“计算机文本”角色即可。
行内代码
html<p>Use the <code>color</code> property to style text.</p>阅读示例
- 句子是普通段落文本
- 只有属性名位于
code内 - 读者能迅速定位技术令牌
- 这不是多行列表——那种情况请用
pre
这一模式扩展性很好：同一句里可以有多处code而不打断阅读节奏。常见错误是把整句包进code，或对单个术语使用pre——两者都夸大了元素角色，让页面视觉嘈杂。保持“短令牌用code、多行结构用pre”的分工，版面会更干净，语义也更准确。
使用 pre 与 code 的块
pre 表示预格式化：空格与换行大致按你键入的样子保留。把 code 嵌在 pre 里，是清晰的代码块模式。在 HTML 示例中，请对尖括号做编码。没有 pre 时，普通 HTML 会折叠连续空格，并把许多换行当成单个空格——这会毁掉你想展示给学生的缩进。有了 pre，片段结构保持可读。pre+code 同时传达两层意思：“这是预格式化块”以及“内容是代码”。许多风格指南与语法高亮工具都期望这种嵌套写法，因此从一开始就养成习惯很有价值。
带 code 的 pre
html<pre><code><p>Hello</p>
<p>World</p>为什么编码很重要
若在教程页内写入原始 <p>，浏览器可能创建真正的段落，而不是显示字符 <p>。编码成 <p> 才能安全展示示例。Entities（实体）一课会深入字符引用；这里你只需要养成在 HTML 演示中处理尖括号的习惯。同样适用于 <div>、<span>、<a href="..."> 以及任何你想展示而不想激活的标签。若“只是看看”就粘贴原始标记，课程文档会变形：多出额外元素、版面偏移，学生以为示例写错了，其实问题是缺少编码。训练反射：HTML 示例里先写 < 与 >，再在浏览器中确认文本按预期显示。这一步能避免大量“神秘布局故障”。
键盘输入与示例输出
描述用户按下的键时用 kbd。展示程序或命令的示例输出时用 samp。保持诚实——不要仅为了等宽外观就把普通词标成 kbd。kbd 表示“这是键盘输入”；samp 表示“这是程序打印或返回的内容”。若谈的是文件名或 CSS 属性，正确选择仍是 code。混淆这些角色会困扰读者与辅助技术。在快捷键指南里，连续多个 kbd（例如 Ctrl + S）读起来自然；在终端结果行里，samp 清楚表明文本是输出而非指令。角色选对了，样式与无障碍体验都会更一致。
kbd 与 samp
html<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Output: <samp>Saved successfully.</samp></p>在编辑器中练习
- 写一句提到
font-size属性、并把该名放在code里的句子。 - 添加一个
pre+code块，内含两行短 HTML，使用<与>。 - 添加一行含
kbd的保存快捷键提示。 - 可选：添加一行伪造命令输出的
samp。 - 保存并打开——确认
pre内空格保留，且已编码标签显示为文本。 - 临时把未编码的原始
<div>贴进块中，刷新，观察问题，再编码它。
这个短实验覆盖本课三个主模式：行内、安全块、键盘/输出。若第 6 步不再让你惊讶，很好——你已内化风险。若版面“坏掉”，把那一刻当作活生生的证据：在 HTML 演示中，编码不是可选项。把练习页留着，以后写教程时当作模板对照。
会破坏示例的错误
- 多行代码只放在无
pre的code里——换行与缩进可能被折叠 - 未编码就粘贴原始
<div>或<p>——会变成真正元素 - 用
pre写长篇普通散文（它面向预格式化计算机文本，不是作文） - 在并非键盘输入时，把每个技术词都标成
kbd - 忘记关闭
pre或code，导致后续文本卡在预格式化样式中
这些错误之所以常见，正是因为浏览器在“帮忙”：解析标签、规范化空白，并在缺少闭合时继续应用样式。对策是语义加编码：元素角色正确，HTML 示例中的尖括号用实体。一旦修好一个变成真正元素的片段，你就很少会再不假思索地粘贴原始标记。把这份错误清单当作写作检查习惯，而不是事后补救。
小结
code标记短的行内计算机文本pre为块保留空格与换行- 组合
pre与code是常见的多行模式 - 在 HTML 示例中把
<与>编码为<与> - 当角色匹配时，
kbd与samp覆盖键盘输入与示例输出 - 按文本含义选择元素，而不只看默认字体外观
养成这些习惯后，教程页就能展示命令与片段，既不破坏版面，也不会意外执行示例标记。在后续课程中，继续把演示用 HTML 当作要呈现的文本——安全、可读、语义诚实。先选对元素角色，再处理编码，教学示例就会稳定可靠。
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部