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><code class="html"><html>
<body>
<p>Hello</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8714" title="HTML汇报生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8714" title="HTML汇报生成器">HTML汇报生成器</a>
<p>🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
</div>
<a href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</body>
</html></code></pre>
-
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 一起用的老模板——它们共同构成了一套隐式约定，而这个约定早已随浏览器内核迭代失效。
