404.html 必须严格位于根目录且小写，服务器需返回真实 HTTP 404 状态码，HTML 中 h1 标签须含“404”文字、语义完整，并避免 SPA fallback 吞掉错误响应。

html搭建404页面的搭建技巧汇总

404.html 文件名和位置必须严格匹配平台要求

GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些静态托管服务，只识别根目录下名为 404.html 的文件——多一个空格、大写一个字母（如 404.HTML）、加个路径前缀（如 pages/404.html）或换后缀（如 404.htm），都会导致它被完全忽略，返回平台默认的错误页。

常见错误现象：本地预览正常，部署后仍看到 GitHub 的 “404 There isn’t a GitHub Pages site here.”

用 git ls-files | grep 404 确认 Git 仓库里提交的确实是小写 404.html（Windows 记事本可能偷偷加 BOM）
Jekyll 用户必须在文件开头加 YAML front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当作普通页面渲染
检查构建产物目录（如 _site/ 或 dist/），确认 404.html 真实存在于最终输出的根目录中

服务器必须返回真实 HTTP 404 状态码

光有 404.html 文件毫无作用。关键在于：当用户访问一个不存在路径时，服务器要返回 HTTP/1.1 404 Not Found 响应头，且响应体是你写的 HTML；不能是 302 重定向过去，更不能悄悄变成 200 OK。

常见错误现象：浏览器控制台显示 Failed to load resource: the server responded with a status of 200 OK，但 URL 是 /xxx/xxx；Google Search Console 把你的 404.html 当普通页面收录。

Apache：在 .htaccess 中写 ErrorDocument 404 /404.html，路径必须以 / 开头
Nginx：在 server 块中加 error_page 404 /404.html;，并确保 location = /404.html 存在且未被其他 rewrite 规则覆盖
SPA 应用（React/Vue）：location / { try_files $uri $uri/ /index.html; } 这类 fallback 会吞掉所有 404，必须显式排除：try_files $uri $uri/ /index.html =404; 或加条件判断避开 /404.html

必须包含可见“404”文字且语义完整

搜索引擎和屏幕阅读器靠结构识别意图。

`404 Not Found`

不只是样式需要，而是 SEO 和可访问性的硬性要求。用图片、SVG 文本或 JS 动态插入“404”字样的方式，都不可靠。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

常见错误现象：页面看着像 404，但 Google 把它当普通页面索引；视障用户听到的是“网页标题”，而非“404 页面未找到”。

标题标签必须是，且内容明确含“404”三字符（如 404 或 404 Page Not Found）
整个错误内容应包裹在内，避免用 堆砌
页面也应含“404”，例如 404 - 页面未找到


跳转逻辑需兼顾动画同步与 SEO 合规
自动跳转首页容易被 Google 判为“软 404”。若要做“趣味跳入”效果，必须满足两个底线：用户能看清这是 404，且有手动操作入口。
常见错误现象：加了动画后用户还没看清就跳走了；JS 跳转代码被 Service Worker 缓存拦截失效。

动画时长与跳转延时必须严格一致，例如 CSS 动画设 0.6s，JS 就用 setTimeout(() => { location.replace('/'); }, 600)

跳转必须用 location.replace('/') 而非 location.href = '/'，防止用户点「返回」又回到错误页
跳转逻辑应放在 DOMContentLoaded 事件内，或直接写在