本文介绍使用 html `
在实际开发中，我们常需将外部 HTML 内容（如 Notion 导出的静态页）嵌入现有网站。传统方式依赖 src 属性指向远程 URL，但若 HTML 仅存于本地、无法部署到公网或受限于平台（如 Squarespace 不支持自定义文件上传），该方案即不可行。
此时，srcdoc 属性是标准、轻量且兼容性良好的解决方案。它允许你将完整的 HTML 文档（含 DOCTYPE、
、 及内联资源）作为字符串直接写入⚠️ 关键注意事项：
- 引号嵌套需谨慎：srcdoc 值必须用单引号（'）或双引号（"）包裹，其内部 HTML 若含相同引号，必须转义（如 " 或 '），否则导致 HTML 解析失败。推荐统一使用单引号包裹 srcdoc，并在内部 HTML 中自由使用双引号（如 ），避免转义。
- 字符编码：确保 srcdoc 中的 HTML 使用 UTF-8 编码；若含中文或特殊符号，建议对敏感字符（如 , &）做 HTML 实体转义，或使用 JavaScript 动态注入以规避手动转义风险。
- 样式与脚本限制：srcdoc 内容默认运行在独立上下文，可正常加载 CDN 资源（如 Bootstrap、jQuery），但无法访问父页面 DOM 或 localStorage（受同源策略与 iframe 沙箱限制）。如需交互，需通过 postMessage 显式通信。
- 浏览器兼容性：现代浏览器（Chrome 20+, Firefox 19+, Safari 10.1+, Edge 14+）均支持 srcdoc，旧版 IE 不支持——若需兼容 IE，应提供 src 回退链接（如指向临时托管地址）。
? Squarespace 实用技巧：
在 Squarespace 的「代码块」或「嵌入块」中，直接粘贴含 srcdoc 的
- 先在本地编辑好完整 HTML（含 CSS/JS CDN 链接）；
- 将整个 HTML 字符串用单引号包裹，并替换内部所有单引号为 '（或改用双引号）；
- 插入
? 进阶提示： 对于复杂 HTML（含大量引号、换行或动态内容），可借助 JavaScript 动态设置 srcdoc，避免 HTML 层级转义混乱：
综上，srcdoc 是嵌入离线 HTML 的标准、可靠且零依赖方案。只要合理处理引号与编码，即可在 Squarespace、WordPress 或任意静态站点中，安全、高效地复用本地生成的 HTML 内容。
