落地页必须使用语义化html5标签组织结构，如、、、、构建内容骨架；表单需含method="post"和action属性，每项必关联，按钮须为；字段应按业务逻辑分组校验，优先采用原生input类型与属性提升体验；html层面需兼顾响应式与性能，关键文案写死在html中，第三方脚本异步加载；表单须默认可交互，错误提示精准定位，成功后用history.replacestate更新url。
落地页必须用语义化 HTML5 标签组织结构
别再用一堆 <div> 堆出整个页面。搜索引擎和屏幕阅读器依赖语义标签理解内容层级，<code><header></header>、<main></main>、<section></section>、<form></form>、<footer></footer> 这些不是装饰，是骨架。
常见错误：把预约表单塞进 <div class="container"> 里就完事；实际应包裹在 <code><section aria-labelledby="booking-title"></section> 中，并配 <h2 id="booking-title">立即预约</h2> —— 这样辅助技术才能准确定位功能区块。
-
<form></form>必须有method="POST"和明确的action（哪怕先指向#），否则提交行为不可预测 - 每个表单项（
<input>、<select></select>）必须关联<label></label>，用for属性或嵌套方式，否则移动端点击输入框可能失焦 -
<button type="submit"></button>不能写成<div onclick="submit()">，后者不支持键盘回车提交，也不被表单自动识别 <h3>表单字段要按真实业务逻辑分组与校验</h3> <p>用户不是来填问卷的，是来预约的。字段顺序、必填策略、错误提示位置，全得贴着业务走：比如“服务类型”选完才显示对应可约时段，“手机号”必须实时验证格式而非仅提交时校验。</p> <p>容易踩的坑：用 <code>required属性简单粗暴标所有字段必填，结果“备注”也被强制填写；或者把日期选择器做成<input type="text">配 JS 插件，反而破坏原生<input type="date">在 iOS/Android 上的唤起体验。- 时间选择优先用
<input type="datetime-local">，iOS 支持良好，Android 部分版本 fallback 到文本输入也没问题 - 手机号字段加
inputmode="numeric"和pattern="[0-9]{11}"，触发数字键盘并提供基础格式约束 - 服务类型用
<select></select>+<optgroup></optgroup>分组，比平铺 radio 更易扫读；选中后动态加载时段选项，而不是一次性渲染全部 200 个时间点
响应式布局别只靠 CSS 媒体查询
HTML 层面就要为不同设备留余地。比如移动端表单字段垂直堆叠是合理的，但若在 HTML 中把“姓名”和“电话”强行写在同一行
<div class="row"> 里，CSS 再怎么 media query 都难救回来。 <p>性能影响常被忽略：一张 2MB 的首屏产品图，不管你怎么压缩 CSS，页面仍会卡在资源加载阶段。HTML 里该用 <code><picture></picture>+<source></source>按视口宽度切图，而不是只放一个<img src="big.jpg">然后靠 CSS 缩放。- 关键文案（如标题、CTA 按钮文字）必须写死在 HTML 中，别依赖 JS 注入，否则首屏无内容或 SEO 抓取失败
- 第三方脚本（如统计代码、客服 widget）用
defer或动态document.createElement加载，避免阻塞<form></form>渲染 - 避免在
里塞大量内联 CSS/JS，特别是带 base64 图片的 style 标签——它拖慢 HTML 解析，且无法被 CDN 缓存
落地页加载后立刻可交互，不是等 JS 初始化完
用户点开页面，3 秒内没看到预约按钮或表单，大概率就走了。这意味着 HTML 必须自带可用状态：默认显示首屏服务项、预设合理默认值（如“今日可约”）、提交按钮初始为启用态。
很多人重构时把整个表单逻辑包进 React/Vue 组件，结果首屏白屏 1.5 秒——这不是重构，是倒退。真正的重构是让纯 HTML 表单能提交，JS 只做增强（如防重复提交、异步验证、成功跳转）。
- 表单
<button type="submit"></button>默认不 disabled；JS 加载完成后才绑定事件并置灰按钮，防止用户狂点 - 提交失败时，错误信息直接插入对应字段旁的
<span class="error"></span>，而不是弹个全局 alert —— 用户需要精准知道哪一栏错了 - 成功提交后，用
history.replaceState()替换 URL 并展示感谢文案，而不是跳转新页面，避免用户误点返回键回到空白表单
最麻烦的其实不是写对标签，而是想清楚每个 HTML 元素背后承担的职责：它是否承载信息？是否触发动作？是否需要被搜索或读屏？把这些理清了，结构自然就稳了。
- 时间选择优先用
