应使用textcontent而非innerhtml将html字符串安全写入，因其自动转义、&等字符，防止解析执行；需配合white-space: pre-wrap样式保留换行缩进。
保存HTML源码到<span></span>标签本质是转义问题
直接把原始HTML字符串塞进<span></span>里会触发浏览器解析，导致标签被渲染或执行，而不是“保存”为纯文本。真正要做的不是“存为<span></span>”，而是把HTML内容**安全转义后放入<span></span>的文本节点中**——否则<div>hello</div>一放进去，页面就多出一个<div>块。<p>常见错误现象：<code><span><script>alert(1)</script></span>在页面上实际弹窗了；或者<b>test</b>显示为加粗文字而非原样字符串。
- 必须对
、<code>>、&做HTML实体转义（<、>、&），单双引号按需转义 - 不要用
innerHTML直接赋值未转义字符串，改用textContent或innerText - 若需保留换行和缩进，
<span></span>默认不换行，得加white-space: pre-wrap样式
JavaScript里怎么把HTML字符串安全塞进<span></span>
最简可靠方式是创建<span></span>元素，再用textContent写入——它自动处理所有转义，无需手动替换。
const htmlStr = '<div class="box"><p>Hello & World</p></div>';
const span = document.createElement('span');
span.textContent = htmlStr; // ✅ 自动转义为 <div>...
document.body.appendChild(span);
如果已有一个<span id="code-view"></span>，直接操作：
document.getElementById('code-view').textContent = htmlStr;
反例（危险）：span.innerHTML = htmlStr —— 会执行脚本、加载资源、破坏结构。
-
textContent兼容性好（IE9+），且性能优于手动replace()正则转义 - 若需高亮语法，应先用
textContent设原始内容，再用第三方库（如highlight.js）在<span></span>内重建带<mark></mark>等标签的DOM - 服务端返回的HTML字符串若含Unicode控制字符（如U+200E），可能干扰显示，建议前端额外过滤
后端生成时直接输出转义后的<span></span>HTML
服务端模板（如Jinja2、EJS、Thymeleaf）通常自带转义机制，但必须确认是否作用于当前字段。例如Django默认转义，但{{ html_str|safe }}会跳过——这里绝不能加|safe。
Node.js + EJS示例：
<span class="html-source"></span> <!-- ✅ 自动HTML转义 -->
PHP中用htmlspecialchars()：
<span><?php echo htmlspecialchars($htmlStr, ENT_QUOTES, 'UTF-8'); ?></span>
- 务必指定
ENT_QUOTES，否则单引号不转义，可能闭合属性引发XSS - 编码参数必须与页面
<meta charset>一致，否则出现字符 - 避免用
htmlentities()——它会转义更多字符（如中文），没必要且影响可读性
为什么不用<pre class="brush:php;toolbar:false;"><code></code>而坚持用<code><span></span></code></pre>
因为<span></span>是行内元素，适合嵌入段落、提示框、表格单元格等上下文；而<pre class="brush:php;toolbar:false;"></pre>强制保留空白、独占一行、默认等宽字体，破坏排版流。
但<span></span>本身不保留换行，所以关键样式不能少：
span.html-source {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
white-space: pre-wrap;
word-break: break-all;
}
-
white-space: pre-wrap是核心：保留换行和空格，同时允许折行 - 去掉
font-family会导致等宽失效，尖括号和字母宽度不一，对齐错乱 - 别依赖
<span></span>的默认display: inline去包裹大段HTML——超长内容会撑破容器，word-break: break-all更可控
细粒度保存的关键不在标签选型，而在转义时机和上下文适配。漏掉一次textContent或少写一个pre-wrap，视觉或安全问题当场出现。
