HTML "计算机输出"标记

参考资料

1. HTML 字体, 字体颜色 ，字体大小
2. HTML 颜色
3. Html过滤工具有哪些
4. HTML 删除字符效果和插入字符效果
5. HTML id 属性详解
6. HTML 多媒体
7. HTML 元素语法
8. HTML/UBB互转有哪些

HTML 的 "计算机输出" 标记主要用于表示计算机代码、程序输出或用户输入。以下是相关标签的详细介绍：

1. <code> 标签

• 功能：表示计算机代码片段

• 示例：<code>printf("Hello World");</code>

• 默认样式：等宽字体

2. <samp> 标签

• 功能：表示程序或系统的示例输出

• 示例：<samp>File not found</samp>

• 默认样式：等宽字体

3. <kbd> 标签

• 功能：表示用户键盘输入

• 示例：Press <kbd>Ctrl</kbd>+<kbd>S</kbd>

• 默认样式：等宽字体

4. <var> 标签

• 功能：表示变量或程序参数

• 示例：<var>username</var> = "admin"

• 默认样式：斜体

5. <pre> 标签

• 功能：保留文本中的空格和换行

• 常用于显示代码块

• 示例：

<pre>
function test() {
  console.log("Hello");
}
</pre>

CSS 扩展：

/* 通用样式 */
code, samp, kbd, var, pre {
  font-family: monospace;
}

/* 特定样式 */
code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  background-color: #f8f8f8;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: auto;
}

kbd {
  background-color: #eee;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  padding: 2px 4px;
  border-radius: 3px;
}