listing标签已从html5标准中彻底移除，不可用于代码展示；应使用pre包裹带有语言class的code标签，并对html特殊字符进行转义。
listing 标签不能用于可靠展示代码块，它早已被废弃，现代项目中不该用。
为什么 listing 标签现在不能用
浏览器对 listing 的支持完全不可控：Chrome DevTools 会把它标为「unknown element」；双击本地打开 HTML 文件时，缩进丢失、中文乱码、换行错乱是常态；VS Code Live Server 下几乎不渲染样式。它在 HTML 4.01 就被标记为「不推荐使用」，HTML5 已彻底移除——不是「建议别用」，而是「标准里根本没它了」。
只用 pre 或只用 code 也不行
常见错误是把多行代码直接塞进 code 标签：
<code>function foo() {<br> return true;<br>}</code>
code 是行内元素，<code>br和空格会被浏览器合并，实际渲染成一行- 只用
pre虽能保留换行缩进，但缺失语义——屏幕阅读器读作「预格式文本」，不是「代码」；SEO 无法识别语言类型；高亮库（如 highlight.js）也抓不到目标节点 - 正确组合是
pre包裹code，且code必须有明确语言 class，比如<code class="javascript">
展示 HTML 源码时必须手动转义
哪怕用了 pre + code，如果里面含 、<code>>、&，浏览器仍会尝试解析它们。这不是样式问题，是 HTML 解析阶段就出错了。
→ <code><-
>→> -
&→& -
"在属性值里才需转义为"；写在code文本内容里一般不用
别指望 white-space: pre-wrap 或 contenteditable="false" 能绕过——HTML 解析永远发生在 CSS 和 JS 执行之前。
基础样式要设在 pre 和 code 两个层级
默认的 pre + code 看起来丑，是因为没控制字体栈、背景、溢出和行高。
- 给
pre设overflow-x: auto防止长代码折行错乱 - 给
pre code设等宽字体栈：font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace（顺序不能错，否则跨平台渲染不一致） -
pre加浅灰背景和圆角边框，code加深灰文字色（比如#24292e），避免黑字在灰底上发虚 - 别给
code设display: block——它本就是行内元素，强行改可能破坏语法高亮库的定位逻辑
真正容易被忽略的是：字体栈顺序、转义时机、以及 pre 和 code 的职责分工——前者管格式，后者管语义，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
