href必须指向真实可访问资源，相对路径以HTML文件位置为基准，绝对路径从网站根目录起始；排查需用DevTools Network面板查Request URL、状态码及Content-Type。
href 必须指向一个真实可访问的资源文件路径
link 标签的 href 不是占位符，也不是语义标签——它必须是一个浏览器能发起 HTTP 请求并收到有效响应的 URL。如果路径错、文件不存在、服务器返回 404 或 MIME 类型不匹配（比如返回 text/plain 却声明 rel="stylesheet"），样式就不会生效，且通常不报错，只能靠 DevTools 的 Network 面板查状态码和 Content-Type 响应头。
- 相对路径如
href="css/main.css"是相对于当前 HTML 文件所在目录解析的，不是相对于index.html所在路径或服务器根目录 - 绝对路径如
href="/assets/theme.css"从网站根目录开始找，注意开头的/不代表文件系统根目录 - CDN 地址如
href="https://cdn.example.com/v1.2.0/app.css"需确保目标服务开启 CORS（必要时加crossorigin="anonymous"） -
href不能是空值、#、javascript:void(0)等伪地址——这些在<a>中可能“工作”，但在<link>中直接被忽略
常见 rel 值决定 href 解析逻辑和用途
href 的实际含义高度依赖 rel 属性。同一个 URL 在不同 rel 下行为完全不同：
-
rel="stylesheet"：浏览器会尝试加载并解析为 CSS，要求响应头Content-Type: text/css（否则静默失败） -
rel="icon"：支持多种格式（.ico,.png,.svg），但浏览器对 MIME 类型和尺寸有隐式要求；sizes属性仅在此类场景下生效 -
rel="preload"：href指向需预加载的任意资源（字体、JS、图片），但必须配as属性说明类型，否则可能被忽略 -
rel="modulepreload"：href必须指向合法 ES 模块，且服务器需返回application/javascript或text/javascript
href 路径写错的典型表现和排查方式
最常被忽视的是路径解析错误导致资源 404，但页面看起来“好像正常”——其实只是没样式、没图标、没字体。关键判断点：
- 打开 DevTools → Network 标签页，筛选
css或font，看对应href请求是否返回 200；若显示(blocked:mixed-content)，说明 HTTP 页面里写了 HTTPS 的href，或反之 - 右键检查元素 → 查看
<link>标签是否被渲染引擎识别：若href值为空、含空格、或含中文未编码，DOM 中该节点可能直接被跳过 - 用
document.querySelector('link[rel="stylesheet"]').href在 Console 中打印，确认浏览器最终解析出的完整 URL 是否符合预期（注意协议、域名、路径拼接） - 本地开发时用 file:// 协议打开 HTML，
href的相对路径仍有效，但跨域限制更严——某些浏览器会直接拒绝加载本地 CSS，必须起本地服务
HTML5 中 href 不再强制要求，但省略等于失效
HTML5 规范允许 <link> 不写 href，但这不代表它可以“留空”或“以后再填”。没有 href 的 <link rel="stylesheet"> 就是无效声明，浏览器不会尝试加载任何东西，也不会 fallback 到其他机制。
立即学习“前端免费学习笔记（深入）”；
- 动态切换样式时，必须先确保新 CSS 文件已存在且路径正确，再改
link.href；直接赋值一个 404 路径，只会让页面瞬间失去样式 - 服务端渲染中拼接
href时，注意路径拼接逻辑是否受部署子路径影响（如部署在/myapp/下，href="/css/app.css"会请求根目录，而非/myapp/css/app.css） - 构建工具（如 Webpack、Vite）注入的
<link>通常带哈希文件名，此时href是构建产物路径，不是源码路径——别手动去改 dist 目录里的 HTML
href 的解析发生在 HTML 解析阶段，早于 DOMContentLoaded，也早于任何 JS 执行。哪怕你用 JS 动态创建 <link> 并设好 href，只要没插入到 head，它就不会触发加载。 
