语义化html结构需用包裹主体，分块并配或aria-labelledby，仅用于真实地址，数值字段用，地图容器加role="application"和tabindex="0"，周边配套按空间关系组织，图片用+srcset+webp，表单必须用原生并关联。
怎么用语义化 HTML 结构表达小区核心信息
小区详情页不是堆砌 div 的地方，浏览器和屏幕阅读器靠标签含义理解内容。用错标签，SEO 掉权、无障碍失效、后续加微数据（如 schema.org/Residence）都难对齐。
关键结构必须包含：<main></main> 包裹主体，<section></section> 拆分「基础信息」「周边配套」「楼栋规划」「用户评价」等逻辑块，每个 <section></section> 加 aria-labelledby 或 <h2></h2> 明确主题。避免全用 <div class="section">——CSS 可以复用，但语义不能丢。
<ul>
<li>
<code>@#@#@#@#@#@#@#@#@#@0），否则易被判定为虚假信息
为什么用 picture + srcset 加载小区实拍图比单纯 img 更关键
小区详情页平均有 12–20 张实拍图（外立面、单元门、儿童区、车库入口等），一张原图常超 2MB。不用响应式图片方案，移动端加载慢、流量超标、跳出率飙升。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须用 <picture></picture> 配合 <source></source> 的 media 和 srcset 属性，按视口宽度提供不同尺寸 WebP 图片；主 <img> 标签只作兜底，且必须含 loading="lazy" 和 decoding="async"。
- 别把「户型图」和「实景图」混在同一个
<picture></picture>里——它们的宽高比、压缩策略、alt 文本完全不同 - 每张图的
alt必须描述画面内容，例如alt="阳光花园小区 3 号楼南侧儿童游乐区，含滑梯与沙坑，地面为 EPDM 彩色橡胶"，而非「小区儿童区」 - WebP 格式兼容性检查：iOS 14+、Android Chrome 90+ 均支持，但若需兼容微信内置浏览器（仍大量使用 X5 内核），得在
<source></source>后追加<source type="image/jpeg" srcset="..."></source>
表单类交互（如「预约看房」「获取资料」）的 DOM 结构陷阱
很多团队把预约表单整个塞进一个 <div>，再用 JS 绑定提交，结果导致：屏幕阅读器读不出表单目的、回车无法提交、禁用 JS 后功能完全消失。
<p>必须用原生 <code><form></form>，每个字段用 <label for="phone"></label> 显式关联，必填项加 required，手机号字段用 inputmode="tel" 触发数字键盘，提交按钮用 <button type="submit"></button> 而非 <div onclick>。
<ul>
<li>「获取资料」按钮如果只是弹窗下载 PDF，不要套 <code><form></form>——改用 <a href="/brochure.pdf" download="阳光花园资料.pdf"></a>，更轻量也更可靠
<input type="hidden" name="timestamp" value="1717023456"> + 后端校验 5 分钟有效期，比 JS 生成的混淆字段更防绕过aria-live="polite" 的区域播报「您的预约已收到，置业顾问将在 30 分钟内致电」，确保残障用户感知到状态变化周边配套的坐标精度、实拍图的版权归属、表单提交后的服务承诺时效——这些都不是前端能决定的，但 HTML 结构一旦写死，后面补救成本极高。别让「先快速上线」变成「永远没法合规」。
