HTML 计算机代码元素 详解
HTML基础 2022-05-19 17:00:05小码哥的IT人生shichen
HTML 计算机代码元素
计算机代码
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}HTML 计算机代码格式
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
HTML 键盘格式
HTML <kbd> 元素定义键盘输入：
示例代码：
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>HTML kbd 元素表示键盘输入：</p>
<p><kbd>File | Open...</kbd></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML 样本格式
HTML <samp> 元素定义计算机输出示例：
示例代码：
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>HTML samp 元素表示计算机输出示例：</p>
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML 代码格式
HTML <code> 元素定义编程代码示例：
示例代码：
<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>编程代码示例：</p>
<code>
var person = {firstName:"Bill", lastName:"Gats", age:50}
</code>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
<code> 元素不保留多余的空格和折行：
示例代码：
代码实例：
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>code 元素不保留多余的空格和折行：</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如需解决该问题，您必须在 <pre> 元素中包围代码：
示例代码：
代码实例：
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>code 元素不保留多余的空格和折行：</p>
<p>如需解决该问题，您必须在 pre 元素中包围代码：</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML 变量格式化
HTML <var> 元素定义数学变量：
示例代码：
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>爱因斯坦的公式：</p>
<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HTML 计算机代码元素
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码文本 |
| <kbd> | 定义键盘文本 |
| <samp> | 定义计算机代码示例 |
| <var> | 定义变量 |
| <pre> | 定义预格式化文本 |
