cdn的标签必须严格满足四点：rel为"stylesheet"、href为完整https url、置于内且不被注释或换行隔开、不可自闭合；否则样式静默失效。
直接在 里写对 <link> 标签就能用，但错一个字符、少一个协议头、放错位置，页面就白屏或闪动。
CDN <link> 标签必须写对这四点
浏览器对 <link rel="stylesheet"> 的校验极严，任何偏差都会静默失败——控制台可能不报错，但样式就是不生效。
-
rel必须是"stylesheet"（不是"style"、"css"，也不能漏引号） -
href必须是完整 HTTPS URL，例如：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css；不能是cdn.jsdelivr.net/...、./css/...或带 Markdown 符号的链接（如[https://...](https://...)或末尾多出)、↗） - 标签必须放在
内，且不能被注释、空格、换行隔开；塞进会导致 FOUC 或 SSR 工具忽略 - 不要自闭合：
<link>在部分模板引擎中解析异常，应写成<link>（虽 HTML5 允许自闭合，但兼容性风险高）
为什么 CDN 链接返回 text/plain MIME 错误？
这不是 CDN 没生效，而是你请求的 URL 实际返回了 HTML 错误页（比如 404 页面），浏览器强行当 CSS 解析，于是报错 Refused to apply style from 'xxx' because its MIME type ('text/plain') is not a supported stylesheet MIME type。
- 直接在浏览器地址栏打开你的
href值，确认是否真返回 CSS 内容（响应头含Content-Type: text/css） - 检查 npm 包结构：Bootstrap 5 正确路径含
dist/，即dist/css/bootstrap.min.css；少这层就 404 - Tailwind CSS 官方不提供预编译 CSS 文件，
https://cdn.tailwindcss.com是 JS 初始化脚本，不能当href值用
必须加 integrity 和 crossorigin 吗？
生产环境必须加。没 integrity 的 CDN 就像没锁的保险柜——CDN 被劫持、镜像被污染时，你完全无法察觉。
-
integrity值需从官方源或 npm 包发布页获取（如 jsDelivr 页面点击“Copy SRI”）；手动生成易出错 -
crossorigin必须设为"anonymous"，否则浏览器不会发送Origin头，CDN 可能拒绝返回integrity所需的哈希校验信息 - 不加这两项，在 CSP 策略严格或 CDN 节点异常时，样式会静默失效
CDN 失败后怎么回退到本地文件？
靠 onerror 事件监听是最轻量、兼容性最好的方案，不需要额外构建工具介入。
- 先给
<link>加id：<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="..." crossorigin="anonymous"> - 在
底部加内联 JS：<script>document.getElementById('bootstrap-cdn').onerror = () => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/bootstrap.min.css'; document.head.appendChild(link); };</script> - 注意：本地路径必须是服务器可访问的真实路径（如
/css/...），不能是./css/...—— SPA 路由下相对路径极易 404
最容易被忽略的是：CDN 链接本身是否真的返回 CSS 内容。很多人复制完就以为万事大吉，结果 Network 面板里那个请求的 Response 是一段 HTML 错误页，而浏览器连 warning 都懒得打。验证这一步，比调任何构建配置都优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
