使用 OpenWeatherMap API 可实现 HTML5 页面天气嵌入：注册获取 appid 后通过 fetch 请求 JSON 数据，DOM 渲染城市、温度、天气描述；需 HTTP 服务器运行、缓存防限流、本地化图标提升体验。
用 JavaScript 调用天气 API 实现 HTML5 页面嵌入
HTML5 本身不提供天气功能，必须靠外部 API + fetch 或 XMLHttpRequest 获取数据，再用 DOM 操作渲染。主流免费方案是使用 OpenWeatherMap（需注册获取 appid），它支持 JSON 响应、跨域（CORS）、城市名/经纬度查询，适合前端直连。
常见错误：直接在本地 file:// 打开 HTML 文件，浏览器会因 CORS 拒绝请求；必须通过本地服务器（如 python3 -m http.server）或部署后访问。
- 注册获取免费
appid（限 1000 次/天），地址：https://home.openweathermap.org/api_keys - API 地址示例：
https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_KEY&units=metric（units=metric返回摄氏度） - 响应中关键字段：
data.main.temp（当前温度）、data.weather[0].description（天气描述）、data.name（城市名）
在 HTML 中插入实时更新的天气显示区域
不要用 iframe 套第三方天气站——样式难控、加载慢、可能被屏蔽。推荐纯 JS 渲染，结构清晰可控：
对应 JS 示例（放在 标签内或外部 JS 文件中）：
立即学习“前端免费学习笔记（深入）”；
function loadWeather() {
const city = 'Shanghai';
const appid = 'your_appid_here';
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${appid}&units=metric`)
.then(r => r.json())
.then(data => {
document.getElementById('weather-city').textContent = data.name;
document.getElementById('weather-temp').textContent = Math.round(data.main.temp) + '°C';
document.getElementById('weather-desc').textContent = data.weather[0].description;
})
.catch(err => console.error('天气加载失败:', err));
}
loadWeather();
// 每 10 分钟刷新一次
setInterval(loadWeather, 600000);
注意：fetch 在 IE 中不支持，如需兼容旧浏览器，改用 XMLHttpRequest 或引入 whatwg-fetch polyfill。
避免跨域、密钥泄露和频繁请求被限流
前端直连天气 API 最容易踩三个坑：跨域失败、appid 暴露在源码中、单位时间请求超限导致返回 429 Too Many Requests。
- 跨域问题：OpenWeatherMap 支持 CORS，但仅限 HTTP(S) 协议访问，
file://下必失败 -
appid泄露风险：虽然 OpenWeatherMap 允许前端使用，但建议限制 referer（在后台设置白名单域名），否则他人可盗用你的配额 - 限流应对：免费版每分钟最多 60 次，页面多个用户同时刷新易触发。可用
localStorage缓存结果并设定过期时间（比如 10 分钟），减少重复请求
移动端适配与图标显示（可选增强）
单纯文字不够直观，加个天气图标能提升体验。OpenWeatherMap 提供图标 URL：http://openweathermap.org/img/wn/${icon_code}@2x.png，其中 icon_code 来自 data.weather[0].icon（如 "04d"）。
插入图标只需一行：
document.getElementById('weather-icon').src =
`http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
但要注意：图标 CDN 不支持 HTTPS Referer 限制，且无缓存头，建议下载常用图标到本地静态目录，避免外链失效或加载延迟。另外，移动端小屏下建议用 flex 布局控制图标+文字对齐，避免换行错位。
真实项目里，天气数据往往只是页面一小块，别让它拖慢首屏；异步加载、错误 fallback（如显示“--°C”）、加载状态提示（如 “正在获取…”）这些细节，比功能本身更影响用户体验。
