在这个自学文档中，我们将学习如何使用HTML、CSS和JavaScript创建一个简单的待办事项列表应用程序。

学习经过（使用代码展示）

首先，我们将创建一个基本的HTML结构。创建一个新的HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Todo List App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Todo List</h1>
    <form id="todo-form">
        <input type="text" id="todo-input" placeholder="Add a new todo...">
        <button type="submit">Add</button>
    </form>
    <ul id="todo-list"></ul>

    <script src="main.js"></script>
</body>
</html>

接下来，我们将为应用程序添加样式。在同一目录下创建一个名为style.css的新文件，并添加以下代码：

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

h1 {
    text-align: center;
}

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

#todo-form input {
    width: 300px;
    padding: 10px;
}

#todo-form button {
    padding: 10px 20px;
}

#todo-list {
    list-style: none;
    padding: 0;
}

.todo-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.todo-item input[type="checkbox"] {
    margin-right: 10px;
}

.todo-item .delete-button {
    margin-left: auto;
}

现在让我们添加JavaScript代码来使这个待办事项列表应用程序可以实际工作。在同一目录下创建一个名为main.js的新文件，并添加以下代码：

const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const todoList = document.querySelector('#todo-list');

let todos = [];

function renderTodos() {
    todoList.innerHTML = '';
    
    todos.forEach((todo, index) => {
        const todoItem = document.createElement('li');
        todoItem.classList.add('todo-item');
        
        const checkbox = document.createElement('input');
        checkbox.setAttribute('type', 'checkbox');
        checkbox.checked = todo.completed;
        checkbox.addEventListener('change', () => {
            todos[index].completed = checkbox.checked;
            saveTodos();
            renderTodos();
        });
        
        const todoLabel = document.createElement('label');
        todoLabel.textContent = todo.text;

        const deleteButton = document.createElement('button');
        deleteButton.classList.add('delete-button');
        deleteButton.textContent = 'X';
        deleteButton.addEventListener('click', () => {
            todos.splice(index, 1);
            saveTodos();
            renderTodos();
        });
        
        todoItem.appendChild(checkbox);
        todoItem.appendChild(todoLabel);
        todoItem.appendChild(deleteButton);
        
        todoList.appendChild(todoItem);
    });
}

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

form.addEventListener('submit', e => {
    e.preventDefault();
    
    const todoText = input.value.trim();
    
    if (todoText) {
        todos.push({ text: todoText, completed: false });
        input.value = '';
        saveTodos();
        renderTodos();
    }
});

todos = JSON.parse(localStorage.getItem('todos')) || [];
renderTodos();

代码解释：

const form = document.querySelector('#todo-form') 在DOM中选择"todo-form"表单元素。
const input = document.querySelector('#todo-input') 在DOM中选择"todo-input"输入元素。
const todoList = document.querySelector('#todo-list') 在DOM中选择"todo-list"无序列表元素。
let todos = [] 定义一个空数组来存储我们的待办事项。

renderTodos() 函数用于呈现待办事项列表：

todoList.innerHTML = '' 清空待办事项列表。
todos.forEach() 遍历todos数组中的每个元素：
- const todoItem = document.createElement('li') 创建一个新的列表项。
- todoItem.classList.add('todo-item') 为新列表项添加"todo-item"类。
- const checkbox = document.createElement('input') 创建一个新的复选框。
- checkbox.checked = todo.completed 设置复选框的初始选中状态。
- checkbox.addEventListener() 为复选框添加事件监听来更新待办事项的完成状态。
- const todoLabel = document.createElement('label') 创建一个新的标签元素。
- todoLabel.textContent = todo.text 将待办事项的文本添加到标签元素中。
- const deleteButton = document.createElement('button') 创建一个新的删除按钮。
- deleteButton.classList.add('delete-button') 为删除按钮添加"delete-button"类。
- deleteButton.addEventListener() 为删除按钮添加事件监听来从待办事项列表和todos数组中删除该项。
- 然后将复选框、待办事项标签和删除按钮添加到列表项中，再将列表项添加到待办事项列表中。

saveTodos() 函数用于将todos数组保存到本地存储中。

form.addEventListener() 添加事件监听以在提交表单时添加新的待办事项。

最后，我们初始化应用程序，从本地存储中获取保存的todos，然后呈现待办事项列表。

结论

在此自学文档中，我们学习了如何使用HTML、CSS和JavaScript创建一个简单的待办事项列表应用程序。我们使用HTML创建应用程序的基本结构，使用CSS添加样式，使用JavaScript实现应用程序的功能。为了实现这个应用程序，我们学习了DOM操作、事件监听、本地存储和控制流程等基本概念。

参考文献：

freeCodeCamp以及HTML菜鸟基础学习。

自学文档：如何使用HTML、CSS和JavaScript创建一个待办事项列表应用程序

学习经过（使用代码展示）

代码解释：

结论

参考文献：