022_html计算机输出标签

最新推荐文章于 2023-08-20 20:27:32 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-08-20 20:27:32 发布

阅读量520

点赞数

分类专栏： html学习

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/108994906

版权

html学习专栏收录该内容

89 篇文章

订阅专栏

本文介绍了HTML中用于展示代码和文本的标签，包括<kbd>、<samp>、<code>、<var>、<pre>等。这些标签有助于规范代码展示格式，提升文档可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. html计算机代码格式

1.1. 通常, html使用可变的字母尺寸, 以及可变的字母间距。在显示计算机代码示例时, 并不需要如此。

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

2. <kbd>标签

2.1. <kbd>标签定义键盘输入文本。

2.2. <kbd>标签经常用在于计算机相关的文档和手册中。例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>kbd标签定义键盘文本</title>
	</head>
	<body>
		键入<kbd>quit</kbd>来退出程序或者键入<kbd>menu</kbd>来返回主菜单。
	</body>
</html>

3. <samp>标签

3.1. <samp>标签定义计算机输出示例。

3.2. 例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>samp标签定义计算机输出示例</title>
	</head>
	<body>
		<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>

4. var标签

4.1. <var>标签表示变量的名称, 或者由用户提供的值。

4.2. <var>标签经常与<code>和<pre>标签一起使用, 用来显示计算机编程代码范例及类似方面的特定元素。

4.3. 用<var>标签标记的文本通常显示为斜体。

4.4. 就像其他与计算机编程和文档相关的标签一样, <var>标签不只是让用户更容易理解和浏览你的文档, 而且将来某些自动系统还可以利用这些恰当的标签, 从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调, 提供给浏览器的语义信息越多, 浏览器就可以越好地把这些信息展示给用户。

4.5. 例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>var标签表示变量的名称</title>
	</head>
	<body>
		<p>爱因斯坦的公式：</p>
		<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>
	</body>
</html>

5. code标签

5.1. <code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

5.2. <code>元素不保留多余的空格和折行。

5.3. 软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code>标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。虽然<code>标签通常只是把文本变成等宽字体, 但它暗示着这段文本是源程序代码。

5.4. 例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>code标签用于表示计算机源代码</title>
	</head>
	<body>
		<code>
			var person = {
			    firstName:"Bill",
			    lastName:"Gates",
			    age:50,
			    eyeColor:"blue"
			}
		</code>
	</body>
</html>

6. <pre>标签

6.1. pre标签可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

6.2. <pre>标签的一个常见应用就是用来表示计算机的源代码。

6.3. 可以导致段落断开的标签(例如标题<h1>~<h6>、<p>和<address>标签)绝不能包含在<pre>所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行, 但是这种行为在所有浏览器上并不都是一样的。

6.4. pre元素中允许的文本可以包括物理样式和基于内容的样式变化, 还有链接、图像和水平分隔线。当把其他标签(比如: <a>标签)放到<pre>块中时, 就像放在html/xhtml文档的其他部分中一样即可。

6.5. 制表符(tab)在<pre>标签定义的块当中可以起到应有的作用, 每个制表符占据8个字符的位置。但是我们不推荐使用它, 因为在不同的浏览器中, Tab的实现各不相同。在用<pre>标签格式化的文档段中使用空格, 可以确保文本正确的水平位置。

6.6. 如果您希望使用<pre>标签来定义计算机源代码, 比如: html源代码, 请使用符号实体来表示特殊字符, 比如: "<"代表"<", ">"代表">", "&"代表"&"。

6.7. 例子

6.7.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>pre标签可定义预格式化的文本</title>
	</head>
	<body>
<pre>
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;html计算机输出标签&lt;/title&gt;
		&lt;meta charset=&quot;utf-8&quot; /&gt;
	&lt;/head&gt;
	&lt;body&gt;
	  	&lt;p&gt;计算机输出标签有:&lt;/p&gt;
	  	&lt;kbd&gt;定义计算机代码。&lt;/kbd&gt;
	  	&lt;code&gt;定义键盘码。&lt;/samp&gt;
	  	&lt;samp&gt;定义计算机代码样本。&lt;/code&gt;
	  	&lt;tt&gt;定义打字机代码。&lt;/tt&gt;
	  	&lt;var&gt;定义变量。&lt;/var&gt;
	  	&lt;pre&gt;定义预格式文本。&lt;/pre&gt;
	&lt;/body&gt;
&lt;/html&gt;
</pre>
	</body>
</html>

6.7.2. 效果图