使用html5、css 3 和javaScript 结合 OpenWeatherMap API 可快速开发响应式天气应用。2. 页面结构包含输入框、按钮和结果显示区域。3. 通过 fetch 调用 API 获取实时天气数据，支持中文和摄氏度单位。4. 数据渲染包括城市名、温度、图标、湿度和风速，并用 CSS 美化界面。5. 增加地理定位自动获取位置及 localStorage 保存历史记录提升体验。6. 添加错误处理与加载状态优化交互细节。
想用 html5 制作一个实用又好看的天气应用？其实并不复杂。通过结合现代 Web API、css3动画和 javascript 逻辑处理，你可以快速开发出一个响应式、交互友好的天气组件。下面从结构搭建到功能实现，一步步带你完成 HTML5 天气应用的开发实战。
1. 项目结构与基础布局
首先创建基本的 HTML5 页面结构，包含必要的语义化标签和引入外部资源：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title> 天气应用 </title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="weather-app"> <input type="text" id="city-input" placeholder=" 输入城市名称 " /> <button id="search-btn"> 查询 </button> <div id="weather-result"></div> </div> <script src="script.js"></script> </body> </html>
这个结构包含一个输入框、一个按钮和一个用于显示结果的容器，简洁明了，适合移动端和桌面端使用。
2. 获取天气数据（调用 API）
使用公开的天气 API（如 OpenWeatherMap）获取实时天气信息。你需要先注册获取 API 密钥。
立即学习 “ 前端免费学习笔记（深入）”；
在 JavaScript 中通过 fetch 请求数据：
const API_KEY = '你的 API 密钥'; const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather'; document.getElementById('search-btn').addEventListener('click', () => {const city = document.getElementById('city-input').value; if (!city) return alert('请输入城市名称'); fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric&lang=zh_cn`) .then(res => res.json()) .then(data => { if (data.cod !== 200) {alert('城市未找到'); return; } displayWeather(data); }) .catch(err => { console.error('请求失败：', err); alert('网络错误'); }); });
注意参数 units=metric 表示温度以摄氏度返回，lang=zh_cn 支持中文描述。
3. 展示天气信息
将获取的数据渲染到页面上。可以展示城市名、温度、天气图标、湿度、风速等：
function displayWeather(data) {const resultDiv = document.getElementById('weather-result'); const temp = Math.round(data.main.temp); const desc = data.weather[0].description; const icon = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; const humidity = data.main.humidity; const wind = data.wind.speed; resultDiv.innerHTML = ` <h2>${data.name} 天气 </h2> <img src="${icon}" alt=" 天气图标 " /> <p class="temp">${temp}°C</p> <p>${desc}</p> <p> 湿度：${humidity}%</p> <p> 风速：${wind} m/s</p> `; }
配合 CSS 美化显示效果，比如给温度加大字号、添加阴影、圆角卡片样式等。
4. 增强体验：定位与本地存储
提升用户体验的小技巧：
- 使用 Geolocation API 自动获取用户当前位置天气
- 将最近搜索的城市保存到 localStorage 中
- 添加加载动画防止白屏
例如自动定位：
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(pos => { const { latitude, longitude } = pos.coords; fetch(`${BASE_URL}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`) .then(res => res.json()) .then(data => displayWeather(data)); }); }
基本上就这些。通过 HTML5 + JavaScript + 第三方 API，你就能构建一个功能完整的天气应用。不复杂但容易忽略细节，比如错误处理、中文支持、响应式设计。持续优化交互和视觉，它就能变成一个真正可用的 工具。
