在数字化时代，网页开发已经成为一项至关重要的技能。HTML5作为最新的网页标准，为开发者提供了更多的功能和灵活性。本篇文章将为你介绍10个实用的HTML5实战案例，让你轻松上手，掌握网页开发的精髓。
1. 制作响应式网页
响应式网页设计是现代网页开发的核心。以下是一个简单的响应式网页案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式网页</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 600px) {
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>响应式网页示例</h1>
<p>这是一个响应式网页，可以根据屏幕大小自动调整布局。</p>
</div>
</body>
</html>
2. 制作轮播图
轮播图是网页中常见的元素，以下是一个使用HTML5和CSS3制作的轮播图案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.carousel {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.carousel img {
width: 100%;
display: none;
}
.carousel img.active {
display: block;
}
</style>
</head>
<body>
<div class="carousel">
<img src="image1.jpg" alt="图片1" class="active">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
</body>
</html>
3. 制作进度条
进度条可以用来显示任务完成情况，以下是一个简单的进度条案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
.progress-bar {
width: 300px;
height: 20px;
background-color: #eee;
position: relative;
}
.progress {
width: 0%;
height: 100%;
background-color: #4CAF50;
text-align: center;
line-height: 20px;
color: white;
}
</style>
</head>
<body>
<div class="progress-bar">
<div class="progress">0%</div>
</div>
</body>
</html>
4. 制作倒计时
倒计时可以用来提醒用户时间紧迫，以下是一个简单的倒计时案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<script>
function countdown() {
var now = new Date();
var end = new Date(now.getFullYear() + 1, now.getMonth(), now.getDate());
var seconds = Math.floor((end - now) / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";
setTimeout(countdown, 1000);
}
</script>
</head>
<body onload="countdown()">
<div id="countdown"></div>
</body>
</html>
5. 制作折叠面板
折叠面板可以用来展示更多内容，以下是一个简单的折叠面板案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>折叠面板</title>
<style>
.collapse {
border: 1px solid #ccc;
padding: 10px;
}
.collapse h3 {
cursor: pointer;
}
.collapse p {
display: none;
}
</style>
</head>
<body>
<div class="collapse">
<h3>标题1</h3>
<p>内容1</p>
</div>
<div class="collapse">
<h3>标题2</h3>
<p>内容2</p>
</div>
</body>
</html>
6. 制作地图标记
地图标记可以用来展示地理位置，以下是一个简单的地图标记案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>地图标记</title>
<style>
#map {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
</script>
</body>
</html>
7. 制作日历
日历可以用来展示日期和时间，以下是一个简单的日历案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style>
.calendar {
width: 300px;
border-collapse: collapse;
}
.calendar th,
.calendar td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.calendar th {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table class="calendar">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
8. 制作图片懒加载
图片懒加载可以优化网页加载速度，以下是一个简单的图片懒加载案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
<style>
img {
width: 300px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<img src="placeholder.jpg" data-src="image1.jpg" alt="图片1">
<img src="placeholder.jpg" data-src="image2.jpg" alt="图片2">
<img src="placeholder.jpg" data-src="image3.jpg" alt="图片3">
<script>
var images = document.querySelectorAll("img[data-src]");
function lazyLoad() {
var windowHeight = window.innerHeight;
for (var i = 0; i < images.length; i++) {
var image = images[i];
var rect = image.getBoundingClientRect();
if (rect.top < windowHeight && rect.bottom >= 0) {
image.src = image.getAttribute("data-src");
image.removeAttribute("data-src");
}
}
}
window.addEventListener("scroll", lazyLoad);
lazyLoad();
</script>
</body>
</html>
9. 制作表单验证
表单验证可以确保用户输入的数据符合要求，以下是一个简单的表单验证案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<span class="error" id="username-error"></span>
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<span class="error" id="password-error"></span>
<br>
<input type="submit" value="提交">
</form>
<script>
var form = document.querySelector("form");
var username = document.getElementById("username");
var password = document.getElementById("password");
var usernameError = document.getElementById("username-error");
var passwordError = document.getElementById("password-error");
form.addEventListener("submit", function (e) {
e.preventDefault();
if (username.value === "") {
usernameError.innerHTML = "用户名不能为空";
} else {
usernameError.innerHTML = "";
}
if (password.value === "") {
passwordError.innerHTML = "密码不能为空";
} else {
passwordError.innerHTML = "";
}
if (username.value !== "" && password.value !== "") {
alert("提交成功！");
}
});
</script>
</body>
</html>
10. 制作全屏滚动
全屏滚动可以提升用户体验，以下是一个简单的全屏滚动案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全屏滚动</title>
<style>
body {
margin: 0;
padding: 0;
}
.section {
height: 100vh;
background-color: #f0f0f0;
text-align: center;
line-height: 100vh;
font-size: 24px;
}
</style>
</head>
<body>
<div class="section" id="section1">全屏滚动1</div>
<div class="section" id="section2">全屏滚动2</div>
<div class="section" id="section3">全屏滚动3</div>
<script>
var sections = document.querySelectorAll(".section");
var currentSection = 0;
function scrollToSection(sectionIndex) {
var position = sectionIndex * window.innerHeight;
window.scrollTo(0, position);
currentSection = sectionIndex;
}
document.addEventListener("wheel", function (e) {
if (e.deltaY > 0) {
scrollToSection(currentSection - 1);
} else {
scrollToSection(currentSection + 1);
}
});
scrollToSection(0);
</script>
</body>
</html>
通过以上10个实战案例，相信你已经掌握了HTML5网页开发的基本技能。在实际项目中，你可以根据自己的需求，灵活运用这些技能，打造出更加出色的网页作品。祝你学习愉快！