初识HTML（六）——计算机格式

最新推荐文章于 2022-02-24 23:22:17 发布

秃头的毛睿

最新推荐文章于 2022-02-24 23:22:17 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/107187749

版权

1.键盘格式

<kbd></kbd>定义键盘输入

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>HTML kbd 元素表示键盘输入：</p>

<p><kbd>File | Open...</kbd></p>

</body>
</html>

2. 计算机输出示例

<samp></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>

3.代码格式

<code></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>

如果需要解决此标签对空格和换行符省略的问题使用标签<pre></pre>

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

4.变量格式化

<var></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>