是唯一靠谱的css引入方式，因其支持并行请求、预加载、http缓存、cdn分发及media条件加载；缺rel属性或放错位置（如body中）会导致解析失败或重排；@import串行阻塞且易fouc；已废弃。
外部资源必须用 <link> 或 <script></script> 标签引入，其他写法（比如 @import、<style></style> 里写路径、<link rel="import">）要么不是 HTML 级加载、要么已废弃，不能算“正确引入”。
为什么 <link rel="stylesheet"> 是唯一靠谱的 CSS 引入方式
浏览器遇到 <link rel="stylesheet" href="main.css"> 会立即发起并行请求，支持预加载、HTTP 缓存、CDN 分发，还能用 media 属性做条件加载。
-
rel="stylesheet"缺了就当普通链接，样式根本不会解析 - 必须放在
里；放里虽能生效，但可能触发重排，老浏览器（如 IE6）直接忽略 - 路径推荐用根路径（如
/css/main.css），避免 HTML 文件位置一变就 404 -
@import是 CSS 规则，不是 HTML 加载机制：它串行执行、阻塞渲染、无法被预加载器识别，容易导致 FOUC（闪白）
<script src="...>%20%E7%9A%84%E4%BD%8D%E7%BD%AE%E5%92%8C%E5%B1%9E%E6%80%A7%E6%80%8E%E4%B9%88%E9%80%89
%0A%E8%84%9A%E6%9C%AC%E4%BD%8D%E7%BD%AE%E5%92%8C%E5%B1%9E%E6%80%A7%E7%9B%B4%E6%8E%A5%E5%BD%B1%E5%93%8D%E9%A1%B5%E9%9D%A2%E6%98%AF%E5%90%A6%E5%8D%A1%E9%A1%BF%E3%80%81DOM%20%E6%98%AF%E5%90%A6%E5%8F%AF%E6%93%8D%E4%BD%9C%E3%80%81%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%98%AF%E5%90%A6%E5%8F%AF%E6%8E%A7%E3%80%82
- %0A
- %E4%BC%A0%E7%BB%9F%E8%84%9A%E6%9C%AC%EF%BC%88%E9%9D%9E%E6%A8%A1%E5%9D%97%EF%BC%89%EF%BC%9A%E6%94%BE%E5%9C%A8%20
<body>%20%E5%BA%95%E9%83%A8%E6%9C%80%E5%AE%89%E5%85%A8%EF%BC%8C%E7%A1%AE%E4%BF%9D%20DOM%20%E5%B7%B2%E5%B0%B1%E7%BB%AA %0A - %E6%83%B3%E6%94%BE%20
<head>%EF%BC%9F%E5%8A%A0%20defer%EF%BC%9AHTML%20%E8%A7%A3%E6%9E%90%E5%AE%8C%E5%86%8D%E6%89%A7%E8%A1%8C%EF%BC%8C%E4%BF%9D%E6%8C%81%E9%A1%BA%E5%BA%8F%EF%BC%8C%E9%80%82%E5%90%88%E4%BE%9D%E8%B5%96%20DOM%20%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E9%80%BB%E8%BE%91 %0A - %E5%AE%8C%E5%85%A8%E7%8B%AC%E7%AB%8B%E7%9A%84%E5%88%86%E6%9E%90%E8%84%9A%E6%9C%AC%EF%BC%88%E5%A6%82%E7%BB%9F%E8%AE%A1%EF%BC%89%EF%BC%9F%E5%8A%A0%20
async%EF%BC%9A%E4%B8%8B%E8%BD%BD%E5%AE%8C%E7%AB%8B%E5%88%BB%E6%89%A7%E8%A1%8C%EF%BC%8C%E4%B8%8D%E4%BF%9D%E8%AF%81%E9%A1%BA%E5%BA%8F%EF%BC%8C%E5%8F%AF%E8%83%BD%E5%9C%A8%20DOM%20%E6%9E%84%E5%BB%BA%E5%89%8D%E5%B0%B1%E8%B7%91 %0A - ES%20%E6%A8%A1%E5%9D%97%E5%BF%85%E9%A1%BB%E6%98%BE%E5%BC%8F%E5%86%99%20
type=" module>，路径要带扩展名（<code>./utils.js</script>不行，得是./utils.js），且不支持裸路径（import { x } from 'lodash'无效）本地开发时路径总 404？先确认协议和基准目录
双击打开 HTML 文件（
file://协议）和通过服务器访问（http://localhost）对路径的解析规则完全不同，这是 90% 的路径错误根源。-
./assets/style.css和assets/style.css等价，都以当前 HTML 文件所在目录为起点 -
/css/main.css在服务器环境下从域名根目录找；但在file://下会去找磁盘根目录（如C:/css/main.css），必然失败 -
//cdn.jsdelivr.net/...自动继承当前页协议，但file://下会尝试用file://加载，直接报错 - 验证方法：打开 DevTools → Network 面板，看请求 URL 是什么、状态码是不是 404、实际发起的是哪条路径
想“引入另一个 HTML 文件”？别信“一行代码搞定”的说法
原生 HTML 没有类似
include的语法。所谓“引入”，本质是拼接时机的选择——你得接受它是运行时加载（iframe/fetch）、服务端拼接（SSI）、还是构建时替换（Vite 插件）。-
<iframe src="header.html"></iframe>最简单，但样式/脚本隔离，SEO 归零，history 不同步，还可能双滚动条 -
fetch("header.html").then(r => r.text()).then(html => el.innerHTML = html)灵活，但<script></script>标签不会执行，相对路径在插入后失效，错误无 fallback -
<link rel="import">已全平台移除，Chrome 73+ 直接无视，不要在新项目里出现 - 真正复用导航栏这类内容，该用服务端包含（SSI）或构建工具（如 Vite 的
vite-plugin-html），而不是靠前端 runtime 拼凑
路径写错、标签放错位置、混淆加载机制和执行时机——这些问题往往不是“不会写”，而是没意识到 HTML 资源加载是分阶段、分协议、分环境的。调试时盯紧 Network 面板里的真实请求，比反复改路径更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！ -
