正确显示 <div> 应使用 HTML 实体 ，配合 <pre><code> 包裹以保留格式；JS 动态插入时优先用 createTextNode 防解析，Markdown 中需确认渲染器是否多重转义。
HTML 里怎么正确显示 <div> 这种尖括号内容
直接写 <div> 浏览器会把它当标签解析，结果啥也不显示，或者页面错乱。必须把 和 <code>> 换成 html 实体。
-
<替换，<code>>替换>—— 这是最常用、最稳妥的写法 - 别用
或 <code> 等数字编码，虽然也对，但可读性差，协作或维护时容易看懵 - 如果内容里还有双引号（比如
<a href="https://example.com">），记得把"写成"，否则属性值提前截断 - 整段代码建议包在
<pre><code>里，既保留换行空格，又语义清晰
用 <pre><code> 包裹时要注意什么
<pre> 本身只保留空白和换行，不带语法高亮；<code> 是内联语义标签，单独用不换行、不保留缩进。两者嵌套才是标准做法。
- 顺序必须是
<pre><code>...</code></pre>，反过来（<code><pre>）不符合规范，部分校验工具报错 -
<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> 而不是 <code><div> - 解决办法：在代码块前加声明语言（如
```html），并确认所用渲染器支持该语言的原始输出模式；不行就换用<pre><code class="html">手动写 - Hexo 用户特别注意：
post.content默认经过两次转义，得在模板里用{{{ post.content }}}（三个大括号）绕过转义
真正麻烦的不是怎么写对，而是不同环节（编辑器、构建工具、CDN、浏览器）各自做一次转义或解码，最后结果偏移一两次就全乱了。留心每个环节的输入输出形态，比背熟某个写法更重要。
立即学习“前端免费学习笔记（深入）”；
