要让服务器真正返回404状态码，核心是配置服务器将不存在路径的响应设为status: 404 not found并指向自定义404.html；apache用errordocument 404 /404.html，nginx需error_page 404 /404.html加对应location，vercel/netlify默认识别小写404.html，github pages要求根目录该文件且jekyll需设permalink和published:false。
直接放 404.html 到网站根目录没用——服务器不配置，用户看到的还是默认错误页，状态码大概率是 200 OK，搜索引擎会当普通页面收录。
怎么让服务器真返回 404 状态码
核心不是写 HTML，而是让服务器在请求不存在路径时，返回你的 404.html 并附带 Status: 404 Not Found 响应头。
- Apache：在
.htaccess里加ErrorDocument 404 /404.html（注意路径以/开头，不能写成./404.html或404.html） - Nginx：在
server块里加error_page 404 /404.html;，并确保有对应location = /404.html且不触发重写 - Vercel / Netlify：默认识别根目录的
404.html，但文件名必须全小写、无空格、无额外扩展名（比如不能叫404.htm或404.html.bak） - GitHub Pages：只认根目录
404.html；若用 Jekyll，需在文件开头加permalink: /404.html和published: false防止被渲染
HTML 文件里最容易错的三件事
很多“看着像 404”的页面其实破坏 SEO 和可访问性，因为它们悄悄改了状态或行为逻辑。
- 别用
<meta http-equiv="refresh" content="0;url=/">—— 这会让响应变成200，Google 会认为原链接内容已迁移到首页 - 别在 JS 里写
window.location.href = '/'且没用户交互 —— 爬虫和禁用 JS 的用户收不到真实错误信号 -
<title></title>和<h1></h1>必须含 “404” 字样（如<title>404 - 页面未找到</title>），否则屏幕阅读器和搜索引擎无法识别这是错误页
本地测试时为什么双击打开总显示不对
双击 404.html 是走 file:// 协议，根本没 HTTP 状态码概念，浏览器只会渲染 HTML，完全无法验证是否真返回 404。
- 正确做法：用本地 HTTP 服务启动，例如
npx serve或python3 -m http.server 8000 - 然后访问
http://localhost:8000/nonexistent-path，再开开发者工具 → Network → 看响应头里是否有Status: 404 Not Found - 命令行快速验证：
curl -I http://localhost:8000/nonexistent-path，第一行必须是HTTP/1.1 404 Not Found
页面结构和跳转按钮怎么写才可靠
用户在 404 页面平均停留不到 8 秒，任何依赖 JS、自动跳转或复杂判断都会赶人走。
-
<main></main>包裹核心内容，<h1>404 Not Found</h1>放最前面，不用图片或 SVG 替代文字 - 返回首页用
@#@#@#@#@#@#@#@#@#@0，不是<button onclick="..."></button>—— 禁用 JS 时仍可用 - 想加“回到上一页”？先用 JS 判断
document.referrer是否同域且非空，否则按钮href="#"并置灰 - CSS 最好内联进
<style></style>，控制在 1KB 内；文字与背景对比度 ≥ 4.5:1（比如#333配#fff可以，配#eee不行）
真正卡住人的从来不是写几行 HTML，而是服务器配置是否生效、状态码是否真实、资源路径是否有效——这三个点漏一个，整个 404 页就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
