纯HTML天气看板应使用语义清晰的<div>和<span>结构：外层<div class="weather-card">包裹，温度用<span class="temp">，图标用<span class="icon">，各字段用<div class="weather-item">统一封装label和value；加载需try/catch+loading状态；温度单位需开尔文转摄氏；响应式用CSS Grid加clamp()字号；本地调试须避免file://协议限制。
用 <div> 和 <span> 搭出可读性高的天气结构
别一上来就套 Bootstrap 或 Tailwind，纯 HTML 的天气看板，核心是语义清晰、后期好加样式和 JS。温度、湿度、风速这些字段必须分块隔离，否则后续改 DOM 或绑定数据会反复修结构。
-
<div class="weather-card">包整个卡片，不写<section>或<article>——语义过重，且多数天气 API 返回的是扁平 JSON，没必要强套语义标签 - 当前温度用
<span class="temp">26°</span>，别用<h2>——它不是标题，只是数值；同理，天气图标用<span class="icon">☀️</span>，方便后面替换成 SVG 或字体图标 - “体感温度”“湿度”“风速”统一用
<div class="weather-item"><span class="label">湿度</span><span class="value">68%</span></div>，避免混用<p>和<span>导致行高/对齐错乱
加载外部天气数据时，fetch() 必须配 try/catch 和 loading 状态
直接写 fetch('https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=xxx') 跑不通是常态：API key 无效、城市名拼错、CORS 被拦、网络超时……没错误处理，页面就卡白屏或显示 NaN°。
- 请求前先显示
<span class="loading">加载中...</span>，隐藏真实数据区域；成功后用innerHTML替换，别用document.write()——后者会清空整个页面 -
catch里至少输出console.error(err)并在页面显示<div class="error">获取天气失败，请检查网络</div> - OpenWeatherMap 返回的温度是开尔文，记得转摄氏：
Math.round(data.main.temp - 273.15)；别漏减，否则显示298°
响应式排版关键：用 minmax(280px, 1fr) 而不是固定像素宽度
天气看板常嵌在仪表盘或手机 Home Screen 小部件里，硬写 width: 320px 在 iPad 上撑不满，在折叠屏上又太窄。CSS Grid 的弹性比媒体查询更稳。
- 容器设
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，一行能放几个就放几个，不手动算断点 - 温度数字字号用
clamp(1.5rem, 4vw, 3rem)，小屏缩、大屏放，避免 iPhone 上字溢出卡片 - 图标和文字垂直居中别依赖
line-height，改用display: flex; align-items: center;——某些字体下line-height计算不准，尤其带 emoji 图标时
本地调试时，file:// 协议下 fetch 会被浏览器直接拦截
双击 HTML 文件打开，控制台报 Failed to fetch 且没走网络请求？八成是这个原因。现代浏览器禁止 file:// 页面发 fetch，哪怕目标是公开 API。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：Chrome 启动时加参数
--disable-web-security --user-data-dir=/tmp/chrome-dev（仅开发用，不推荐长期开启） - 正经做法：用
npx serve或python3 -m http.server 8000启一个本地 HTTP 服务，地址改成http://localhost:8000/index.html - 更稳妥的替代：把测试用的 JSON 数据存成
mock-weather.json，fetch('./mock-weather.json')在file://下也能跑通，绕过跨域限制
真正上线前，记得删掉 mock 数据路径，换回真实 API；也别把 API key 写死在 HTML 里——哪怕只是 demo，也该用环境变量或后端代理兜住。
