酒店详情页需在3秒内帮用户判断能否住、值不值得订，核心是结构清晰、优先级明确、移动端可操作：用语义化html划分区块，暴露价格/床型/面积/早餐/取消政策5项关键因子，房型垂直堆叠，预订按钮固定底部，价格库存实时同步并结构化地址。
酒店详情页不是堆砌信息，而是帮用户在 3 秒内判断“这间房我能不能住、值不值得订”。关键不在“超详细”，而在结构清晰、优先级明确、移动端可操作。
用语义化 <section></section> 划分核心区块，别只靠 <div>
<p>很多页面从头到尾全是 <code><div class="block">，结果 JS 想定位“设施列表”得写 <code>document.querySelector('.block:nth-child(4) .list')——脆弱且不可维护。浏览器和读屏器也难理解内容关系。
-
<header></header> 放酒店名称、星级、评分、地址（含 itemprop="address" 微数据）
- 轮播图用
<section aria-label="客房实拍图"></section> 包裹，每张图加 alt 描述具体场景（如“豪华大床房-临窗浴缸视角”）
- 房型卡片用
<article></article>，每个 <article></article> 对应一个可预订的房型，含独立 id（如 id="room-deluxe-king"）供锚点和 JS 绑定
- 设施列表用
<section aria-labelledby="amenities-title"></section>，标题用 <h3 id="amenities-title"></h3>，确保屏幕阅读器能关联
房型卡片必须暴露关键预订决策因子
<header></header> 放酒店名称、星级、评分、地址（含 itemprop="address" 微数据）<section aria-label="客房实拍图"></section> 包裹，每张图加 alt 描述具体场景（如“豪华大床房-临窗浴缸视角”）<article></article>，每个 <article></article> 对应一个可预订的房型，含独立 id（如 id="room-deluxe-king"）供锚点和 JS 绑定<section aria-labelledby="amenities-title"></section>，标题用 <h3 id="amenities-title"></h3>，确保屏幕阅读器能关联用户不会读完 200 字描述才决定，而是扫视价格、床型、面积、是否含早、取消政策这 5 项。缺任何一项都可能流失订单。
- 价格必须用
<strong></strong>或<span aria-live="polite"></span>包裹，避免被 CSS 隐藏后影响读屏器 - 床型用图标 + 文字组合：
<span aria-label="1张2米宽特大床">?️</span> 特大床（200×200cm） - 面积单位统一为
㎡，别混用“平米”“平方米” - “含双早”这类促销信息，用
<small></small>紧跟价格右侧，别塞进按钮文字里（按钮只该写“立即预订”） - 取消政策用颜色+文字分级：
<span class="policy-refundable">免费取消｜入住前24小时</span>
移动端房型切换别用横向滚动容器
用 overflow-x: auto 做房型横向滑动，看似省空间，实则导致：手指稍偏就触发页面整体滚动、无法用键盘 Tab 导航、iOS Safari 有时卡死。
- 改用垂直堆叠 + 折叠面板：
<details><summary>豪华大床房</summary>...</details>，原生支持键盘、无障碍、无 JS 也能用 - 如果坚持展示全部房型，用
display: grid+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，在小屏自动换行 - 禁止给房型卡片设固定高度——不同设备下图片比例不同，强行固定会裁切关键信息（比如把“浴缸”切掉）
- “立即预订”按钮必须始终在视口底部固定位置（
position: sticky; bottom: 0;），别让用户反复滚动找按钮
价格与库存状态必须实时同步，不能靠前端轮询硬刷
用户点“选日期”弹出日历后，再点房型卡片，看到的价格却是昨天缓存的——这种错位直接导致客诉。真实库存变化快，前端静态渲染扛不住。
- 房型卡片初始只渲染骨架（
<div class="skeleton-price"></div>），点击展开或进入视口后再发请求 - 价格字段必须带
data-timestamp和data-inventory-id，例如：<span data-timestamp="1718234567" data-inventory-id="inv-8823">¥688</span> - 后端 API 必须返回
last_updated时间戳，前端比对后决定是否刷新——避免“用户刚点开就刷新”造成误操作 - 库存为 0 时，按钮禁用并显示
<span aria-live="assertive">已售罄</span>，确保读屏器强制播报
最常被忽略的其实是「地址的结构化输出」：别只写“上海市静安区南京西路1266号”，而要拆成 <span itemprop="addressLocality">静安区</span><span itemprop="streetAddress">南京西路1266号</span>——这直接影响地图服务抓取和 SEO 聚焦。
