HTML5 本身不是框架，不内置 CSS 加载机制；正确引入外部 CSS 框架应使用 <link> 置于 <head> 中，按重置→框架→自定义顺序加载，注意 CSP、SRI 及 FOUC 防范。
HTML5 本身不是框架，也不提供“内置框架”来加载 CSS；所谓“HTML5 框架”通常指基于 HTML5 语义结构的前端库（如 Bootstrap、Tailwind CSS、Foundation），它们依赖外部 <link> 或 @import 加载样式表。关键在于：加载顺序、位置、阻塞行为和 CSP 兼容性。
如何用 <link> 正确引入外部 CSS 框架（推荐）
这是最常用、最可控的方式，浏览器并行下载且支持 media、rel="preload" 等优化。
- 必须放在
<head>内，否则可能触发 FOUC（Flash of Unstyled Content） - 多个框架 CSS 应按依赖顺序排列：基础工具类（如 Normalize.css）→ 布局框架（如 Bootstrap）→ 自定义主题
- 避免在
<body>底部放<link>：CSS 不会异步应用，页面会先无样式渲染再重绘 - 若需条件加载（如仅打印样式），用
media="print"；动态切换主题时，可操作disabled属性
<head> <!-- 重置样式优先 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"> <!-- 框架主样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <!-- 自定义覆盖 --> <link rel="stylesheet" href="custom.css"> </head>
@import 在 CSS 文件中引入框架样式（慎用）
只能写在 CSS 文件顶部（或 <style> 块开头），不支持在 HTML 中直接使用。它会阻塞后续样式的解析，且无法利用浏览器预加载器。
- 层级嵌套深时易引发加载瀑布：A.css @import B.css → B.css @import C.css，串行加载
- 不支持
media查询做条件加载（@import url(x.css) screen and (min-width:768px);合法但兼容性差，且仍会下载） - Webpack/Vite 等构建工具默认不处理 CSS 中的
@import（除非配置css-loader） - 现代项目中应避免在主 CSS 中
@importCDN 资源，因无法缓存复用、无完整性校验（SRI）
/* main.css */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('theme-dark.css'); /* 这行要等上一行完全加载后才开始请求 */动态加载 CSS 框架（JS 控制时机）
适合按需加载、主题切换、A/B 测试等场景，但需手动处理加载状态和错误回退。
立即学习“前端免费学习笔记（深入）”；
- 用
document.createElement('link')创建节点，设置rel="stylesheet"和href，再 append 到document.head - 监听
link.onload和link.onerror：CDN 失败时可 fallback 到本地副本 - 不要用
fetch()+insertRule()注入规则：无法加载字体、图片等资源，且破坏 CSS 作用域和媒体查询 - SSR 或 SEO 敏感页面慎用——初始 HTML 不含样式，爬虫看到的是无样式内容
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/tailwindcss@3.4.3/dist/tailwind.min.css';
link.onload = () => console.log('Tailwind loaded');
link.onerror = () => {
console.warn('CDN failed, loading local fallback');
link.href = '/css/tailwind.local.css';
};
document.head.appendChild(link);CSP 和完整性校验（生产环境必加）
若站点启用了 Content-Security-Policy，未声明 style-src 会导致外部 CSS 被拦截；未加 SRI（Subresource Integrity）则存在 CDN 投毒风险。
- 在
<link>上添加integrity和crossorigin属性（值需从 CDN 提供方获取） -
crossorigin="anonymous"是必需的：否则浏览器拒绝读取link.onload事件，也无法验证 integrity - 若 CSP 策略禁止内联样式，就别在 HTML 里写
<style>，所有样式必须外链并符合style-src - 本地开发时可用
localhost绕过 CSP，但上线前必须验证策略是否允许目标域名
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" >
真正容易被忽略的不是“怎么加”，而是“加在哪”和“加了之后谁在管”。比如：多个框架共用 .btn 类名却没做命名空间隔离；CSS 加载完成但 JS 还在等 DOM 就绪，导致初始化失败；或者把框架 CSS 放在自定义 CSS 后面，结果所有重写都被覆盖。这些细节比语法本身更影响结果。
