HTML标记预格式化文本使用

标签，该标签用于保留文本中的空格和换行符，常用于显示代码或诗歌等需要保留格式的内容。以下是关于
标签的详细说明：1. 
 标签简介
 是 preformatted text 的缩写，表示“预格式化文本”。在 HTML 中，浏览器默认会以等宽字体（如 Courier）显示 
 标签内的内容，并且会保留其中的 空格、换行和缩进。示例

HTML中的`

`标签是专门用于原样保留文本空格、换行和缩进的“预格式化”利器，尤其适合展示代码、诗歌、日志等对排版敏感的内容；但它仅负责空白符行为，不提供语义——因此常需与`<code>`嵌套使用，既确保格式不失真，又让搜索引擎和屏幕阅读器准确识别内容类型；同时必须警惕XSS风险，对用户输入严格进行HTML编码，并注意响应式布局下的溢出处理与跨浏览器兼容性问题，真正考验开发者的是：何时该用它，以及何时更该避免它。</code>

用

</code> 包裹需要保留空格和换行的文本</h3>
<p>HTML 默认会把连续空格、制表符、换行都压缩成一个空格，想原样显示代码片段、日志、ASCII 图这类内容，必须用 <code><pre></code>。它不负责样式，只告诉浏览器：“别动我的空白符”。</p>
<p>常见错误是只靠 <code><code></code> 标签——它语义上表示代码，但不会保留缩进或换行；或者误用 <code><div></code> + <code>white-space: pre</code> CSS，这在语义和可访问性上都不如原生 <code><pre></code>。</p>
<ul><li><code><pre></code> 本身不带等宽字体，通常需配合 <code><code></code> 使用，比如 <code><pre><code>...</code>

直接在

</code> 里写中文或长行内容时，可能溢出容器，需额外加 <code>overflow-x: auto</code> 或 <code>word-break: break-word</code></li>
<li>服务端渲染时注意：如果内容含用户输入，<code><pre></code> 不自动转义 HTML 实体，得先对 <code><</code>、<code>></code>、<code>&</code> 做 HTML 编码，否则有 XSS 风险</li>
</ul><h3><code><pre></code> 和 <code><code></code> 的分工要分清</h3>
<p><code><pre></code> 是布局行为（保留空白），<code><code></code> 是语义标签（表示一段计算机代码）。两者常嵌套使用，但不能互相替代。</p>
<p>比如展示一段 Python 函数，正确写法是：<code><pre><code>
function hello() {
    console.log("Hello, world!");》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问