上线前必须机械式核对HTML结构：检查img的src/alt是否合法、button/a是否被pointer-events阻断、JSON-LD是否字段完整且双引号闭合、viewport是否启用及字体单位是否适配移动端。
上线前不检查，页面一发布就出问题——尤其是商品图错位、价格不显示、购买按钮失效这类低级但致命的错误。 这些问题几乎全在 HTML 结构和基础交互层面，跟后端无关，靠人工肉眼扫很容易漏，必须按点机械式核对。
图片 <img alt="HTML商品详情页上线前检查清单" > 标签是否带 src 和 alt
常见错误是占位图没替换成真实商品图，或 src 值为空、拼写错误（比如写成 scr），导致控制台报 Failed to load resource；alt 缺失则影响可访问性，部分 SEO 工具会直接扣分。
-
src必须是相对路径（如./images/shoe-01.jpg）或绝对 URL（含https://），不能是变量名或未渲染的模板语法（如{{product.image}}） -
alt不能留空或填“图片”，应描述图中主体，例如alt="Nike Air Zoom Pegasus 40 跑鞋 黑白配色 正面图" - 响应式场景下，检查是否误删了
srcset或sizes，否则高清屏可能加载模糊小图
<button></button> 和 <a></a> 的点击行为是否被意外阻断
商品页最常出问题的是“立即购买”按钮点不动，表面看是 JS 绑定失败，其实往往是 HTML 层级干扰：按钮被透明遮罩盖住、父容器设了 pointer-events: none、或者 <button></button> 写在 <form></form> 外却用了 type="submit" 导致提交失败后页面刷新。
- 用浏览器开发者工具选中按钮，看
Computed面板里pointer-events是否为auto - 检查按钮是否有
disabled属性残留（尤其测试环境改完没清理） -
<a href="#"></a>类链接必须加event.preventDefault()或改用href="javascript:void(0)"，否则点击会跳到页面顶部
结构化数据 <script type="application/ld+json"></script> 是否合法且字段完整
Google 商品富媒体搜索依赖这段 JSON-LD，格式错一个逗号、少一个 priceCurrency 字段，就会导致价格不展示，甚至整段被忽略。它不报错，只静默失效。
立即学习“前端免费学习笔记（深入）”；
- 把内容粘贴进 Google Markup Helper 验证，重点看
@type是否为Product，offers下是否含price、priceCurrency、availability - 确保 JSON 中所有字符串值都用双引号，单引号或未转义的换行会使其非法
- 避免在 JSON-LD 里引用前端变量（如
"price": "{{price}}"），必须服务端直出或由可靠 JS 渲染后重写
移动端 viewport 和字体单位是否真适配
很多页面在桌面看正常，一上手机就文字挤成一团、按钮小得点不中——问题常出在 <meta name="viewport"> 被注释掉，或用了 px 写死字号/边距，而没配合 rem 或 clamp()。
- 确认
里存在且未被注释：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 检查关键元素（价格、按钮文字、规格标题）的
font-size是否含px，如有，需替换为rem或em，并验证根字体大小是否随屏幕缩放 - 用 Chrome DevTools 切换 iPhone SE / Pixel 5 等窄屏设备，手动拖动查看横向滚动是否意外触发（说明有固定宽元素溢出）
最容易被忽略的是：所有检查必须在构建后的静态 HTML 上做，而不是本地开发服务器或未打包的源码。Webpack/Vite 构建过程可能抹掉注释、重写路径、注入环境变量，你看到的和线上跑的根本不是同一份 HTML。
