项目一：响应式网页设计
1.1 项目背景
随着移动设备的普及，响应式网页设计成为网站开发的重要趋势。本案例将教你如何使用HTML5和CSS3创建一个响应式网页。
1.2 技术要点
- HTML5语义化标签
- CSS3媒体查询
- Flexbox布局
1.3 项目步骤
- 创建HTML5文档结构。
- 使用CSS3媒体查询实现响应式布局。
- 使用Flexbox布局优化网页布局。
1.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>响应式网页设计</title>
<style>
/* 媒体查询 */
@media (max-width: 600px) {
body {
background-color: #f5f5f5;
}
}
/* Flexbox布局 */
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目一</div>
<div class="item">项目二</div>
<div class="item">项目三</div>
</div>
</body>
</html>
项目二：制作一个简单的博客
2.1 项目背景
博客是展示个人或团队文章的平台。本案例将教你如何使用HTML5和CSS3制作一个简单的博客。
2.2 技术要点
- HTML5语义化标签
- CSS3样式美化
- JavaScript实现交互
2.3 项目步骤
- 创建HTML5文档结构。
- 使用CSS3样式美化博客。
- 使用JavaScript实现文章列表的动态加载。
2.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>简单博客</title>
<style>
/* 样式美化 */
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.article {
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="header">我的博客</div>
<div class="article">
<h2>标题</h2>
<p>内容...</p>
</div>
</body>
</html>
项目三：制作一个在线问卷调查
3.1 项目背景
在线问卷调查是收集用户意见和反馈的有效方式。本案例将教你如何使用HTML5和JavaScript制作一个在线问卷调查。
3.2 技术要点
- HTML5表单元素
- JavaScript实现表单验证
3.3 项目步骤
- 创建HTML5表单结构。
- 使用JavaScript实现表单验证。
- 使用AJAX提交表单数据。
3.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>在线问卷调查</title>
<script>
function validateForm() {
var name = document.forms["survey"]["name"].value;
if (name == "") {
alert("请输入您的姓名！");
return false;
}
}
</script>
</head>
<body>
<form name="survey" onsubmit="return validateForm()" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
</body>
</html>
项目四：制作一个简单的音乐播放器
4.1 项目背景
音乐播放器是日常生活中常用的应用。本案例将教你如何使用HTML5和JavaScript制作一个简单的音乐播放器。
4.2 技术要点
- HTML5音频元素
- JavaScript控制播放器
4.3 项目步骤
- 创建HTML5音频元素。
- 使用JavaScript实现播放、暂停、进度控制等功能。
4.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<script>
var audio = document.getElementById("audio");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var progress = document.getElementById("progress");
playBtn.onclick = function() {
audio.play();
};
pauseBtn.onclick = function() {
audio.pause();
};
audio.ontimeupdate = function() {
progress.value = audio.currentTime / audio.duration * 100;
};
</script>
</head>
<body>
<audio id="audio" src="music.mp3"></audio>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<progress id="progress" value="0" max="100"></progress>
</body>
</html>
项目五：制作一个简单的购物车
5.1 项目背景
购物车是电商平台的重要组成部分。本案例将教你如何使用HTML5和JavaScript制作一个简单的购物车。
5.2 技术要点
- HTML5列表元素
- JavaScript实现购物车功能
5.3 项目步骤
- 创建HTML5列表结构。
- 使用JavaScript实现添加、删除商品等功能。
5.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<script>
var cart = [];
function addToCart() {
var item = {
name: "商品",
price: 10
};
cart.push(item);
alert("已添加到购物车！");
}
function showCart() {
var total = 0;
var html = "<ul>";
for (var i = 0; i < cart.length; i++) {
var item = cart[i];
html += "<li>" + item.name + " - " + item.price + "元</li>";
total += item.price;
}
html += "</ul>";
html += "总计：" + total + "元";
document.getElementById("cart").innerHTML = html;
}
</script>
</head>
<body>
<button onclick="addToCart()">添加商品</button>
<button onclick="showCart()">查看购物车</button>
<div id="cart"></div>
</body>
</html>
项目六：制作一个简单的待办事项列表
6.1 项目背景
待办事项列表是提高工作效率的好帮手。本案例将教你如何使用HTML5和JavaScript制作一个简单的待办事项列表。
6.2 技术要点
- HTML5列表元素
- JavaScript实现待办事项功能
6.3 项目步骤
- 创建HTML5列表结构。
- 使用JavaScript实现添加、删除待办事项等功能。
6.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
<script>
var todos = [];
function addTodo() {
var todo = document.getElementById("todo").value;
todos.push(todo);
document.getElementById("todo").value = "";
showTodos();
}
function removeTodo(index) {
todos.splice(index, 1);
showTodos();
}
function showTodos() {
var html = "<ul>";
for (var i = 0; i < todos.length; i++) {
html += "<li>" + todos[i] + " <button onclick='removeTodo(" + i + ")'>删除</button></li>";
}
html += "</ul>";
document.getElementById("todos").innerHTML = html;
}
</script>
</head>
<body>
<input type="text" id="todo" placeholder="添加待办事项">
<button onclick="addTodo()">添加</button>
<div id="todos"></div>
</body>
</html>
项目七：制作一个简单的日历
7.1 项目背景
日历是日常生活中必不可少的工具。本案例将教你如何使用HTML5和JavaScript制作一个简单的日历。
7.2 技术要点
- HTML5表格元素
- JavaScript实现日期计算
7.3 项目步骤
- 创建HTML5表格结构。
- 使用JavaScript实现日期计算和显示。
7.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>简单日历</title>
<script>
function showCalendar(year, month) {
var days = ["日", "一", "二", "三", "四", "五", "六"];
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var firstDay = new Date(year, month, 1).getDay();
var lastDay = new Date(year, month + 1, 0).getDate();
var html = "<table>";
html += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
for (var i = 0; i < firstDay; i++) {
html += "<td></td>";
}
for (var i = 1; i <= lastDay; i++) {
html += "<td>" + i + "</td>";
}
html += "</table>";
document.getElementById("calendar").innerHTML = html;
}
</script>
</head>
<body>
<input type="number" id="year" placeholder="年份">
<input type="number" id="month" placeholder="月份">
<button onclick="showCalendar(document.getElementById('year').value, document.getElementById('month').value)">显示日历</button>
<div id="calendar"></div>
</body>
</html>
项目八：制作一个简单的待办事项提醒器
8.1 项目背景
待办事项提醒器可以帮助我们及时完成任务。本案例将教你如何使用HTML5和JavaScript制作一个简单的待办事项提醒器。
8.2 技术要点
- HTML5本地存储
- JavaScript实现提醒功能
8.3 项目步骤
- 创建HTML5表单结构。
- 使用JavaScript实现添加、删除待办事项和提醒功能。
8.4 项目示例
<!DOCTYPE html>
<html>
<head>
<title>待办事项提醒器</title>
<script>
function addTodo() {
var todo = document.getElementById("todo").value;
if (todo) {
var todos = JSON.parse(localStorage.getItem("todos")) || [];
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
document.getElementById("todo").value = "";
showTodos();
}
}
function removeTodo(index) {
var todos = JSON.parse(localStorage.getItem("todos")) || [];
todos.splice(index, 1);
localStorage.setItem("todos", JSON.stringify(todos));
showTodos();
}
function showTodos() {
var todos = JSON.parse(localStorage.getItem("todos")) || [];
var html = "<ul>";
for (var i = 0; i < todos.length; i++) {
html += "<li>" + todos[i] + " <button onclick='removeTodo(" + i + ")'>删除</button></li>";
}
html += "</ul>";
document.getElementById("todos").innerHTML = html;
}
</script>
</head>
<body>
<input type="text" id="todo" placeholder="添加待办事项">
<button onclick="addTodo()">添加</button>
<div id="todos"></div>
</body>
</html>
通过以上8个案例教程，相信你已经对HTML5实战有了更深入的了解。希望这些项目能帮助你快速上手HTML5开发，为你的职业生涯添砖加瓦。