html本身无内置导入能力，所有“导入”实为javascript操作：fetch加载远程html片段需同源或cors，filereader读取本地html须用domparser解析，iframe嵌入可隔离但交互受限，html imports已废弃。
HTML 本身没有“导入数据”的内置能力，所有所谓“导入”，本质都是 JavaScript 操作 DOM 或发起请求后，把外部数据塞进表单、表格或容器里。别被“导入”这个词带偏——重点不是动作，而是「数据怎么来」和「往哪塞」。
用 fetch 加载远程 HTML 片段并插入页面
这是最常用的动态内容加载方式，适合复用 header、sidebar 等静态片段，前提是文件同源（或服务端配了 CORS）。
常见错误现象：Failed to fetch 或控制台提示跨域，或者插入后脚本不执行、样式丢失。
- 必须确保目标 HTML 文件是纯片段（不含
、、标签），否则innerHTML插入会破坏结构 -
fetch('nav.html')返回的是 Response 对象，得链式调用.text()才能拿到字符串，直接赋值给innerHTML会出错 - 如果片段里有
<script></script>标签，innerHTML = html不会自动执行它；需要手动提取并eval()或document.createElement('script')注入（但注意 XSS 风险） - 建议在插入前清空目标容器，避免重复叠加：
target.innerHTML = ''
用 FileReader 读取用户选的本地 HTML 文件
适用于让用户上传一个 .html 文件，然后解析其中的表格、列表等结构化内容，比如从导出的报表页提取数据。
常见错误现象：Uncaught TypeError: Cannot read property 'readAsText' of null，或解析后得到乱码、空字符串。
-
input[type="file"]的change事件触发时，必须检查e.target.files[0]是否存在，否则FileReader实例无法初始化 - 务必指定编码：
reader.readAsText(file, 'utf-8')，否则中文可能变问号；如果不确定编码，可先用file.arrayBuffer()+TextDecoder更稳妥 - 读取完成的回调是
reader.onload，不是onloadend；且reader.result才是最终 HTML 字符串 - 拿到字符串后别直接
innerHTML—— 先用DOMParser解析：const doc = new DOMParser().parseFromString(html, 'text/html')，再用doc.querySelector安全提取节点
用 iframe 嵌入外部 HTML 页面
这是唯一无需 JS 就能“导入”整个页面的方式，适合隔离环境、避免样式/脚本冲突，但交互受限、SEO 不友好。
常见错误现象：空白 iframe、404、跨域拒绝访问、高度塌陷、移动端缩放异常。
-
src必须是有效 URL，相对路径以当前页面为基准；若指向本地文件（file://协议），Chrome 等浏览器默认禁用，需起本地服务（如npx serve） - 不要省略
title属性，否则屏幕阅读器无法识别内容用途，影响可访问性 - 默认 iframe 高度固定，内容超长会出滚动条；如需自适应，得用 postMessage 和子页面配合计算高度（不能靠 JS 直接读取 iframe 内容，跨域时禁止）
- iframe 内脚本与父页完全隔离，无法直接调用函数或共享变量；通信必须走
window.postMessage
为什么不用 HTML Imports？
因为已彻底废弃。Chrome 73 起移除支持，Firefox/Safari 从未实现，W3C 也已撤回草案。任何新项目写 <link rel="import" href="xxx.html"> 都不会生效，控制台必报 HTML imports are no longer supported。
如果你在旧项目里看到它，迁移路径只有两条：改用 fetch + innerHTML（简单片段），或切到构建工具（如 Vite、Webpack）做编译时 HTML 合并（适合多页复用）。
真正容易被忽略的是：所有前端“导入”都绕不开同源策略和用户主动触发（比如点击按钮、选择文件）。自动加载远程 HTML 或静默读取本地文件，在现代浏览器里根本做不到——这不是技术限制，而是安全底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
