最可靠方案是用 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></script> 标签顶部，但 DOM 还没解析完，getElementById 会返回 null，后续赋值直接失败。这不是 API 问题，是执行时机问题。
性能影响：如果用户网速慢，天气请求卡住，不该阻塞整个页面渲染。所以不能用 async/await 在全局作用域里“等结果”。
实操建议：
- 把请求逻辑包进函数，比如
loadWeather() - 用
window.addEventListener('DOMContentLoaded', loadWeather)确保 DOM 就绪后再调用 - 或者把
<script></script>标签放到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
