上线前必须机械式核对HTML结构：检查img的src/alt是否合法、button/a是否被pointer-events阻断、JSON-LD是否字段完整且双引号闭合、viewport是否启用及字体单位是否适配移动端。

上线前不检查，页面一发布就出问题——尤其是商品图错位、价格不显示、购买按钮失效这类低级但致命的错误。 这些问题几乎全在 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，否则高清屏可能加载模糊小图

和 @#@#@#@#@#@#@#@#@#@0 验证，重点看 @type 是否为 Product，offers 下是否含 price、priceCurrency、availability

确保 JSON 中所有字符串值都用双引号，单引号或未转义的换行会使其非法

避免在 JSON-LD 里引用前端变量（如 "price": "{{price}}"），必须服务端直出或由可靠 JS 渲染后重写

移动端 viewport 和字体单位是否真适配

很多页面在桌面看正常，一上手机就文字挤成一团、按钮小得点不中——问题常出在 被注释掉，或用了 px 写死字号/边距，而没配合 rem 或 clamp()。

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

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

下载

• 确认 里存在且未被注释：
• 检查关键元素（价格、按钮文字、规格标题）的 font-size 是否含 px，如有，需替换为 rem 或 em，并验证根字体大小是否随屏幕缩放
• 用 Chrome DevTools 切换 iPhone SE / Pixel 5 等窄屏设备，手动拖动查看横向滚动是否意外触发（说明有固定宽元素溢出）

最容易被忽略的是：所有检查必须在构建后的静态 HTML 上做，而不是本地开发服务器或未打包的源码。Webpack/Vite 构建过程可能抹掉注释、重写路径、注入环境变量，你看到的和线上跑的根本不是同一份 HTML。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！