正确显示 应使用 html 实体 <div>，配合 包裹以保留格式；js 动态插入时优先用 createtextnode 防解析，markdown 中需确认渲染器是否多重转义。
html 里怎么正确显示 <div> 这种尖括号内容<p>直接写 <code><div> 浏览器会把它当标签解析，结果啥也不显示，或者页面错乱。必须把 <code> 和 <code>> 换成 html 实体。
替换 <code>，<code>> 替换 > —— 这是最常用、最稳妥的写法- 别用
或 <code> 等数字编码，虽然也对，但可读性差，协作或维护时容易看懵
- 如果内容里还有双引号（比如
<a href="https://example.com"></a>），记得把 " 写成 "，否则属性值提前截断
- 整段代码建议包在
<pre class="brush:php;toolbar:false;"><code></code> 里，既保留换行空格，又语义清晰</li></ul><H3>用 <code><pre class="brush:php;toolbar:false;"><code></code> 包裹时要注意什么</H3><p><code><pre class="brush:php;toolbar:false;"></code> 本身只保留空白和换行，不带语法高亮；<code><code></code> 是内联语义标签，单独用不换行、不保留缩进。两者嵌套才是标准做法。</p><ul><li>顺序必须是 <code><pre class="brush:php;toolbar:false;"><code>...</code></pre>，反过来（<code><pre class="brush:php;toolbar:false;"></pre>）不符合规范，部分校验工具报错
-
<pre class="brush:php;toolbar:false;"></pre> 默认字体等宽，但没设置 white-space: pre-wrap 的话，超长行会溢出容器，移动端尤其明显
- 别给
<code> 直接设 display: block，它本就是内联元素，强行改可能破坏行内布局上下文
遇到 Uncaught DOMException: Failed to execute 'insertAdjacentHTML' 怎么办
替换 <code>，<code>> 替换 > —— 这是最常用、最稳妥的写法 或 <code> 等数字编码，虽然也对，但可读性差，协作或维护时容易看懵
<a href="https://example.com"></a>），记得把 " 写成 "，否则属性值提前截断<pre class="brush:php;toolbar:false;"><code></code> 里，既保留换行空格，又语义清晰</li></ul><H3>用 <code><pre class="brush:php;toolbar:false;"><code></code> 包裹时要注意什么</H3><p><code><pre class="brush:php;toolbar:false;"></code> 本身只保留空白和换行，不带语法高亮；<code><code></code> 是内联语义标签，单独用不换行、不保留缩进。两者嵌套才是标准做法。</p><ul><li>顺序必须是 <code><pre class="brush:php;toolbar:false;"><code>...</code></pre>，反过来（<code><pre class="brush:php;toolbar:false;"></pre>）不符合规范，部分校验工具报错
<pre class="brush:php;toolbar:false;"></pre> 默认字体等宽，但没设置 white-space: pre-wrap 的话，超长行会溢出容器，移动端尤其明显<code> 直接设 display: block，它本就是内联元素，强行改可能破坏行内布局上下文
Uncaught DOMException: Failed to execute 'insertAdjacentHTML' 怎么办这个错误常出现在用 JS 动态插入含 HTML 字符串时，比如把用户输入的 <script>alert(1)</script> 直接塞进 insertAdjacentHTML。
- 根本原因：浏览器尝试解析字符串里的标签，而其中包含非法结构（如未闭合标签、脚本执行、或在不允许的位置插入块级元素）
- 安全解法不是转义全部，而是先用
document.createTextNode()创建纯文本节点，再 append —— 这样连都不会被当标签处理 - 如果真要渲染 HTML 字符串，确保来源可信，并用
DOMPurify.sanitize()过滤，而不是手写正则替换 - 注意：
textContent赋值比innerHTML安全，但会丢掉所有格式；二者选哪个，取决于你到底想“显示代码”还是“运行代码”
Markdown 里写 HTML 代码块为什么有时不生效
很多静态站点生成器（如 Hugo、Jekyll）或编辑器（Typora、Obsidian）默认把 Markdown 解析后的内容再喂给 HTML 渲染器，中间可能多了一层转义。
- 三重反引号代码块（
```html）里的内容，有些解析器会自动对<code>>做一次实体化，导致你看到的是<div>而不是<div> <li>解决办法：在代码块前加声明语言（如 <code>```html），并确认所用渲染器支持该语言的原始输出模式；不行就换用<pre class="brush:php;toolbar:false;"><code class="html"></code> 手动写</pre> - Hexo 用户特别注意：
post.content默认经过两次转义，得在模板里用{{{ post.content }}}（三个大括号）绕过转义
真正麻烦的不是怎么写对，而是不同环节（编辑器、构建工具、CDN、浏览器）各自做一次转义或解码，最后结果偏移一两次就全乱了。留心每个环节的输入输出形态，比背熟某个写法更重要。
立即学习“前端免费学习笔记（深入）”；
