直接用原生 html+css+js 可搭建实时天气面板，关键在于健壮的 fetch 调用（需拼对 url、加 units=metric 和 lang=zh_cn）、防抖防重复请求、精准 dom 更新（只改字段而非 innerhtml）、正确处理图标、abortcontroller 中断旧请求、localstorage 安全存取（try/catch + 去重 + 仅存城市名）及完善的网络异常提示。
直接用原生 HTML + CSS + JS 就能搭出可用的实时天气面板，不需要框架、不依赖构建工具，关键在于 fetch 调用 OpenWeatherMap API 的写法是否健壮，以及 DOM 更新逻辑是否防抖、防重复请求。
如何正确拼接 OpenWeatherMap 的请求 URL
API 返回默认是 Kelvin 温度、英文描述、无单位符号，容易忽略参数导致显示异常。必须显式加 units=metric 和 lang=zh_cn，否则中文用户看到 “Clear sky” 或 “298.15K” 就得手动换算。
-
https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_KEY&units=metric&lang=zh_cn是最小可用格式 - 城市名带空格（如 “New York”）要
encodeURIComponent处理，否则 404 - 免费版 API 有每分钟 1000 次调用限制，但单页面反复点“刷新”极易触发限流，需加节流逻辑
DOM 更新时为什么总丢数据或闪动
常见错误是每次请求都全量重写 innerHTML，尤其在 #weatherInfo 这类容器里混写 HTML 结构和文本内容，容易破坏事件监听器或触发重排。更稳妥的做法是只更新具体字段节点。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
document.getElementById('temperature').textContent = Math.round(data.main.temp) + '°C'替代整块替换 - 天气图标用
img.src动态赋值，不要靠 class 切换——OpenWeatherMap 提供 icon code（如04d），拼成https://openweathermap.org/img/wn/${icon}@2x.png - 如果用户快速连点搜索，
fetch可能并发返回，后发先至覆盖前一次结果，建议用AbortController中断旧请求
localStorage 存历史城市时容易踩哪些坑
存数组没问题，但直接 JSON.stringify 后塞进去，再 JSON.parse 读出来，若解析失败（比如手动改过 localStorage 内容），整个逻辑就崩了，且没 fallback。
- 写入前用
try/catch包裹JSON.stringify，失败则跳过保存 - 读取时同样 try/catch，失败就返回空数组
[]，而不是让renderHistory()报错中断 - 避免存重复城市：用
Array.from(new Set([...old, city]))去重，但注意 IE 不支持Set，如需兼容可手写过滤 - localStorage 容量约 5MB，但单条记录超长（比如带完整天气数据）会很快占满，只存城市名即可
最易被忽略的是网络异常处理——不是所有用户都有稳定连接，fetch().catch() 里只打印 console 是不够的，至少要在 UI 上显式提示 “网络错误，请检查连接”，否则用户会以为功能坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
