酒店搜索表单需设input width:100%、父容器用flex/grid布局，禁用select默认样式，日期用text+inputmode替代原生date，列表用语义化ul并重置样式，图片URL需补全base href，筛选渲染用DocumentFragment避免重排。
酒店搜索表单怎么写才不被移动端截断
移动端浏览器常把 <input type="date"> 或 <select> 拉伸到全宽，导致布局错乱或触发缩放。关键不是加 viewport 宽度控制，而是约束表单控件本身：
-
<input>必须设width: 100%且父容器用flex或grid布局，避免默认min-width撑开 -
<select>在 iOS Safari 中默认有内边距和圆角，加appearance: none+ 手动重置padding和border-radius - 日期选择推荐用
<input type="text" inputmode="numeric" pattern="\d{4}-\d{2}-\d{2}">配合 JS 初始化日历，避开原生date在安卓低版本的兼容问题
搜索结果列表用 <ul> 还是 <div>？
语义上酒店列表是“一组可并列浏览的条目”，<ul> 更合适，但实际开发中多数人用 <div> 是因为怕默认样式干扰。真要兼顾语义和可控性，推荐：
- 用
<ul class="hotel-list">，然后立刻重置list-style: none和padding-left: 0 - 每项用
<li class="hotel-item">，内部结构统一：标题（<h3>）、评分（<span class="rating">）、价格（<strong class="price">）、按钮（<button type="button">） - 禁用
<ol>—— 排序逻辑在 JS 或后端完成，HTML 不承担序号语义
为什么 fetch() 返回的酒店数据渲染后图片全空白？
常见原因是 API 返回的图片 URL 是相对路径（如 "images/hotel-123.jpg"），而前端没补全 base URL。不要在 JS 里拼字符串，改用：
- 后端响应头带
Link: <https://cdn.example.com/>; rel="base"，前端读取后统一前缀 - 或在 HTML
<head>中声明：<base href="https://cdn.example.com/">，之后所有相对 URL 自动解析 - 检查返回 JSON 中字段名是否为
image_url而非img或photo，大小写/下划线不一致会导致data.image_url为undefined
点击“筛选”按钮后页面卡顿，怎么快速定位瓶颈？
不是 JS 写得慢，大概率是 DOM 重排（reflow）被反复触发。典型错误是循环中逐个 element.innerHTML += ... 或频繁读写 offsetHeight。
立即学习“前端免费学习笔记（深入）”；
- 渲染列表前先用
document.createDocumentFragment()组装所有<li>，最后一次性appendChild() - 避免在 for 循环里调用
getBoundingClientRect()，改用 CSStransform: scale()控制展开动画，不触发 layout - 筛选条件变化时，别删光再重建整个
<ul>，用classList.toggle("filtered")配合 CSSdisplay: none控制可见性，更轻量
最易被忽略的是：搜索框的 autocomplete="off" 在 Chrome 110+ 已基本失效，必须配合 name="hotel-search-17892" 这类无意义唯一值才能绕过自动填充劫持 —— 否则用户刚输完城市名，表单就被浏览器塞进一串乱码地址。
