运行HTML时出现404错误，本质是服务器无法找到你请求的页面或资源，这种情况在本地调试和线上部署时都可能出现，需要从多个维度排查问题。
404错误的常见触发原因
文件路径引用错误
这是最常见的原因，当HTML中引用的本地资源路径和实际文件存放位置不匹配时，就会触发404。比如你有一个index.html文件，同目录下有个css文件夹，里面放了style.css，如果写成<link rel="stylesheet" href="css/style.css">是正确的，但如果写成<link rel="stylesheet" href="/css/style.css">，在本地直接打开HTML时就会找不到文件，因为开头的/代表根目录，本地直接打开时根目录是文件所在磁盘，而不是当前HTML所在文件夹。
服务器配置问题
如果是通过本地服务器（比如Apache、Nginx、VSCode的Live Server插件）运行HTML，可能是服务器的根目录配置和实际项目目录不一致。比如你把项目放在D:/project/web，但服务器根目录配置成了D:/project，那么你访问http://127.0.0.1:5500/index.html就会404，因为服务器会去D:/project下找index.html，而文件实际在web子目录里。
文件名或后缀错误
很多时候是粗心导致的问题，比如文件名是Index.html（首字母大写），但引用时写成了index.html，在Linux系统或者区分大小写的服务器环境下就会找不到文件。还有可能文件后缀写错，比如实际是.htm后缀，却当成.html来访问。
对应的解决方法
修正资源引用路径
首先检查HTML中所有引用的本地资源路径，遵循以下规则：
- 如果是同目录下的文件，直接写文件名，比如
<img src="logo.png"> - 如果是子目录下的文件，写
子目录名/文件名，比如<script src="js/main.js"> - 如果是上级目录的文件，写
../文件名，比如<link rel="stylesheet" href="../css/global.css"> - 本地直接打开HTML时，不要使用以
/开头的绝对路径，除非你明确知道根目录的指向
可以通过浏览器开发者工具的Network面板查看具体哪个资源404，面板里会显示请求的完整路径，对比实际文件位置就能快速找到路径问题。
调整服务器配置
如果是用本地服务器运行，先确认服务器的根目录是否指向你的项目文件夹。以VSCode的Live Server为例，右键点击你的HTML文件，选择Open with Live Server，它会自动把当前文件所在目录作为根目录。如果是手动配置的Nginx，需要检查nginx.conf里的root配置：
server {
listen 80;
server_name localhost;
# 这里要改成你的项目实际存放目录
root D:/project/web;
index index.html index.htm;
# 如果访问的路径是目录，自动寻找index.html
location / {
try_files $uri $uri/ /index.html;
}
}
检查文件名和后缀
仔细核对所有引用文件的名称、后缀、大小写是否和实际文件完全一致，尤其是从其他地方复制文件到项目里时，很容易出现后缀隐藏的问题，比如Windows默认隐藏已知文件后缀，你可能保存的是index.html.txt，但显示为index.html，这种时候需要打开文件属性确认实际后缀。
特殊场景的404处理
单页应用路由404
如果是Vue、React等单页应用，刷新页面时出现404，是因为这些框架的路由是前端路由，服务器没有对应的页面文件，需要在服务器配置里添加兜底规则，所有不存在的路径都返回index.html，让前端路由来处理。比如Nginx的兜底配置就是上面示例里的try_files $uri $uri/ /index.html;。
线上部署404
如果是部署到线上后出现404，先检查文件是否已经正确上传到服务器的对应目录，再检查服务器的访问权限，确认文件是否有可读权限，同时检查域名的解析是否正确，有没有指向错误的服务器地址。
按照上面的步骤排查，绝大多数运行HTML时的404错误都可以快速解决，核心就是先通过浏览器开发者工具确认404的具体资源，再对应调整路径、配置或者文件名即可。