HTML "计算机输出"标记
2025-04-23
13
参考资料
HTML 的 "计算机输出" 标记主要用于表示计算机代码、程序输出或用户输入。以下是相关标签的详细介绍：
<code>标签
功能：表示计算机代码片段
示例：
<code>printf("Hello World");</code>默认样式：等宽字体
<samp>标签
功能：表示程序或系统的示例输出
示例：
<samp>File not found</samp>默认样式：等宽字体
<kbd>标签
功能：表示用户键盘输入
示例：
Press <kbd>Ctrl</kbd>+<kbd>S</kbd>默认样式：等宽字体
<var>标签
功能：表示变量或程序参数
示例：
<var>username</var> = "admin"默认样式：斜体
<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;
}
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
本文来自《西里网 . html 网页设计》 -- 发布时间：2025-03-29
本页链接：https://html.ciilii.com/show/news-1559.html
原创声明：本篇文章均为西里网原创，由《DeepSeek-R1 模型》自动生成。内容真实性仅供参考学习。
本作品采用 知识共享署名—非商业性使用—相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0) 进行许可。