cari

Rumah  >  Artikel  >  hujung hadapan web  >  如何给html中的pre标签中的文字换行？html pre标签的使用实例

如何给html中的pre标签中的文字换行？html pre标签的使用实例

寻∝梦
寻∝梦asal
2018-08-28 13:41:5910067semak imbas

本篇文章主要的介绍了关于html pre标签的使用方法的实例说明，还介绍了关于HTML pre标签的作用，都用实例给大家证明了，pre确实是个有用的标签，在初级的时候，用pre标签比别的标签简单多了。好了，现在就让我们一起来看下面这篇文章吧

首先让我们来了解一下HTML中的pre标签能干什么？

HTML中的pre标签能干些什么呢，用通俗的话来解释就是pre标签能把它里面的文本格式都在网页中显示出来，比如空格啊，换行啊，都能被浏览器给一个不留的显示出来，让我们一起来看看效果吧

先让我们了解一下pre标签的作用：

是e03b848252eb9375d56be284e690e873标签可以把里面的文本格式在浏览器中能正确的显示出来，就想换行格式一样，在里面换行（想看更多关于HTML的知识，欢迎搜索“PHP中文网”进行观看）

第一个肯定是了解它是怎样换行的：

比如，我在pre标签里面新建一个网页：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大家来到PHP中文网

这是一个正常的网页，如图：

tuyi.png

现在我在里面把上面那段话换行显示

<body>
<pre class="brush:php;toolbar:false">欢迎大家来到
PHP中文网

现在再看下效果：

tuer.png

你看，上图完全换了一行，还把中间的空格都显示出来了，在pre里面不需要加任何标签，就能实现换行的功能

第二个来看看空格显示的情况吧

HTML pre标签的空格功能也是和分行差不多，你在文本中你输入三个空格，那在浏览器中你也会显示出来三个空格，

来看实例说明：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大 家来到PHP中文网（这里是一个空格）
欢迎大  家来到PHP中文网（这里是两个空格）
欢迎大   家来到PHP中文网（这里是三个空格）

这是一个普通的p标签，这里我用了 五个空格，你看到了没有

来看效果

tusan.png

这就是上面的空格显示的效果，有了对比，我们很容易发现，这上面的一个空格在浏览器中显示也是一个空格，三个空格都能在浏览器中显示出来，但是在p标签中我用了五个空格，到了浏览器下，就变成一个空格都不到的样子。

这就是对我来说HTML pre标签的最好用的地方，在任何段落中，你只要加入e03b848252eb9375d56be284e690e873标签就能输入任何你想输入的格式，这就方便的很多e03b848252eb9375d56be284e690e873标签的意思用官方的话来说就是（preformatted text）预文本格式，把文本格式在浏览器中给它显示出来（想看更多关于HTML的知识，欢迎点击：http://www.php.cn进行观看）

好了，以上就是对HTML pre标签的作用介绍还有怎么使用空格和怎么换行的实例都说出来了。大家如果有什么不懂的地方可以在下面提问。

【小编推荐】

HTML中的base标签如何写相对路径？（内附使用介绍）

HTML img标签的src属性的用法是什么？具体使用方法解析（内附实例）

Atas ialah kandungan terperinci 如何给html中的pre标签中的文字换行？html pre标签的使用实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML中的base标签如何写相对路径？（内附使用介绍）Artikel seterusnya：HTML ul标签的什么意思？HTML ul标签的作用详解

Artikel berkaitan

Lihat lagi