最可靠方案是用 JavaScript 的 fetch 调用 OpenWeatherMap API，需注册获取 appid、用经纬度替代中文城市名防兼容问题、DOM 加载完成后再请求、空值校验与错误兜底。
用第三方 API 获取实时天气数据最可靠
纯 HTML 无法主动拉取天气，必须配合 JavaScript 发起网络请求。直接写死城市或硬编码 JSON 是常见误区——天气数据每小时变，静态内容很快失效。fetch 是现代浏览器最简方案，但要注意跨域限制：多数公开天气 API（如 OpenWeatherMap）要求注册获取 appid，且需在 URL 中显式携带。
常见错误现象：TypeError: Failed to fetch 或控制台提示 No 'Access-Control-Allow-Origin'。这不是你代码写错了，而是目标接口没开 CORS，或者你漏传了 appid 参数。
实操建议：
- 去 OpenWeatherMap 免费注册，拿到
appid - 用城市名 +
appid构造请求 URL，例如：https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_KEY&units=metric -
units=metric控制温度单位，不加默认是开尔文，显示出来会是285.15这种数字，完全不可读
用 innerHTML 动态写入天气信息最轻量
不用引入 Vue/React，几行 JS 就能更新页面。关键是把天气数据映射到 DOM 节点，而不是拼接大段 HTML 字符串——后者容易 XSS，也难维护。
立即学习“前端免费学习笔记（深入）”；
使用场景：只想在页脚或侧边栏显示当前温度、天气图标、湿度三四个字段，不需要交互式预报列表。
实操建议：
- HTML 中预留带
id的容器，比如：<div id="weather-display"></div> - JS 里用
document.getElementById('weather-display').innerHTML = ...写入结构化内容 - 图标别用本地图片路径，直接用 OpenWeatherMap 提供的 icon ID 拼 URL：
https://openweathermap.org/img/wn/${iconCode}@2x.png - 注意空值处理：API 返回可能没有
main.temp（比如请求超时或城市不存在），得加if (data?.main?.temp)防止报错
避免在页面加载完成前就执行请求
把 fetch 放在 <script> 标签顶部，但 DOM 还没解析完，getElementById 会返回 null，后续赋值直接失败。这不是 API 问题，是执行时机问题。
性能影响：如果用户网速慢，天气请求卡住，不该阻塞整个页面渲染。所以不能用 async/await 在全局作用域里“等结果”。
实操建议：
- 把请求逻辑包进函数，比如
loadWeather() - 用
window.addEventListener('DOMContentLoaded', loadWeather)确保 DOM 就绪后再调用 - 或者把
<script>标签放到</body>前，天然保证节点存在 - 加个 loading 占位符：
<div id="weather-display">Loading...</div>，提升感知速度
地区中文名和经纬度参数选哪个？
用城市中文名（如 q=上海）最方便，但 OpenWeatherMap 对中文支持不稳定，偶尔返回 404；用英文名（q=Shanghai）更稳，但用户可能不知道拼写。真正健壮的做法是用经纬度——只要知道坐标，永远能定位到具体气象站。
兼容性影响：部分老设备或国内定制浏览器对 Unicode URL 编码支持差，q=北京 可能被截断或乱码，而 lat=39.9&lon=116.4 是纯 ASCII，零兼容风险。
实操建议：
- 查好你目标城市的经纬度（百度地图右键“复制经纬度”，高德用 URL 参数
ll=），填进 API：https://api.openweathermap.org/data/2.5/weather?lat=39.90&lon=116.39&appid=xxx - 如果必须支持多城市切换，别手写判断，用
Map存城市名到坐标的映射，比 if-else 清晰得多 - 别信“免费天气插件”压缩包——里面常藏统计脚本或恶意重定向，直接调官方 API 最干净
真实项目里最容易被忽略的是错误兜底：API 不可用时，页面不能空白。至少留一句 天气数据加载失败，请稍后刷新，并设个定时器自动重试。不然用户以为功能坏了，其实只是 OpenWeatherMap 那边临时抖了一下。
