listing标签是html 2.0遗留标签，用于等宽字体下保留空白和换行，语义弱、支持差，html4.01已废弃、html5完全移除；应改用pre+code组合实现可靠、语义化、可扩展的代码展示。
什么是 listing 标签？它早就被废弃了
listing 是 HTML 2.0 时代的遗留标签，作用是**以等宽字体、保留空白和换行的方式显示纯文本内容**，类似 pre，但语义更弱、浏览器支持更差。它在 HTML 4.01 中已被明确标记为「不推荐使用」，HTML5 完全移除，现代浏览器虽可能渲染（出于兼容性），但无标准行为保证。
常见错误现象包括：本地双击打开含 listing 的 HTML 文件时，内容错位、缩进丢失、中文乱码；用 VS Code Live Server 预览时样式完全失效；Chrome DevTools 中该标签被标记为「unknown element」。
- 它不接受 CSS 的
white-space或font-family等关键控制，靠浏览器“猜”怎么渲染 - 不支持嵌套其他 HTML 元素（比如
strong或a），强行嵌套会导致解析中断或静默忽略 - 与
pre不同，listing没有默认的margin或overflow行为，排版不可控
替代方案：用 pre + code 组合才真正可靠
现代写法应统一用 pre 包裹原始文本，再用 code 标明其代码属性——这是 HTML5 明确推荐的语义化组合，且所有主流浏览器原生支持。
例如：
<pre class="brush:php;toolbar:false;"><code class="html"><html>
<body>
<p>Hello</p>
</body>
</html></code>
-
pre负责保留空格、换行、缩进 -
code提供语义（这是代码片段），并方便后续用 Prism.js / Highlight.js 做语法高亮 - 可安全添加
class、data-language等自定义属性，listing不支持这些扩展
为什么有人还在用 listing？多是复制古早教程或误读文档
部分老书、W3Schools 早期中文镜像、甚至某些高校陈旧课件里仍出现 listing，常被当作「比 pre 更轻量的代码块」来教。但实际它从未被规范赋予「代码展示」语义——它的本意只是「列出一段机器可读的原始文本」，比如 FTP 目录列表（这也是名字来源）。
容易踩的坑：
- 用
listing写 Markdown 预览页，结果中文标点被截断或换行错乱 - 在 Vue/React 组件中动态插入
listing，发现 SSR 渲染后 DOM 结构异常 - 想用 CSS 选择器
listing { font-size: 14px; }统一调整，但 Safari 完全不响应
如果必须兼容老系统，别硬扛，加一层降级处理
极少数维护型项目里遇到遗留 listing，不要直接删改——先检查是否被 JS 动态依赖（比如某段脚本用 document.getElementsByTagName('listing') 提取内容）。稳妥做法是用脚本自动替换：
document.querySelectorAll('listing').forEach(el => {
const newEl = document.createElement('pre');
newEl.innerHTML = '<code>' + el.textContent + '</code>';
el.replaceWith(newEl);
});
注意：el.textContent 而非 el.innerHTML，避免二次解析 HTML 实体；替换后记得清理旧样式规则，防止 listing 选择器干扰新结构。
真正难处理的不是标签本身，而是那些没写注释、没留文档、混着 xmp 和 plaintext 一起用的老模板——它们共同构成了一套隐式约定，而这个约定早已随浏览器内核迭代失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
