HTML计算机代码元素


为了在网页上显示计算机代码,HTML中提供了一些元素。让我们一一来看这些元素:

  • <kbd>
  • <pre>
  • <code>
  • <var>
  • <samp>

HTML中的<kbd>元素

<kbd>标签用于定义键盘输入。当您希望用户在键盘上输入内容时使用它,例如,复制的快捷键Ctrl+C,退出Esc键等。

现在让我们来看一个实现<kbd>标签的例子:

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<h2>Shortcut Keys</h2>
<p>Use the following shortcut keys −</p>
<p><strong>Cut</strong> − <kbd>CTRL</kbd>+<KBD>X</kbd></p>
<p><strong>Copy</strong> − <kbd>CTRL</kbd>+<KBD>C</kbd></p>
<p><strong>Paste</strong> − <kbd>CTRL</kbd>+<KBD>V</kbd></p>
<p><strong>Undo</strong> − <kbd>CTRL</kbd>+<KBD>Z</kbd></p>
</body>
</html>

输出

HTML中的<pre>元素

HTML中的<pre>标签用于设置预格式化的文本。其中的文本保留空格和换行符,即文本在网页上的显示与在HTML代码中添加的文本相同。现在让我们来看一个实现<pre>标签的例子:

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<pre>
   This is a demo text
   and will appear
   in the same format as
   it
   is visible
   here. The pre tag displays
   the text in a fixed-width
   font. It preserves
   both spaces and
   line breaks as you can see
   here.
</pre>
</body>
</html>

输出

HTML中的<code>元素

<code>标签用于在HTML文档中格式化代码。例如,如果您想编写Java代码并正确格式化它,则在HTML中使用<code>元素。现在让我们来看一个在HTML中实现<code>元素的例子:

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<h1>Header Files</h1>
<h2>C++</h2>
<code>
   #include <iostream>
</code>
<h2>C</h2>
<code>
   #include <stdio>
</code>
</body>
</html>

输出

HTML中的<var>元素

<var>元素在HTML中用于显示用于计算的数学表达式。

现在让我们来看一个在HTML中实现<var>标签的例子:

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<h2>Mathematical Equation</h2>
Sample equation − <var>2x</var> - <var>2z</var> = <var>3y</var> + 9
</body>
</html>

输出

HTML中的<samp>元素

<samp>标签在HTML中是一个类似于<em>、<code>、<strong>等的短语标签,用于在HTML文档中格式化文本。

现在让我们来看一个实现<samp>元素的例子:

示例

 在线演示

<!DOCTYPE html>
<html>
<body>
<h2>Exam Results</h2>
<p><s>Result would be announced on 6th June.</s></p>
<samp>New date for results are 7th June.</samp>
</body>
</html>

输出

更新于:2019年7月30日

319 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告