html标签显示为纯文本的主因是内容被当作字符串插入而非html解析，常见于误用textcontent、框架未启用v-html/dangerouslysetinnerhtml、后端返回未转义html或编码错误；本地file://协议限制、字符编码不匹配、内联脚本执行时机或csp策略亦会导致各类渲染异常。
HTML代码显示成纯文本而不是渲染效果
浏览器把 <div>Hello</div> 当成普通文字打出来，说明 HTML 标签没被解析——最常见原因是内容被当作字符串直接插入了 DOM，而不是作为 HTML 解析。
比如用 element.textContent = '<strong>test</strong>'，或者 Vue/React 里没用 v-html / dangerouslySetInnerHTML；后端返回的 HTML 字符串如果没经过正确处理，也会原样输出。
- 检查是否误用了
textContent或innerText，该换用innerHTML - 框架中（如 Vue）确认用了
v-html="rawHtml"，而不是{{ rawHtml }} - React 中必须写成
{{ {__html: rawHtml} }}并搭配dangerouslySetInnerHTML - 若从 API 拿到的是转义后的字符串（如
<div>），需先用DOMParser或正则还原，不能直接塞进innerHTML
浏览器报错 “Not allowed to load local resource”
打开本地 .html 文件时，控制台出现这个错误，通常是因为用了 file:// 协议加载外部资源（比如 <script src="./js/app.js"></script> 在某些浏览器或路径下失败）。
本质是现代浏览器对 file:// 协议加了安全限制，AJAX、fetch、部分 iframe 和跨目录脚本都可能被拦截。
立即学习“前端免费学习笔记（深入）”；
- 开发阶段别双击打开 HTML，改用
python3 -m http.server或 VS Code 的 Live Server 插件起本地服务 - 路径尽量用相对路径，避免
../跨太多级，尤其在嵌套iframe场景下容易触发限制 - Chrome 启动时加
--allow-file-access-from-files是临时方案，但不解决根本问题，也不适用于他人访问
HTML 特殊字符显示为乱码或方块
、©、中文、emoji 显示异常，基本锁定编码或字体问题。
即使写了 <meta charset="UTF-8">，如果文件本身不是 UTF-8 编码保存，或者服务器返回的 HTTP Content-Type 头覆盖了 meta 声明（比如返回 text/html; charset=iso-8859-1），照样出错。
- 用编辑器确认文件实际编码：VS Code 右下角点击编码名 → “Save with Encoding” → 选
UTF-8 - 检查响应头：F12 → Network → 刷新 → 点 HTML 请求 → 查看
Content-Type是否含charset=utf-8 - 服务器配置（如 Nginx）要显式设置
charset utf-8;，否则可能按系统默认发头 - 字体缺失会导致 emoji 或生僻字成方块，可加
font-family: system-ui, "Segoe UI", sans-serif;提升兼容性
script 标签内联 JS 执行失败但无报错
写了 <script>console.log('hi');</script> 却没输出，大概率是脚本执行时机不对，或被浏览器策略拦截。
典型场景：脚本放在 里，又没加 defer 或 async，而它依赖的 DOM 元素还没生成；或是 CSP（内容安全策略）禁止了内联脚本执行。
- 确保
<script></script>放在前，或加defer属性（适合依赖 DOM 的逻辑） - 检查响应头是否有
Content-Security-Policy包含script-src 'self'却没加'unsafe-inline'（不推荐加） - 内联脚本在严格 CSP 下必须带
nonce或hash，否则直接静默忽略——这时控制台连报错都不会有 - JS 语法错误（如结尾少
;、对象多逗号）可能让整块脚本失效，建议用 ESLint 或浏览器格式化后检查
HTML 渲染问题的根因往往藏在“谁控制了解析权”：是浏览器？框架？服务端模板？还是你手写的字符串拼接？绕开表象，先定位内容最终以什么方式、在哪个环节、用什么协议落到了页面上——比查文档更快。
