语义化标签构建详情页骨架：用<header><main><section><aside>替代<div>堆砌，参数用<dl>+CSS Grid实现响应式键值对布局，段落控制长度与间距提升可读性，按内容密度而非单纯宽度设置响应式断点，并为图片预留宽高防页面跳动。
用语义化标签搭骨架，别再套 <div> 堆砌
详情页不是“能显示就行”，结构混乱会让后续加搜索、SEO、无障碍支持全卡住。必须用 <header> 包标题区，<main> 套核心信息流，<section> 拆参数/详情/评价等模块，<aside> 放关联推荐或操作栏。浏览器和屏幕阅读器靠这些标签理解内容层级，<div> 套十层不如一个 <section> 清晰。
常见错误是把所有内容塞进一个大 <div class="content">，结果连“这是商品参数表”还是“这是售后说明”都分不清。更麻烦的是，后期想用 JS 动态折叠某一块时，得靠 class 名硬匹配，一改名就断。
参数表格别用 <table> 硬撑，改用 <dl> + CSS Grid
<table> 适合展示行列对齐的纯数据（比如订单列表），但商品参数本质是“键值对”，用 <dl>（definition list）更语义准确：<dt> 是属性名（如“库存状态”），<dd> 是值（如“仅剩3件”）。再配 display: grid 控制两列对齐，既保持结构干净，又避免 <table> 在小屏上横向溢出。
- 移动端可设
grid-template-columns: 1fr变单列，<dt>和<dd>垂直堆叠 - PC端用
grid-template-columns: 120px 1fr固定属性名列宽，防文字过长挤变形 - 关键值（如价格、库存）直接加
class="highlight"，CSS 里统一设颜色/背景，别每个都写style="color:red"
详情描述段落要“可呼吸”，别堆成一大坨文字
用户扫读详情页平均停留不到 15 秒，大段无分隔文字等于劝退。每段控制在 3–4 行内，段间距设为字体大小的 1.5 倍（如 font-size: 16px 就用 margin-bottom: 24px）。重点句开头加 <strong>，但别整段加粗——加粗失去强调意义。
立即学习“前端免费学习笔记（深入）”；
自动换行要防“单词中间断”：给容器加 word-break: keep-all（中文友好）+ overflow-wrap: break-word（英文长词兜底）。电商标题超长时，用 text-overflow: ellipsis 配合 white-space: nowrap 和固定高度，比 JS 截断更稳。
响应式不是“加个媒体查询”就完事，得按内容密度切
别只按屏幕宽度设断点。详情页真正要切的是“内容密度”：手机屏宽虽小，但用户愿意滑动；而平板横屏时，图片+参数+详情三块并排会严重稀释信息密度，反而体验差。我们实际用的断点是：
-
max-width: 480px：标题单行、图片占满、参数竖排、按钮固定底部 -
481px – 768px：标题允许两行、参数两列、详情段落加左右边距 -
min-width: 769px：恢复三栏（图左 / 信息中 / 推荐右），但推荐栏默认隐藏，靠按钮呼出
最易忽略的是图片加载占位——没设 aspect-ratio 或 height 的图片加载时页面会跳动，用户正在看参数，图片一进来就把“库存状态”顶出可视区。务必给 <img> 加 width 和 height 属性，或用 aspect-ratio: 4/3 预留空间。
