天气页面应使用语义化标签组织：用<section>包裹当前天气、小时预报、未来几天、空气质量等区块，并添加aria-label；预留data-field属性标记动态数据位置；响应式容器设min-width而非width；图标加载失败时通过内联SVG颜色或alt文字降级。
用 <div> 和语义化标签组织天气区块
天气页面不是堆 <div> 就完事，关键是要让结构能对应真实数据维度：当前天气、小时预报、未来几天、空气质量。用 <section> 包裹每块内容，比全用 <div> 更利于后续 JS 操作和屏幕阅读器识别。比如小时预报区域，别写成 <div class="hourly">，优先用 <section aria-label="未来12小时天气">——这样 JS 动态插入数据时，document.querySelector('section[aria-label="未来12小时天气"]') 更可靠，也避免 class 名冲突。
为动态渲染预留 data-* 属性占位符
如果页面要通过 API 填充数据（比如调用 OpenWeather 或和风天气接口），别在 HTML 里硬写“26°C”“多云”。在温度、天气图标、湿度等位置提前加 data-field="temperature"、data-field="weather-icon" 这类属性。JS 获取数据后，直接用 document.querySelectorAll('[data-field]') 批量更新，比靠 class 名或层级定位更稳定。注意：不要用 data-value 存原始数值（比如 data-value="26.3"），那会干扰后期单位切换（摄氏/华氏）逻辑；只用 data-field 做标记，值由 JS 注入。
响应式容器必须用 min-width 而非 width
天气卡片常需横向滚动（如小时预报条），但很多人写 width: 100vw 导致小屏上内容被截断。正确做法是给外层容器设 min-width: fit-content 或明确的最小宽度（如 min-width: 800px），再配合 overflow-x: auto。否则在 iPhone SE 这类窄屏上，width: 100% 会让 flex 子项强行换行，破坏小时预报的横向流式布局。另外，别忘了加 scroll-behavior: smooth 提升滑动体验。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
图标加载失败时 fallback 到文字+颜色
天气图标通常用 SVG 或 CDN 图片，网络波动或跨域限制可能导致 <img src="..."> 显示空白。除了加 onerror 事件回退，更稳妥的是默认用内联 SVG 占位，并用 fill 颜色表达状态：晴天用 #FFD700，雨天用 #4A90E2。这样即使图片加载失败，用户仍能通过色块快速识别天气类型。如果必须用外部图标，至少给 <img> 加 alt 属性，比如 alt="雷阵雨，22–25°C"，而不是空字符串或“天气图标”这种无效描述。
立即学习“前端免费学习笔记（深入）”；
实际搭起来不难，但容易在 data 属性设计、滚动容器尺寸、图标降级这三处反复返工。尤其是多人协作时，data-field 的命名规则和 scroll 容器的 min-width 值最好写进 README，不然下次改样式的人可能直接删掉关键属性。
