最直接兼容的方式是将CDN链接写入的标签；JS库按依赖顺序置于底部；禁用@import；本地路径须相对HTML文件且经Network面板验证。
用 <link> 引入第三方 CSS 库（如 Bootstrap、Font Awesome）
最直接、兼容性最好的方式是把 CDN 链接写进 里的 <link> 标签。浏览器会同步加载并应用样式，不阻塞 HTML 解析（但会阻塞渲染），适合大多数静态页面。
常见错误现象：
-
404 Not Found：CDN URL 拼错，比如少个@5.3.0或多写个/dist/css/ - 图标不显示：引入了 Font Awesome 的 CSS，但没加
rel="stylesheet"，或漏了integrity导致 CSP 拦截（部分 CDN 要求） - 样式失效：标签没放在
里，而是丢到了中间，导致 FOUC（无样式内容闪烁）
正确写法示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
注意：rel="stylesheet" 不可省略；href 必须是完整 URL 或以 / 开头的绝对路径；若项目启用了 CSP 策略，需核对 integrity 和 crossorigin 属性是否匹配 CDN 提供的值。
立即学习“前端免费学习笔记（深入）”；
用 <script></script> 引入第三方 JS 库（如 jQuery、Lodash）
JS 库分两类：纯功能型（如 Lodash）和带 DOM 操作/初始化逻辑的（如 Bootstrap JS 组件）。前者可放 + defer，后者建议放 底部，避免因 DOM 未就绪而报错。
容易踩的坑：
-
Uncaught ReferenceError: $ is not defined：jQuery 在 Bootstrap JS 之后才加载，顺序反了 -
Bootstrap's JavaScript requires Popper：Bootstrap 5+ 的下拉、tooltip 等组件依赖 Popper，但只引了 Bootstrap JS，没引 Popper - CDN 版本混用：CSS 是 v5.3.0，JS 却用了 v5.2.3，导致行为不一致
推荐写法（Bootstrap 5.3 + Popper + jQuery 示例）：
<!-- 放在 <body> 结束前 --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
注意：Popper 必须在 Bootstrap JS 之前；jQuery 若被 Bootstrap JS 依赖，也必须前置；async 不推荐用于有依赖关系的库，会破坏加载顺序。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么不用 @import 在 CSS 里引入第三方样式？
@import 是 CSS 规则，不是 HTML 标签。它只能写在已通过 <link> 加载的 CSS 文件内部，不能直接用在 HTML 中。强行用会导致严重性能问题。
关键限制：
-
@import是串行加载：主 CSS 下载完后才开始下载被 import 的文件，比并行<link>慢得多 - 不支持
media条件判断（除非写在@import语句末尾，但兼容性差） - 无法通过 JS 动态控制加载时机，也不利于构建工具做 Tree Shaking
反例（不要这么写）：
/* 在 style.css 里写 */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");正解：所有第三方资源，优先走 HTML 的 <link> 或 <script></script>，别绕到 CSS 里去。
本地化第三方库时路径怎么写才不出错？
如果你把 Bootstrap、FontAwesome 等下载到本地，路径写错是高频问题。核心原则：路径始终相对于当前 HTML 文件位置，不是相对于 CSS 或 JS 文件。
典型结构：
project/
├── index.html
├── css/
│ └── bootstrap.min.css
├── js/
│ └── bootstrap.bundle.min.js
└── fonts/
└── fa-solid-900.woff2那么 index.html 中的引用必须是：
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.bundle.min.js"></script>
常见误区：
- 误以为
href="bootstrap.min.css"就行 —— 实际路径是css/bootstrap.min.css，漏目录就 404 - 在 CSS 文件里写
url("../fonts/fa-solid-900.woff2")却忘了该字体文件实际在fonts/目录下，相对路径应从 CSS 文件出发计算 - 用 VS Code Live Server 时，根路径是项目文件夹，但双击打开 HTML 时，根路径是文件所在目录 —— 测试务必用本地服务器，别双击运行
复杂点在于：路径错误不会报语法错误，只会静默失败。打开浏览器开发者工具的 Network 面板，看对应资源状态码是不是 200，是最直接的验证方式。
