在数字化时代，掌握HTML5技术是构建网页和移动应用的基础。HTML5作为最新的网页标准，提供了丰富的功能，使得开发者能够轻松创建出功能强大、交互性高的网页应用。本文将带你轻松入门，通过一个实战项目，让你掌握HTML5的核心技能，并打造出你的首个网页应用案例。

项目背景

随着互联网的快速发展，网页应用的需求日益增长。HTML5的出现，使得开发者能够使用更少的代码实现更丰富的功能。本案例将基于HTML5，结合CSS3和JavaScript，创建一个简单的待办事项列表应用。

项目目标

通过本案例，你将学习到以下技能：

  • HTML5的基本标签和结构
  • CSS3样式设计
  • JavaScript编程基础
  • 使用HTML5的本地存储功能

项目准备

在开始之前，请确保你已经安装了以下软件：

  • 一个文本编辑器（如Notepad++、Sublime Text等）
  • 一个现代浏览器（如Chrome、Firefox等）

项目步骤

步骤一：创建HTML5文档

  1. 打开文本编辑器，创建一个名为index.html的文件。
  2. 输入以下代码，创建一个基本的HTML5文档结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>我的待办事项</h1>
        <form id="todo-form">
            <input type="text" id="todo-input" placeholder="添加待办事项">
            <button type="submit">添加</button>
        </form>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤二：设计CSS样式

  1. 创建一个名为style.css的文件。
  2. 输入以下代码，为待办事项列表应用添加基本样式：
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

#todo-form {
    margin-bottom: 20px;
}

#todo-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#todo-input:focus {
    border-color: #5cb85c;
}

button {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
}

li:hover {
    background-color: #f0f0f0;
}

步骤三：编写JavaScript代码

  1. 创建一个名为script.js的文件。
  2. 输入以下代码，为待办事项列表应用添加功能：
document.addEventListener('DOMContentLoaded', function() {
    var todoForm = document.getElementById('todo-form');
    var todoInput = document.getElementById('todo-input');
    var todoList = document.getElementById('todo-list');

    todoForm.addEventListener('submit', function(e) {
        e.preventDefault();
        var todoText = todoInput.value.trim();
        if (todoText) {
            var todoItem = document.createElement('li');
            todoItem.textContent = todoText;
            todoList.appendChild(todoItem);
            todoInput.value = '';
        }
    });

    todoList.addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            e.target.remove();
        }
    });
});

步骤四：测试和优化

  1. 打开浏览器，访问index.html文件。
  2. 输入待办事项，点击“添加”按钮，查看效果。
  3. 点击待办事项，查看是否能够删除。

项目总结

通过本案例，你学会了如何使用HTML5、CSS3和JavaScript创建一个简单的待办事项列表应用。这是一个非常实用的技能，可以帮助你在实际工作中快速开发出功能丰富的网页应用。在今后的学习中，你可以继续探索HTML5的更多功能，提升自己的编程能力。