必须使用协议相对路径或根相对路径解决资源加载失败问题，css需声明type="text/css"，自定义字体format值须匹配真实类型，data-*属性应统一用getattribute访问，embed标签已被弃用，应改用object、iframe或原生音视频标签。
src 属性必须用绝对路径或协议相对路径
本地相对路径（比如 ./fonts/roboto.woff2）在不同环境加载失败是常见原因：Python 的 folium 导出 HTML 后用 file:// 打开时，浏览器会按当前文件目录解析；但部署到 Nginx 或 Flask 服务时，路径基准变成服务器根目录，导致字体、图片、JS 资源 404。
实操建议：
- 所有
src、href值优先用协议相对路径：//cdn.example.com/fonts/roboto.woff2，避免http:/https:冲突 - 若走本地资源，统一用根相对路径：
/static/fonts/roboto.woff2，并确保 Web 服务将/static/映射到对应磁盘目录 - 在
folium中嵌入字体时，不要依赖file://路径——它在 Safari 和部分 Electron 环境下被默认禁用
type 属性决定浏览器是否加载及如何解析资源
type 不只是“提示”，而是实际影响加载行为。比如 <link rel="stylesheet" href="custom.css" type="text/css"> 在旧版 IE 中若缺 type 会被跳过；而 <script src="main.js" type="module"></script> 在不支持 ES Module 的浏览器里直接不执行。
关键点：
- CSS 文件必须声明
type="text/css"，尤其在 XHTML 或严格 MIME 检查环境下（如某些信创国产化浏览器） - 自定义字体的
@font-face中src的format()值要匹配真实文件类型，format('woff2')写成format('woff')会导致 Safari 拒绝加载 - 嵌入 SVG 图标时，
<img src="icon.svg" type="image/svg+xml">的type属性无效（<img>不支持），应改用<object data="icon.svg" type="image/svg+xml"></object>
data-* 属性在 EdgeHTML 和部分国产内核中需用 getAttribute 访问
你在 JS 里写 el.dataset.foo 取值，在 Chrome/Firefox/Safari 没问题，但在旧 Edge（EdgeHTML）、UOS 银河麒麟内置浏览器、以及部分基于 Chromium 定制但未同步新版 Blink 的信创环境里，dataset 可能返回空对象或抛错。
稳妥做法：
- 一律用
el.getAttribute('data-foo')替代el.dataset.foo - 设置时也用
el.setAttribute('data-foo', 'bar')，避免依赖dataset的自动连字符转驼峰逻辑 - 如果用 Vue/React 等框架绑定
data-属性，确认其底层渲染是否经过 DOM API 封装——有些轻量级模板引擎会跳过标准属性反射
embed 标签已基本不可靠，改用 object 或 iframe
<embed src="doc.pdf"></embed> 在 iOS Safari 和多数国产浏览器中根本不会触发 PDF 插件，甚至静默失败；Android Chrome 自 80 版本起也逐步弃用 NPAPI 插件支持。
替代方案明确且简单：
- PDF：用
<iframe src="doc.pdf" width="100%" height="600px"></iframe>—— 兼容性最好，且现代浏览器内置 PDF 查看器 - SVG：用
<object data="chart.svg" type="image/svg+xml">fallback</object>—— 支持备用内容，且可绑定 JS 事件 - 音视频：直接用
<video></video>/<audio></audio>，它们的src和type组合比embed可控得多
真正容易被忽略的是：哪怕你只面向信创环境（如统信 UOS + 海光 CPU），也不能假设所有组件都支持相同扩展机制——embed 的插件模型在龙芯 LoongArch 平台几乎无维护，而 object 和 iframe 是标准 DOM 接口，有稳定 polyfill 路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
