酒店详情页需在3秒内帮用户判断能否住、值不值得订，核心是结构清晰、优先级明确、移动端可操作：用语义化HTML划分区块，暴露价格/床型/面积/早餐/取消政策5项关键因子，房型垂直堆叠，预订按钮固定底部，价格库存实时同步并结构化地址。
酒店详情页不是堆砌信息，而是帮用户在 3 秒内判断“这间房我能不能住、值不值得订”。关键不在“超详细”，而在结构清晰、优先级明确、移动端可操作。
用语义化 <section> 划分核心区块，别只靠 <div>
很多页面从头到尾全是 <div class="block">，结果 JS 想定位“设施列表”得写 document.querySelector('.block:nth-child(4) .list')——脆弱且不可维护。浏览器和读屏器也难理解内容关系。
-
<header>放酒店名称、星级、评分、地址（含itemprop="address"微数据） - 轮播图用
<section aria-label="客房实拍图">包裹，每张图加alt描述具体场景（如“豪华大床房-临窗浴缸视角”） - 房型卡片用
<article>，每个<article>对应一个可预订的房型，含独立id（如id="room-deluxe-king"）供锚点和 JS 绑定 - 设施列表用
<section aria-labelledby="amenities-title">，标题用<h3 id="amenities-title">，确保屏幕阅读器能关联
房型卡片必须暴露关键预订决策因子
用户不会读完 200 字描述才决定，而是扫视价格、床型、面积、是否含早、取消政策这 5 项。缺任何一项都可能流失订单。
- 价格必须用
<strong>或<span aria-live="polite">包裹，避免被 CSS 隐藏后影响读屏器 - 床型用图标 + 文字组合：
<span aria-label="1张2米宽特大床">?️</span> 特大床（200×200cm） - 面积单位统一为
㎡，别混用“平米”“平方米” - “含双早”这类促销信息，用
<small>紧跟价格右侧，别塞进按钮文字里（按钮只该写“立即预订”） - 取消政策用颜色+文字分级：
<span class="policy-refundable">免费取消｜入住前24小时</span>
移动端房型切换别用横向滚动容器
用 overflow-x: auto 做房型横向滑动，看似省空间，实则导致：手指稍偏就触发页面整体滚动、无法用键盘 Tab 导航、iOS Safari 有时卡死。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 改用垂直堆叠 + 折叠面板：
<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 聚焦。
