图片加载失败时应为<img>显式设置width和height属性，浏览器据此预留空间防止布局塌陷；禁用loading="lazy"于首屏图，alt仅作语义补充不参与布局。
图片加载失败时怎么避免页面塌陷
纯 HTML 页面没有 JS 控制逻辑，<img> 加载失败会留白或显示破损图标，容易让布局错乱。关键不是“修图”，而是提前兜底。
- 给
<img>加width和height属性（推荐使用具体像素值，比如width="375" height="500"），浏览器能预留空间，防止重排 - 用
loading="lazy"仅对非首屏图启用，首屏大图务必去掉该属性，否则可能触发 Safari 的懒加载 bug 导致不显示 - 别依赖
alt文字撑开高度——它不会影响布局盒模型，仅作语义和可访问性补充
商品标题和价格怎么保持语义正确又利于 SEO
不用 <div> 套 <span> 拼样式，HTML 本身就有结构化标签可用。
- 主标题必须用
<h1>，且一页只出现一次；副标题（如“旗舰款｜2024 新品”）用<h2> - 价格数字建议包裹在
<span>里并加itemprop="price"（如果后续想支持 Google 结构化数据），例如：<span itemprop="price">¥299.00</span> - 避免把价格写成图片——既不利于复制、无障碍访问，也增加 HTTP 请求
规格选择器能不能不用 JS 实现基础交互
可以，但仅限单选且无需实时更新价格/库存的场景，靠 <input type="radio"> + <label> 配合 CSS :checked 实现视觉反馈。
- 每个规格项用
<input type="radio" name="size" id="size-m">+<label for="size-m">M</label>结构，保证点击文字也能选中 - 用
label[for]关联后，CSS 可写input[type="radio"]:checked + label { background: #007bff; }实现高亮（注意：+ 是相邻兄弟选择器，顺序不能错） - 禁用 JS 后无法联动更新价格或禁用无效选项（比如“M 码缺货”），这类逻辑必须后端渲染或接受静态展示
移动端适配最简可行方案是什么
不用框架、不写媒体查询也能跑得过去，核心就一条 meta 标签 + 弹性容器。
立即学习“前端免费学习笔记（深入）”；
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认按 980px 渲染 - 图片和文字容器用
max-width: 100%+height: auto，防止宽图撑破视口（写在<style>块里即可） - 避免固定像素的
font-size，改用rem或直接写font-size: 16px—— 移动端默认根字号就是 16px，够用且无缩放兼容问题
纯 HTML 页面的边界很清晰：它适合内容稳定、交互极简、交付快的详情页。一旦需要实时库存校验、加入购物车跳转或用户登录态判断，就得引入 JS 或服务端模板了。
