创建一个简单的 HTML、CSS 和 JavaScript 项目是一个很好的方式来学习和掌握这些前端技术。下面是一个完整的示
例项目,展示了如何使用 HTML、CSS 和 JavaScript 开发一个简单的待办事项(To-Do List)应用。
项目结构
首先,我们需要创建项目的文件结构:
plaintext
Copy
todo-app/
├── index.html
├── style.css
└── script.js
1. HTML 文件
index.html 文件是我们应用的主页面,包含基本的 HTML 结构和一些元素。
html
Copy
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="style.css"></head><body>
<div class="container">
<h1>To-Do List</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Add a new task..." required>
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script></body></html>
2. CSS 文件
style.css 文件用于定义页面的样式,使其看起来更美观。
css