参考资料

1. HTML 折行
2. 有哪些方法可以防止开发者工具被打开？
3. html链接标签详细说明以及案例
4. HTML 内联式
5. HTML 文字方向格式化
6. HTML 表格背景
7. HTML 输出
8. HTML 常用1600 万种不同颜色颜色代码表

HTML "计算机输出"标记

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;
}