HTML的<pre>标签怎么用?

HTML的<pre>标签用于定义预格式化文本块,它保留web浏览器忽略的文本空间、换行符、制表符和其他格式化字符。<pre> 标签的一个常见应用就是用来表示计算机的源代码。下面本篇文章就来给大家介绍一下<pre>标签,希望对大家有所帮助。

<pre>元素中的文本以固定宽度字体显示,但可以使用css更改。<pre>标签需要开始和结束标签。

语法:

<pre> 内容... </pre>

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

下面的示例说明了HTML中的<pre>标签:

示例1:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>pre标签</title>
	</head>

<body>
<pre>
    &lt;html&gt;
	&lt;head&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
	&lt;/script&gt;
	&lt;/head&gt;
	
	&lt;body&gt;
	
	  &lt;script type=&quot;text/javascript&quot;&gt;
	    xmlDoc=<a href="https://www.html.cn/">HTML中文网</a>(&quot;Hello World!&quot;);
	    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
	  &lt;/script&gt;
	
	&lt;/body&gt;
	
    &lt;/html&gt;
</pre>
</body>

</html>

在上面的代码中,<pre> 标签中的特殊符号被转换为符号实体,比如 "&lt;" 代表 "<","&gt;" 代表 ">"。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。

效果图:

f5a2a2e755fea88880672e0fd08af6b.png

示例2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>pre标签</title>
		<style> 
            pre { 
                font-family: Arial; 
                color: #009900; 
                margin: 25px; 
            }  
        </style>
	</head>

	<body>
		<pre>
			Hello world!
			&lt;pre&gt;标签元素可定义预格式化的文本。
		
		</pre>
	</body>

</html>

输出:

1e2ca0099e0e5acd58e08bc21c7174e.png

浏览器的支持:

下面列出的支持<pre>标签的浏览器:

● Opera

● Internet Explorer

● Google Chrome

● Firefox

● Apple Safari

以上就是HTML的<pre>标签怎么用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1