在互联网时代，我们经常需要查看天气预报来安排日常生活。而如今，自己动手制作一个简单的在线天气应用不仅能够满足这一需求，还能锻炼自己的编程技能。下面，我们就来一步步教你如何用HTML5编写一个简单的在线天气应用。

1. 准备工作

在开始编写代码之前，你需要准备以下几样东西：

  • 浏览器：推荐使用Chrome、Firefox等主流浏览器，因为它们对HTML5的支持较好。
  • 代码编辑器：可以选择Visual Studio Code、Sublime Text等编辑器，方便编写和调试代码。
  • 天气API：我们需要从某个提供天气预报服务的网站上获取数据，这里以和风天气为例，其API地址为https://api.seniverse.com/v3/weather/now.json。

2. 创建HTML结构

首先，我们需要创建一个基本的HTML结构，包括标题、搜索框、显示结果的区域等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线天气应用</title>
    <style>
        /* 在这里添加一些CSS样式 */
    </style>
</head>
<body>
    <h1>在线天气应用</h1>
    <input type="text" id="city" placeholder="请输入城市名">
    <button onclick="getWeather()">获取天气</button>
    <div id="weatherResult">
        <!-- 天气结果显示区域 -->
    </div>

    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

3. 编写CSS样式

为了让网页看起来更美观，我们可以添加一些CSS样式。以下是一个简单的样式示例：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
}

#weatherResult {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

4. 编写JavaScript代码

接下来，我们需要编写JavaScript代码，以便从天气API获取数据并显示在网页上。

function getWeather() {
    var city = document.getElementById('city').value;
    var apiKey = '你的API密钥'; // 在和风天气官网申请免费API密钥
    var url = 'https://api.seniverse.com/v3/weather/now.json?key=' + apiKey + '&location=' + city + '&language=zh-Hans&unit=c';

    fetch(url)
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            var result = data.results[0];
            var temp = result.now.temperature;
            var condition = result.now.condition.text;
            var weatherResult = document.getElementById('weatherResult');
            weatherResult.innerHTML = '<p>温度：' + temp + '℃</p><p>天气状况：' + condition + '</p>';
        })
        .catch(function(error) {
            console.error('获取天气数据失败：' + error);
        });
}

5. 测试与完善

现在，你可以将HTML、CSS和JavaScript代码保存到一个文件中，并在浏览器中打开它。输入城市名，点击“获取天气”按钮，你应该能看到对应的天气信息。

当然，这个简单的在线天气应用还有很多可以改进的地方，比如添加城市列表、天气预报、历史天气记录等功能。不过，通过这个示例，你应该已经对HTML5编程有了初步的了解。继续努力，相信你会在这个领域取得更大的成就！