在网页开发里，使用<link>标签引入样式表、用<script>标签加载脚本是最基础的操作。但很多页面明明标签属性写对了，浏览器却报404，根源几乎都在路径上。HTML引用外部文件时的路径，本质上是告诉浏览器去哪里找到这个资源，而浏览器解析路径的方式取决于你写的是相对路径、绝对路径还是完整URL。
我们先看相对路径的解析规则。相对路径以当前HTML文档所在的目录作为基准。假设你的项目结构是这样的：根目录下有 index.html，还有一个 css 文件夹里面放着 style.css，以及一个 js 文件夹里面放着 main.js。在 index.html 中引用它们，就可以写 <link rel="stylesheet" href="css/style.css"> 和 <script src="js/main.js"></script>。这里的 css/style.css 表示当前目录下的 css 子目录里的 style.css 文件。
如果HTML文件本身在子目录里，比如 page/about.html 要引用根目录下的 css/style.css，那就需要用上级目录符号：<link rel="stylesheet" href="../css/style.css">。两个点代表回到上一级目录。若 about.html 还要引用同级的 page 目录里的 sub.js，则写 <script src="sub.js"></script> 即可。理解这种层级跳转，是避免相对路径错误的关键。
下面用一段简单的目录与代码对应示例来说明。假设文件布局如下：
项目结构：
root/
index.html
css/
style.css
js/
main.js
page/
about.html
index.html 中写法：
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
about.html 中写法：
<link rel="stylesheet" href="../css/style.css">
<script src="../js/main.js"></script>
绝对路径则以网站根目录为起点，以正斜杠开头。比如在任意HTML文件中写 <link rel="stylesheet" href="/css/style.css">，浏览器会直接从域名根下找 css/style.css，不管当前HTML在第几层目录。这种方式在大型项目中很稳，因为挪动HTML文件位置也不会破坏引用。但要注意，如果你在本地直接用 file:// 协议双击打开HTML，根路径指向的是磁盘根，往往找不到文件，必须借助本地服务器才能正确解析。
完整URL引用则用于加载第三方资源，例如 <script src="https://ipipp.com/lib/jquery.min.js"></script>。这里把 ippipp.com 替换成了 ipipp.com 以符合演示规范。使用完整URL时，浏览器会忽略当前页面路径，直接发请求到对应域名。缺点是若第三方服务不可用，你的页面功能会受影响，且可能涉及跨域与加载性能问题。
link与script标签的基础写法及属性差异
<link>标签只能出现在<head>区域（或某些规范允许的body中用于预加载），它自身不是闭合标签，用 rel 属性说明关系，stylesheet 表示样式表。一个典型写法为 <link rel="stylesheet" href="style.css">。而 <script>标签既可以放head也可以放body末尾，引入外部文件时用 src 属性，标签内部若为空则只加载外部脚本，若写代码则执行内联脚本。两者路径写法规则完全一致，都依赖 href 或 src 里的地址串。
需要区分的是，<script>有 defer 和 async 两个影响加载时机的属性。defer 表示脚本延迟到文档解析后执行，async 表示下载完就执行、不保证顺序。但它们都不改变路径解析逻辑。无论怎么配属性，路径错了照样不加载。实践中常把大JS放body底并用 defer，CSS放head保证渲染前样式就位。
下面列出常见属性组合示例：
<head> <link rel="stylesheet" href="/css/base.css"> <script src="/js/config.js" defer></script> </head> <body> <script src="js/app.js" async></script> </body>
还有一点容易忽略：<base>标签可以设定页面所有相对路径的基准URL。若 head 里写了 <base href="/assets/">，那么后续 <link href="style.css"> 实际指向 /assets/style.css。这个特性在单页应用或模板拼接时很有用，但也容易让维护者困惑，建议团队明确规范后再用。
路径错误的排查思路与最佳实践
当样式没生效或JS没运行，第一步应打开浏览器开发者工具的Network面板，看对应文件是不是红色404。如果是，复制请求URL到地址栏试访问，能直接看出是路径拼错还是服务器没放文件。相对路径出错大多是因为搞错了当前HTML的目录层级，或者在本地用了根路径写法却没起服务。
一个实用办法是在项目里统一采用根路径引用，配合本地服务器（如 nginx 或简易 http 服务）开发。这样不论HTML文件深藏多少层，都能稳定引用 /css/、/js/ 下的资源。若必须提交给不会部署服务器的同事看效果，就退而用相对路径，并写清目录约束文档。
以下给出一个简单的Node静态服务启动片段，帮助本地正确解析绝对路径：
const http = require('http');
const fs = require('fs');
const path = require('path');
http.createServer((req, res) => {
let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) { res.writeHead(404); res.end('Not found'); return; }
res.writeHead(200);
res.end(data);
});
}).listen(8080);
最后提醒，Windows本地写路径时习惯用反斜杠，但HTML属性里必须换成正斜杠，例如写 css/style.css 而非 cssstyle.css。反斜杠在URL中不被识别为分隔符。保持路径风格统一、配合构建工具做引用检查，能大幅减少线上资源丢失问题。
特殊场景与常见误区补充
在模板引擎或组件化框架里，引用路径可能被预处理。比如某些框架要求用 ./ 显式声明相对，或约定 @ 指代 src 目录。这时候原生HTML规则之上多了一层编译转换，但最终吐到浏览器的依旧是标准 link/script 地址。理解底层标准，才能看透上层封装。
误区方面，有人以为把 <script> 放在 <link> 前面会阻塞样式，其实浏览器对CSS和JS的加载有复杂调度，但稳妥做法仍是CSS先引、JS后引或加 defer。还有人把本地绝对路径写成 C:ASRprojectcssstyle.css 放进 href，这在网页里绝对无效，因为浏览器不会读本地磁盘绝对路径，除非用 file:// 协议且转成正斜杠格式。
总结来看，引用文件的核心就是弄清基准目录与路径类型。写错时别急着重写标签，先确认地址解析到哪了，问题大多迎刃而解。