答案：拖拽HTML文件需用file.text()异步读取，再通过DOMParser解析并清理script和内联事件，最后套scoped容器插入以避免样式污染。
拖拽进来的 HTML 文件不会自动高亮，必须手动读取、解析、渲染并加样式；直接 innerHTML 插入会执行脚本、触发事件、污染全局作用域，还可能报错。
drop 事件里为什么拿不到 HTML 内容？
因为 event.dataTransfer.files 返回的是 File 对象列表，不是字符串。它没有 content 属性——这个属性根本不存在。常见错误是写 file.content 或 file.text（没加括号），结果得到 undefined。
正确做法是调用 file.text()，它返回一个 Promise：
- 必须用
await或.then()处理异步结果 -
file.text()自动按 UTF-8 解码，含 BOM 也能正确识别，不用手动处理 - 只对
file.type === 'text/html'或file.name.match(/\.html?$/i)的文件做此操作
怎么安全解析 HTML 字符串并高亮显示？
不能用 innerHTML = htmlString，否则内联 onclick、onerror、<script></script> 全都会执行。要用 DOMParser 创建隔离上下文，再手动清理：
- 用
new DOMParser().parseFromString(htmlString, "text/html")得到干净的Document - 删掉所有
script：doc.querySelectorAll("script").forEach(s => s.remove()) - 清除内联事件：
doc.body.querySelectorAll("[onerror],[onclick],[onload]").forEach(el => { el.removeAttribute("onerror"); el.removeAttribute("onclick"); el.removeAttribute("onload"); }) - 若需保留样式，可复制
style标签，但link[rel=stylesheet]不会实际加载 CSS（无网络请求）
高亮渲染后怎么防止样式/结构错乱？
直接把解析后的 doc.body 子节点 append 到页面，容易被父容器 CSS 干扰（比如 img { max-width: 100% } 被覆盖）。更可控的做法是套一层带 scoped 样式的容器：
- 创建
const container = document.createElement("div") - 加 class 如
container.className = "html-preview"，并在 CSS 中写.html-preview * { all: unset; }重置继承样式 - 再用
container.append(...doc.body.childNodes)插入内容 - 最后把
container插入目标区域，避免污染全局样式流
真正难的不是读取或解析，而是判断哪些节点该留、哪些该删、哪些属性要白名单放行——比如 data-* 属性通常安全，但 src 或 href 若含 javascript: 就得过滤。这些细节不写死规则，很容易被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
