HTML 计算机代码元素

HTML包含几个用于定义用户输入和计算机代码的元素。

计算机代码

var person = {
    firstName:"比尔",
    lastName:"盖茨",
    age:50,
    eyeColor:"蓝色"
}

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。

在显示计算机代码示例时，并不需要如此。

<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

HTML 键盘格式

HTML <kbd> 元素定义键盘输入：

实例

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>HTML kbd 元素表示键盘输入：</p>
<p><kbd>File | Open...</kbd></p>
</body>
</html>

运行一下

HTML 样本格式

HTML <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>

运行一下

HTML 代码格式

HTML <code> 元素定义编程代码示例：

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>编程代码示例：</p>
<code>
var person = {firstName:"埃隆", lastName:"马斯克", age:50}
</code>
</body>
</html>

运行一下

<code> 元素不保留多余的空格和换行：

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>code 元素不保留多余的空格和换行：</p>
<code>
var person = {
    firstName:"埃隆",
    lastName:"马斯克",
    age:50,
    eyeColor:"蓝色"
}
</code>
</body>
</html>

运行一下

如需解决该问题，您必须在 <pre> 元素中包围代码：

<!DOCTYPE html>
<html>
<body style="font-size:16px">
<p>code 元素不保留多余的空格和换行：</p>
<p>如需解决该问题，您必须在 pre 元素中包围代码：</p>
<code>
<pre>
var person = {
    firstName:"埃隆",
    lastName:"马斯克",
    age:50,
    eyeColor:"蓝色"
}
</pre>
</code>
</body>
</html>

运行一下

HTML 变量格式化

HTML <var> 元素定义数学变量：

<!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>

运行一下

HTML 计算机代码元素

标签	描述
<code>	定义计算机代码文本
<kbd>	定义键盘文本
<samp>	定义计算机代码示例
<var>	定义变量
<pre>	定义预格式化文本

HTML 计算机代码元素

计算机代码

HTML 计算机代码格式

HTML 键盘格式

实例

HTML 样本格式

实例

HTML 代码格式

HTML 变量格式化

HTML 计算机代码元素

分类导航