HTML 计算机代码元素

htmlweb developmentfront end technology更新于 2025/6/26 2:20:17

为了在网页上显示计算机代码，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> 元素

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

现在让我们看一个在 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> 元素

HTML 中的 <samp> 标签是一个短语标签，类似于 <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>