HTML-预文本格式&计算机输出标签-优快云博客

本文链接：https://blog.youkuaiyun.com/grace666/article/details/51874109

本文介绍了HTML中的预格式化标签`<pre>`及其在展示源代码中的应用，以及`<code>`, `<kbd>`, `<samp>`, `<tt>`, `<var>`等用于表示计算机输出的标签。此外，还提到了`<address>`, `<abbr>`, `<acronym>`, `<dbo>`, `<blockquote>`, `<q>`等其他相关标签的用法和示例。" 125840314,11591467,TCP网络应用开发详解：客户端与服务端流程,"['网络协议', 'TCP/IP', 'Python', '网络开发']

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

1.预文本格式标签：<pre>

（1）用来定义预格式化的文本，被包围在此标签中的文本通常会保留空格和换行符，并且文本也会以等宽形式呈现

（2）一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是，可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到<pre> 块中时，就像放HTML/XHTML 文档的其他部分中一样即可

2.计算机输出标签

（1）<code>标签，定义计算机代码或者其他机器可以阅读的文本内容，将文本内容以等宽、类似电传打字机样式的字体（courier）显示出来，而且也暗示这段文本表示计算机的源代码，但浏览器可以做出自己的样式处理

（2）<kbd>标签，定义键盘码，当我们需要表达键盘输入文本时，从Web标准的角度出发，强烈建议使用这个标签，因为，它更具语义化，搜索引擎也更能读懂它

（3）<samp>标签，定义计算机代码样本

（4）<tt>标签，定义打字机代码

（5）<var>标签，定义变量

示例代码：

<html>
<body bgcolor="pink">
 
<!--预文本格式化-->
for i = 1 to 9
		print i
	next i
<pre>
	for i = 1 to 10
		print i
	next i
</pre>
<br/>
<code>
	for i = 1 to 11
		print i
	next i
</code>
<br/>
<kbd>
	for i = 1 to 12
		print i
	next i
</kbd>
<br/>
Please input <kbd>quit</kbd> to exit
<br/>
<tt>
	for i = 1 to 13
		print i
	next i
</tt>
<br/>
<samp>
	for i = 1 to 14
		print i
	next i
</samp>
<br/>
<var>
	for i = 1 to 15
		print i
	next i
</var>

</body>
</html>

展现效果：

（6）<address>标签，定义地址，默认斜体显示标签里的内容

示例代码：

<html>
<body bgcolor="pink">

<!--地址标签-->
<address>Written by <a href="mailto:test@example.com"> Tester </a>
Visit us at:<br/>
Example.com<br/>
Box 111,New York <br/>
USA
</address>


</body>
</html>

展现效果：

（7）<abbr>和<acronym>标签，分别表示定义网页中呈现的文字的缩写和简称，都通过title属性来给出缩写的完整名称，区别在于，<acronym>标记用来表示首字母缩略词，并且往往缩写形式是一个可发音的单词

示例代码：

<html>
<body bgcolor="pink">
	
<!--首字母缩写-->
<abbr title="World Wide Web">WWW</abbr>
<br/>
<acronym title="North Atlantic Treaty Organization">NATO</acronym><br>

</body>
</html>

展现效果：

（8）<dbo>标签，定义文字方向，rtl（right to left）表示倒序，ltr表示正序

示例代码：

<html>
<body bgcolor="pink">
	
<!--定义文字方向标签dbo，rtl表示right to left反序，ltr正序-->

<bdo dir="rtl">Here is some Hebrew text</bdo>

</body>
</html>

展现效果：

（9）<blockquote>和<q>标签，<blockquote>标签定义长引用，默认带有左右40px的外间距，不带双引号；而<q>标签表示短引用，在内容的开始和结尾处包含双引号

示例代码：

<html>
<meta charset="utf-8">
<body bgcolor="pink">
	
<!--定义块引用，blockquote表示长引用，q表示短的引用-->
1.以下表示长引用：
<br/>
<blockquote>
    这是长的引用。abcdefgABCDEFG
</blockquote>
<br/>

2.以下表示短引用:
<br/>
<q>
    这是短的引用。12345
</q>

</body>
</html>

展示效果：