pre标签用于保留文本原有格式,包括空格、换行和缩进,常用于显示代码、日志或ASCII艺术,需用<pre>和</pre>包裹内容,浏览器会以等宽字体原样呈现。

在HTML中,想要保留文本原有的格式(比如空格、换行、缩进),可以使用 <pre> 标签。这个标签的作用是告诉浏览器:按照文本原本的样子显示内容,不要忽略多余的空格和换行。
<pre> 是 "preformatted text" 的缩写,表示“预格式化文本”。浏览器在渲染时会保留其中的:
通常浏览器会用等宽字体(如 Courier)显示 <pre> 中的内容,便于对齐和代码展示。
只需要把需要保持格式的文本放在 <pre> 和 </pre> 之间即可:
立即学习“前端免费学习笔记(深入)”;
这是第一行
这行前面有四个空格
更多缩进
连续 多个 空格
上面的代码会原样显示缩进、空行和空格,不会被浏览器合并或忽略。
1. 显示代码片段:
function hello() {
console.log("Hello, world!");
}
2. 展示日志或命令输出:
Starting server... [OK] Port 3000 is available. [INFO] Listening on http://localhost:3000
3. ASCII 艺术或表格对齐:
+-----------------+---------+ | Name | Age | +-----------------+---------+ | Alice | 25 | | Bob | 30 | +-----------------+---------+
虽然 <pre> 保留格式,但仍有几点需要注意:
基本上就这些。只要你想让网页显示的文字“怎么写的就怎么呈现”,<pre> 就是最简单直接的方法。不复杂但容易忽略细节,掌握它对展示结构化文本很有帮助。
以上就是HTML预格式化文本pre_HTML保留格式文本显示方法的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号