天气详情页应采用语义化HTML结构（如section、header、article、ol、dl）和响应式CSS（Flex/Grid），温度用span.temp包裹，指标分dl独立维护；JS需处理HTTP错误、城市不存在、字段缺失三类异常。
用纯 HTML + CSS 实现天气详情页，核心是结构语义化和响应式适配
纯静态 HTML 页面无法实时获取天气数据，所谓“天气详情页”实际是前端模板——你得先明确：这是给 API 数据填充的壳，还是仅作演示布局。真要上线，fetch 或 axios 加后端代理绕过 CORS 是必选项，直接在 HTML 里写死数据只适合学习或原型。
天气数据常见的 DOM 结构怎么组织才利于维护
别用一堆 <div class="item"> 堆砌。按信息层级用语义化标签：<section> 包裹整页，<header> 放城市和更新时间，<main> 分为当前天气（<article>）和预报列表（<ol>）。温度数字必须用 <span class="temp"> 单独包裹，方便后续 JS 注入或 CSS 动画。
常见错误：把湿度、风速等并列指标全塞进一个 <div>，结果改风向图标时连带影响了能见度样式。正确做法是每个指标独立成 <dl>，例如：
<dl class="weather-detail"> <dt>湿度</dt> <dd>65%</dd> <dt>风向</dt> <dd><span aria-label="东南风">↘</span></dd> </dl>
CSS 布局关键：用 Flex/Grid 控制卡片堆叠与断点切换
移动端优先，当前天气卡片用 flex-direction: column；桌面端改 grid-template-columns: 1fr 2fr 左图右文。预报列表在小屏用垂直 flex，大屏切 grid-template-columns: repeat(7, 1fr) 一周七天对齐。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
-
max-width设太小（如600px），导致平板横屏时留白过多 - 用
float布局预报项，结果清除浮动不彻底，父容器高度塌陷 - 图标字体（如 Weather Icons）没设
font-size和line-height，文字基线错位
加载真实天气数据时，JS 必须处理的三个异常场景
调用 OpenWeatherMap 或和风等接口后，fetch 成功不代表数据可用。以下情况必须显式判断：
-
response.status !== 200：HTTP 错误码（如 401 密钥失效、429 超频） -
data.cod === "404"：城市不存在（API 返回 JSON 但业务失败） -
!data.main?.temp：字段缺失（某些精简版 API 不返回体感温度）
别只写 then(data => render(data))，漏掉这些分支，页面空白或报 Cannot read property 'temp' of undefined 就是必然。
复杂点在于：不同服务商字段名差异大。OpenWeatherMap 用 weather[0].main 表示天气状况（"Clouds"），而和风用 now.text_day。硬编码字段名等于给自己埋雷。
