HTML外部资源引用需依场景选路径：相对路径以当前文件为基准，绝对路径以网站根目录为起点，协议相对URL省略协议适配HTTPS/HTTP，数据URI内联小资源，ES模块路径须显式带扩展名且不支持裸路径。
当在HTML中引入外部资源（如CSS样式表、JavaScript脚本、图片或字体文件）时，若浏览器无法正确获取这些资源，往往源于文件路径书写错误。以下是依据不同上下文环境准确引用外部资源的详细操作说明：
一、相对路径引用规则
相对路径以当前HTML文件所在目录为基准，通过“./”、“../”等符号定位目标资源，适用于项目结构固定且资源与HTML文件处于同一工程内的场景。
1、使用“./”表示当前目录，例如：<link rel="stylesheet" href="./style.css"> 表示加载同级目录下的style.css文件。
2、使用“../”表示上级目录，例如：<script src="../js/main.js"></script> 表示加载HTML文件所在目录上一级中js子目录下的main.js。
立即学习“前端免费学习笔记（深入）”；
3、多级回退可叠加使用，如“../../assets/images/logo.png”表示向上两级后进入assets/images目录查找logo.png。
二、绝对路径引用规则
绝对路径以网站根目录为起点，以“/”开头，不受HTML文件物理位置影响，适合大型站点或多级嵌套页面统一资源管理。
1、在服务器环境中，<img src="/images/banner.jpg"> 表示从网站根目录开始查找images子目录下的banner.jpg。
2、该路径不依赖HTML文件所在层级，即使HTML位于/sub/page.html，仍按服务器根目录解析。
3、注意：本地双击打开HTML文件时，“/”指向本地文件系统根目录（如C:/），而非预期项目根目录，此时可能失效。
三、协议相对URL引用规则
协议相对URL省略HTTP或HTTPS协议声明，仅保留“//”，由浏览器自动继承当前页面协议，常用于CDN资源引用，避免混合内容警告。
1、例如：<script src="//cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> 在HTTPS页面中自动使用HTTPS，在HTTP页面中使用HTTP。
2、该写法不适用于本地file://协议打开的HTML文件，浏览器将尝试以file://协议加载，导致失败。
3、不可与路径前缀混用，禁止写作“http:///cdn.example.com/file.js”或“// /cdn.example.com/file.js”（空格或多余斜杠将破坏解析）。
四、数据URI内联引用规则
数据URI将小体积资源（如图标、简单SVG）直接编码为字符串嵌入HTML或CSS中，规避额外HTTP请求及路径问题，适用于微资源场景。
1、在<img>标签中使用：<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJyZWQiLz48L3N2Zz4=">。
2、Base64编码需确保无换行、无空格，且MIME类型声明准确（如image/png、text/css）。
3、不适用于大文件，否则显著增大HTML体积并阻碍缓存复用。
五、模块化路径引用规则（ES Module场景）
在使用type="module"的<script>标签中，import语句遵循严格的模块解析逻辑，路径必须显式标明扩展名或为合法包名，不支持隐式.js后缀补全。
1、本地模块导入必须带扩展名：import { func } from './utils.js'; 不能省略“.js”。
2、路径必须为相对路径（以./或../开头）或绝对路径（以/开头），禁止使用无前缀的裸路径如“utils”。
3、浏览器原生模块不支持Node.js风格的node_modules解析或package.json入口字段，所有路径均按字面量处理。
