必须用
包裹核心内容且 含“404”文字，
须为“404 Not Found”，跳转用而非<button>，禁用内联样式https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712脚本，本地测试需HTTP服务而非file:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712协议。<https:><https:><p><img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712001https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712589https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712237https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712178745603855789.png" alt="结构搭建用HTML搭建经典404未找到页面"><https:><h3>HTML结构必须用<main>和<h1>包裹核心内容<https:><p>很多404页面看着像，但搜索引擎和屏幕阅读器根本认不出它是错误页——因为没用语义化标签。<code><main><https:>是必需容器，<code><h1><https:>里必须含“404”或“Not Found”文字，不能是图片、SVG文本，也不能藏在<code><div><https:>里。<https:><p>常见错误：用一堆<code><div class="title"><https:>模拟标题，或把<code><h1><https:>写成“哎呀，出错了！”——这会让爬虫误判为普通页面，甚至被当成首页收录。<https:><ul><li><code><h1><https:>必须放在<code><main><https:>内部，且唯一<https:><li>不要在<code><https:>里塞<code><title><https:>为“欢迎来到我的网站”，应为<code><title>404 Not Found<https:><https:><https:><li>避免用<code><section><https:>或<code><article><https:>替代<code><main><https:>——前者是内容分组，后者才是主内容区语义标识<https:><https:><h3>按钮必须用<a>而非<button>实现跳转<https:><p>纯导航跳转就该用<code><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"><https:>，不是<code><button onclick="location.href='https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712'"><https:>。后者依赖JS，禁用JS时失效；前者语义清晰、无需脚本、支持右键新标签打开、对爬虫友好。<https:><p>如果你真需要JS逻辑（比如记录点击、带来源参数），那才用<code><button><https:>，但必须同时提供<code><a><https:>作为降级方案。<https:><ul><li>首页跳转写成<code><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">返回首页<https:><https:>，路径必须是绝对路径（以<code>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712<https:>开头）<https:><li>“上一页”按钮需判断<code>document.referrer<https:>是否同域，否则不显示，避免跳到外站<https:><li>所有链接禁止用<code>target="_blank"<https:>——用户此刻需要的是可控、可回退的路径，不是新开窗口<https:><https:><h3>别在HTML里写内联样式或JS<https:><p>把CSS塞进<code><style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>里可以，但别写<code> style="max-width:90%"<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>这种内联样式；JS也一样，<code><script><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>可以放底部，但别写<code>onclick="..."<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>或<code>onload="..."<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>这类行内事件。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> <p>原因很简单：内联样式https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712脚本无法复用、难维护、易污染全局作用域，更重要的是——它们会让页面在无CSShttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712无JS环境下彻底崩坏。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> <ul> <li>CSS统一放<code><style><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>块或外链<code>styles.css<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>，确保最小可用样式（如文字大小、居中）始终生效<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <li>JS逻辑尽量延迟加载，且所有交互必须有非JS备选（比如<code><a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>已存在，JS只是增强）<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <li>禁止在<code><head><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>里写<code><script><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>同步阻塞渲染，尤其别放统计代码——404页不该拖慢用户离开速度<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul> <H3>本地测试必须起HTTP服务，不能双击打开<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712H3> <p>双击<code>404.<a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html</style></code></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></https:> </h3></https:></https:></https:></code> </li></https:></https:></code> </li></https:></https:></code></https:></https:></a><https:>用<code>file:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712<https:>协议打开，浏览器根本没有HTTP状态码概念，你永远看不到真实404响应头，也测不出服务器是否真返回了<code>404 Not Found<https:>状态。<https:><p>真正有效的测试方式只有一种：启动一个本地HTTP服务，访问<code>http:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712localhost:xxxxhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712xxx<https:>这个不存在的路径。<https:><ul><li>推荐命令：<code>npx serve<https:>（轻量）、<code>python3 -m http.server<https:>（系统自带）、或VS Code Live Server插件<https:><li>用浏览器开发者工具的Network面板，刷新后看第一个请求的Status是否为<code>404<https:>，Response Headers里是否有<code>Status: 404 Not Found<https:><https:><li>GitHub Pages等托管平台要求<code>404.html<https:>必须在仓库根目录，且Jekyll用户要加<code>permalink: https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712404.html<https:>和<code>published: false<https:>防止渲染<https:><https:> 实际部署时，最容易被忽略的不是视觉效果，而是服务器配置是否真的让<code>404.html<https:>在404状态下返回——而不是用重定向、meta刷新或JS跳转把它变成200页面。</https:></code></https:></https:></https:></code></https:></code></https:></code> </li></https:></https:></code></https:></code> </li></https:></https:></code></https:></code> </li></ul></https:></https:></code></p></https:></https:></code></https:></code></https:></code> </li></ul></https:></https:></a></code></https:></button></code></p></https:></https:></button></code></https:></a></code></p></https:></button></a> </h3></https:></https:></https:></main></code></https:></article></code></https:></section></code> </li></https:></https:></https:>
结构搭建用HTML搭建经典404未找到页面
云墨吖_4344
2026-08-23
616人浏览
原创
