1. 从“三剑客”的定位说起为什么复习它们如此重要如果你在任何一个前端技术社区里泡过或者看过招聘要求对“HTML CSS JS”这个组合一定不陌生。它们被戏称为“前端三剑客”是构建现代网页和Web应用的基石。但很多人在学习或复习时容易陷入一个误区把这三者当成三个孤立的、需要分别记忆的知识点列表。结果就是HTML标签背了一堆CSS属性也记了不少JS语法也学了但真到动手做一个哪怕简单的页面时还是感觉无从下手或者写出来的代码结构混乱、样式脆弱、交互生硬。我干了这么多年带过不少新人也面试过很多人发现一个普遍现象能把这三者融会贯通的人写出的代码质量、解决问题的思路和那些只会孤立记忆的人完全不在一个层次上。所以这次复习我们不搞“知识点罗列”那太枯燥也记不住。我们换个思路把它们看作一个有机整体从“如何共同完成一个网页”的视角去重新理解每一个知识点的位置和作用。HTML是骨架它定义了页面的结构和内容。但光有骨架页面是苍白且丑陋的。CSS是皮肤和衣服负责给骨架“化妆”和“穿搭”决定它长什么样、摆在哪里。而JS是肌肉和神经让这个静态的“模特”能够动起来能够响应用户的触摸、点击能够处理数据变成一个活生生的应用。这次复习我们就围绕一个核心目标打通任督二脉让你对“三剑客”如何协同工作有一个清晰、实战化的认知。我们会从最基础的文档结构开始深入到布局的核心思想再到让页面“活”起来的交互逻辑。过程中我会穿插大量我实际工作中踩过的坑、总结的技巧以及那些官方文档里不会明说但老手都懂的“潜规则”。2. HTML不止是标签更是语义与结构的艺术很多人学HTML第一步就是背div,p,span这些标签。这没错但远远不够。现代HTML的核心思想是语义化。简单说就是“用对的标签做对的事”。这不仅关乎代码的可读性更直接影响搜索引擎优化SEO、无障碍访问Accessibility以及后续CSS和JS操作的便利性。2.1 文档类型与基础结构一切的起点每次新建一个HTML文件开头必须是!DOCTYPE html。这不是一个标签而是一个声明告诉浏览器“请用最新的HTML5标准来解析我。”少了它浏览器可能会进入一种叫“怪异模式”的状态你的CSS布局可能会变得不可预测。紧接着是html根元素通常我们会加上lang属性比如lang“zh-CN”。这非常重要它定义了文档的主要语言有助于屏幕阅读器等辅助工具正确工作也是SEO的一个小加分项。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的网页/title /head body !-- 页面所有可见内容都放在这里 -- /body /html这里有两个meta标签需要特别关注charset“UTF-8”指定字符编码为UTF-8。这是现在绝对的标准能完美支持中文和各种特殊符号。如果遇到页面乱码十有八九是这里没设对或者服务器响应头冲突。viewport这个标签是移动端适配的基石。widthdevice-width告诉浏览器视口宽度等于设备宽度initial-scale1.0设置初始缩放比例为1。没有这个在手机上看你的页面可能就是一个缩小的桌面版需要用户手动缩放体验极差。实操心得title标签里的内容不仅显示在浏览器标签页上更是搜索引擎结果中显示的标题。一个好的title应该简洁、包含核心关键词并且每个页面最好都不一样。2.2 语义化标签告别“满屏div”的时代HTML5引入了一系列语义化标签它们本身没有默认样式但赋予了内容明确的意义。header/footer 页头/页脚。一个页面可以有多个比如文章内部的header可以包含标题和元信息。nav 导航链接区域。通常放主导航菜单。main 页面的主要内容区一个页面应该只有一个。article 代表一个独立、完整、可独立分发的内容块如博客文章、新闻、论坛帖子。section 一个主题性的内容分组。通常会有自己的标题h1-h6。它和article的区别有时很微妙我的经验是如果能独立成文且有意义用article如果只是文章中的一个章节或页面的一部分用section。aside 侧边栏或附属内容如引用、广告、导航链接组与主要内容关联较弱时。figure/figcaption 用于包裹图片、图表、代码等媒体内容及其标题。为什么语义化如此重要对开发者友好 看代码结构一目了然维护起来方便。对SEO友好 搜索引擎的爬虫能更好地理解页面内容的结构和重要性。对无障碍友好 屏幕阅读器能根据标签语义为用户提供更好的导航提示。对未来友好 代码更健壮样式和脚本更容易定位元素。以前我们可能用div id“header”现在直接用header。这不仅更简洁也传达了更清晰的结构信息。2.3 表单与多媒体与用户交互的桥梁表单是Web收集用户输入的核心。复习时要关注input的type属性它决定了输入框的行为email,tel,url,number,date 这些类型在移动端能调出更合适的键盘并且浏览器会进行基础验证。required,pattern,min,max 这些是HTML5的原生表单验证属性能减少很多JS验证代码。但记住前端验证永远不可靠后端必须做二次验证。label的for属性与input的id绑定点击标签文字就能聚焦到输入框这对用户体验和无障碍至关重要。多媒体方面audio和video标签让嵌入音视频变得极其简单。重点在于controls显示控制条、autoplay自动播放很多浏览器已禁止、loop循环等属性的使用以及source子标签指定不同格式的源文件以实现兼容。3. CSS从精确控制到弹性布局的思维跃迁CSS的学习曲线在“布局”这一环上有个陡坡。很多人卡在如何让元素“乖乖呆在它该在的位置”。早期的float、position让人头疼而现代CSS布局方案——Flexbox和Grid——彻底改变了游戏规则。3.1 盒模型一切样式的基础在谈布局前必须彻底理解盒模型。每个元素都被视为一个盒子从内到外由content内容、padding内边距、border边框、margin外边距组成。这里有个关键点width和height属性默认设置的是内容框的尺寸。这意味着如果你设置width: 200px; padding: 20px; border: 5px solid #ccc;这个元素在页面上实际占据的宽度是200 20*2 5*2 250px。这经常导致布局计算错误。解决方案box-sizing属性。box-sizing: content-box;默认值width 内容宽度。box-sizing: border-box;推荐width 内容宽度 内边距 边框。设置width: 200px后无论你怎么加padding和border它占用的总宽度就是200px计算起来直观多了。我的习惯是在全局样式里直接重置* { box-sizing: border-box; }3.2 Flexbox一维布局的神器Flexbox弹性盒子是为一维布局设计的即要么是行水平要么是列垂直。它解决了诸如垂直居中、等高分栏、弹性分配空间等传统CSS非常棘手的问题。核心概念是“容器”和“项目”。在父元素上设置display: flex;它就变成了一个Flex容器其直接子元素自动成为Flex项目。几个最常用、威力最大的容器属性flex-direction 定义主轴方向。row默认水平从左到右、column垂直从上到下、row-reverse、column-reverse。justify-content 定义项目在主轴上的对齐方式。flex-start默认左对齐、center居中、flex-end右对齐、space-between两端对齐项目间间隔相等、space-around每个项目两侧间隔相等。align-items 定义项目在交叉轴上的对齐方式。stretch默认拉伸填满、flex-start顶部对齐、center居中对齐、flex-end底部对齐。实现单行内容的垂直居中用这个属性配合justify-content: center是最简单的。flex-wrap 定义是否换行。nowrap默认不换行、wrap换行。项目属性中flex属性是精髓。它是flex-grow放大比例、flex-shrink缩小比例、flex-basis初始大小的简写。flex: 1通常意味着“占据剩余空间”。这在实现自适应布局时非常有用。踩坑记录Flex项目的最小尺寸默认是由其内容决定的。有时你设置flex: 1希望它均匀分配空间却发现某个有长英文单词或图片的项目把容器撑开了。这时需要在项目上设置min-width: 0或overflow: hidden来“重置”最小尺寸flex属性才能正常工作。3.3 Grid二维布局的终极方案如果说Flexbox是一维的那么CSS Grid Layout网格布局就是为二维布局同时处理行和列而生的。它让你能够像设计图纸一样精确地将页面划分为区域。同样在父容器上设置display: grid;它就变成了Grid容器。定义网格结构.container { display: grid; grid-template-columns: 100px 1fr 2fr; /* 三列第一列固定100px第二列占1份剩余空间第三列占2份 */ grid-template-rows: 80px auto 100px; /* 三行第一行80px第二行自动高度第三行100px */ gap: 20px; /* 行和列之间的间隙非常方便替代了古老的margin技巧 */ }fr单位代表“份数”是Grid布局中分配剩余空间的利器。gap属性直接设置网格线之间的间距比用margin干净得多。项目放置你可以通过grid-column和grid-row属性让项目跨越多个网格轨道。.item { grid-column: 1 / 3; /* 从第1条纵网格线开始到第3条前结束即占据第1、2列 */ grid-row: 2 / 4; /* 从第2条横网格线开始到第4条前结束即占据第2、3行 */ }更直观的是使用命名区域.container { grid-template-areas: header header header sidebar main main footer footer footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }这种方式对于构建经典的页面布局页头、侧边栏、主内容、页脚直观到令人发指。3.4 响应式设计与媒体查询现在几乎没有只为桌面设计的网站了。响应式设计RWD要求页面能自适应不同尺寸的屏幕。核心工具是媒体查询。/* 默认样式移动端优先 */ body { font-size: 14px; } /* 当屏幕宽度至少为768px时平板及以上 */ media (min-width: 768px) { body { font-size: 16px; } .container { width: 750px; } } /* 当屏幕宽度至少为992px时桌面 */ media (min-width: 992px) { .container { width: 970px; } } /* 当屏幕宽度至少为1200px时大桌面 */ media (min-width: 1200px) { .container { width: 1170px; } }移动端优先是一种更推荐的策略先编写针对小屏幕的基础样式然后通过min-width媒体查询逐步增强大屏幕的体验。这通常比先写桌面样式再用max-width去覆盖更简洁。关于rem和em为了实现整体缩放字体和间距单位推荐使用rem相对于根元素html的字体大小。通常我们会设置html { font-size: 62.5%; }这样1rem就等于10px因为浏览器默认字体大小通常是16px16*0.62510计算起来非常方便。em则是相对于当前元素的字体大小在需要局部按比例缩放时使用。4. JavaScript让静态页面拥有灵魂HTML和CSS构建了静态的“躯壳”JavaScript则是注入其中的“灵魂”。复习JS重点不应再是死记硬背语法而是理解其核心概念如何操作DOM、如何处理事件、数据如何流动。4.1 DOM操作连接JS与页面的纽带Document Object Model文档对象模型是浏览器将HTML文档解析成的一个树形结构。JavaScript通过DOM API来访问和修改这棵树。获取元素这是第一步。document.getElementById(‘id’) 通过ID获取返回单个元素。document.querySelector(‘css选择器’) 通过CSS选择器获取第一个匹配的元素。功能强大最常用。document.querySelectorAll(‘css选择器’) 获取所有匹配的元素返回一个NodeList类似数组但不是真正的数组。document.getElementsByClassName(‘class’)/getElementsByTagName(‘tag’) 返回一个HTMLCollection是“活的”集合DOM变化时会自动更新。注意querySelectorAll返回的NodeList是“静态的”获取后不会再随DOM变化。而getElementsByClassName等返回的是“动态的”。在循环中操作动态集合时要小心因为长度可能会变化。修改内容与样式element.textContent 获取或设置元素的文本内容更安全不会解析HTML。element.innerHTML 获取或设置元素的HTML内容。注意如果内容来自用户输入直接使用innerHTML有XSS跨站脚本攻击风险必须对内容进行转义或使用textContent。element.style.property 修改元素的内联样式如el.style.color ‘red’;。element.classList 一个更优雅的类名操作接口。add(‘className’),remove(‘className’),toggle(‘className’),contains(‘className’)。创建与添加元素 更推荐的方式是使用document.createElement()创建元素设置好属性和内容后再用appendChild(),insertBefore(),replaceChild()等方法插入到DOM中而不是拼接HTML字符串再赋值给innerHTML。4.2 事件处理响应用户的交互事件是JS交互的核心。用户点击、鼠标移动、键盘按下、表单提交都会触发事件。事件监听推荐使用addEventListener方法它可以给一个元素添加多个监听器且更灵活。const button document.querySelector(‘#myButton’); button.addEventListener(‘click’, function(event) { // event对象包含了事件的详细信息 console.log(‘按钮被点击了’, event.target); // event.target是触发事件的元素 // 阻止事件的默认行为如表单提交、链接跳转 // event.preventDefault(); // 阻止事件继续向上冒泡 // event.stopPropagation(); });事件流冒泡与捕获事件在DOM树中传播分为三个阶段捕获阶段、目标阶段、冒泡阶段。addEventListener的第三个参数默认为false在冒泡阶段处理设为true则在捕获阶段处理。理解冒泡机制对于事件委托至关重要。事件委托这是一种利用事件冒泡的优化技巧。如果你有大量子元素需要相同的事件处理比如一个列表的每一项都有删除按钮不必给每个子元素都绑定事件只需在其父元素上绑定一次。document.querySelector(‘#list’).addEventListener(‘click’, function(event) { if (event.target.classList.contains(‘delete-btn’)) { // 只有点击了带有‘delete-btn’类的元素才会执行 const listItem event.target.closest(‘.list-item’); listItem.remove(); } });这样做性能更好而且对动态添加的子元素也有效。4.3 异步编程理解回调、Promise与async/awaitJavaScript是单线程的为了避免阻塞比如网络请求它采用了异步编程模型。这是JS学习中的一个难点也是重点。回调函数Callback最原始的方式将函数作为参数传递给另一个函数在某个操作完成后执行。缺点是容易导致“回调地狱”代码层层嵌套难以阅读和维护。PromiseES6引入代表一个异步操作的最终完成或失败及其结果值。它有三种状态pending进行中、fulfilled已成功、rejected已失败。function fetchData() { return new Promise((resolve, reject) { // 模拟异步操作 setTimeout(() { const success Math.random() 0.5; if (success) { resolve(‘数据获取成功’); } else { reject(‘网络错误’); } }, 1000); }); } fetchData() .then(data { console.log(data); // 成功时执行 }) .catch(error { console.error(error); // 失败时执行 }) .finally(() { console.log(‘请求结束’); // 无论成功失败都会执行 });Promise.all([promise1, promise2, ...])可以等待所有Promise都完成Promise.race()则取最先完成或拒绝的那个。async/awaitES2017引入是Promise的语法糖让异步代码看起来像同步代码一样直观。async function getData() { try { const data await fetchData(); // await会等待Promise解决 console.log(data); } catch (error) { console.error(error); } }async函数总是返回一个Promise。await只能在async函数内部使用。用try...catch来处理错误。关于fetchAPI现代浏览器用于替代老旧XMLHttpRequest的进行网络请求的工具。它基于Promise使用起来简洁得多。async function loadUser() { try { const response await fetch(‘/api/user/1’); if (!response.ok) { // 检查HTTP状态码是否成功200-299 throw new Error(HTTP错误! 状态码: ${response.status}); } const userData await response.json(); // 解析JSON响应体 console.log(userData); } catch (error) { console.error(‘获取用户失败:’, error); } }5. 融会贯通一个综合案例的构建与思考理论说再多不如动手做一遍。我们设想一个简单的需求构建一个“任务待办列表”Todo List。这个需求虽小但涵盖了“三剑客”的核心协作。5.1 结构层HTML搭建清晰的骨架首先我们用语义化的HTML搭建结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的待办清单/title link relstylesheet hrefstyle.css /head body main classtodo-app header classapp-header h1 今日待办/h1 p高效管理你的每一项任务/p /header section classinput-section form idtodo-form input typetext idtodo-input placeholder添加一个新任务... required button typesubmit添加/button /form div classfilters button classfilter-btn active>/* style.css */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: ‘Segoe UI’, system-ui, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 20px; color: #333; } .todo-app { background-color: white; width: 100%; max-width: 600px; border-radius: 20px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); overflow: hidden; } .app-header { background: linear-gradient(90deg, #4776E6, #8E54E9); color: white; padding: 2.5rem 2rem; text-align: center; } .app-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } .app-header p { opacity: 0.9; font-size: 1.1rem; } .input-section { padding: 2rem; border-bottom: 1px solid #eee; } #todo-form { display: flex; gap: 12px; /* 使用gap替代margin更简洁 */ margin-bottom: 1.5rem; } #todo-input { flex: 1; /* 输入框占据剩余空间 */ padding: 15px 20px; border: 2px solid #e0e0e0; border-radius: 50px; font-size: 1.1rem; transition: border-color 0.3s ease; } #todo-input:focus { outline: none; border-color: #8E54E9; } #todo-form button { padding: 15px 30px; background: #4776E6; color: white; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; } #todo-form button:hover { background-color: #3a64d1; } #todo-form button:active { transform: scale(0.98); } .filters { display: flex; justify-content: center; gap: 10px; } .filter-btn { padding: 8px 20px; background: #f0f0f0; border: none; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; } .filter-btn.active { background: #4776E6; color: white; } .todo-list-section { padding: 0 2rem 2rem; } #todo-list { list-style: none; margin-bottom: 1.5rem; } .todo-item { display: flex; align-items: center; padding: 18px; background: #f9f9f9; border-radius: 12px; margin-bottom: 12px; transition: all 0.3s ease; } .todo-item:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); } .todo-checkbox { margin-right: 15px; width: 22px; height: 22px; cursor: pointer; accent-color: #4776E6; /* 现代CSS直接改变复选框颜色 */ } .todo-text { flex: 1; font-size: 1.1rem; transition: color 0.3s ease; } .todo-item.completed .todo-text { text-decoration: line-through; color: #888; } .delete-btn { background: #ff6b6b; color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; } .todo-item:hover .delete-btn { opacity: 1; } .delete-btn:hover { background: #ff5252; } .list-status { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #eee; color: #666; font-size: 0.95rem; } #clear-completed { background: none; border: 1px solid #ddd; color: #666; padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; } #clear-completed:hover { background: #f0f0f0; } .app-footer { text-align: center; padding: 1.5rem; background: #f8f9fa; color: #777; font-size: 0.9rem; } /* 响应式调整 */ media (max-width: 600px) { .app-header h1 { font-size: 2rem; } #todo-form { flex-direction: column; } #todo-form button { width: 100%; } }这份CSS充分利用了Flexbox进行布局如表单、任务项、状态栏使用了gap属性管理间距通过:hover和transition添加了交互反馈并用媒体查询确保了在手机上的良好显示。5.3 行为层JS用模块化思维管理状态与交互最后我们用JavaScript来添加交互逻辑。这里的关键是状态管理和事件处理。// script.js document.addEventListener(‘DOMContentLoaded’, () { // 状态 let todos JSON.parse(localStorage.getItem(‘todos’)) || []; let currentFilter ‘all’; // DOM 元素引用 const todoForm document.getElementById(‘todo-form’); const todoInput document.getElementById(‘todo-input’); const todoList document.getElementById(‘todo-list’); const filterButtons document.querySelectorAll(‘.filter-btn’); const itemCountSpan document.getElementById(‘item-count’); const clearCompletedBtn document.getElementById(‘clear-completed’); // 初始化 renderTodos(); // 1. 添加新任务 todoForm.addEventListener(‘submit’, (e) { e.preventDefault(); // 阻止表单默认提交行为页面刷新 const text todoInput.value.trim(); if (text ‘’) { alert(‘请输入任务内容’); return; } const newTodo { id: Date.now(), // 简单的时间戳作为唯一ID text: text, completed: false }; todos.push(newTodo); saveAndRender(); todoInput.value ‘‘; // 清空输入框 todoInput.focus(); // 焦点重新回到输入框 }); // 2. 渲染任务列表 (核心函数) function renderTodos() { const filteredTodos todos.filter(todo { if (currentFilter ‘pending’) return !todo.completed; if (currentFilter ‘completed’) return todo.completed; return true; // ‘all’ }); todoList.innerHTML ‘‘; // 清空现有列表 if (filteredTodos.length 0) { const emptyMsg document.createElement(‘li’); emptyMsg.className ‘empty-message’; emptyMsg.textContent currentFilter ‘all’ ? ‘暂无任务添加一个吧’ : currentFilter ‘pending’ ? ‘没有待完成的任务’ : ‘还没有完成的任务’; todoList.appendChild(emptyMsg); } else { filteredTodos.forEach(todo { const li document.createElement(‘li’); li.className ‘todo-item’; li.dataset.id todo.id; if (todo.completed) li.classList.add(‘completed’); li.innerHTML input type“checkbox” class“todo-checkbox” ${todo.completed ? ‘checked’ : ‘‘} span class“todo-text”${escapeHtml(todo.text)}/span button class“delete-btn”×/button ; todoList.appendChild(li); }); } updateItemCount(); attachItemEvents(); // 重新绑定动态生成元素的事件 } // 3. 为每个任务项绑定事件事件委托的替代方案更清晰 function attachItemEvents() { document.querySelectorAll(‘.todo-checkbox’).forEach(checkbox { checkbox.addEventListener(‘change’, handleToggleComplete); }); document.querySelectorAll(‘.delete-btn’).forEach(btn { btn.addEventListener(‘click’, handleDelete); }); document.querySelectorAll(‘.todo-text’).forEach(span { span.addEventListener(‘dblclick’, handleEdit); }); } // 4. 切换任务完成状态 function handleToggleComplete(e) { const id parseInt(e.target.closest(‘.todo-item’).dataset.id); const todo todos.find(t t.id id); if (todo) { todo.completed e.target.checked; saveAndRender(); } } // 5. 删除任务 function handleDelete(e) { const id parseInt(e.target.closest(‘.todo-item’).dataset.id); todos todos.filter(t t.id ! id); saveAndRender(); } // 6. 编辑任务双击文本 function handleEdit(e) { const span e.target; const id parseInt(span.closest(‘.todo-item’).dataset.id); const todo todos.find(t t.id id); if (!todo) return; const input document.createElement(‘input’); input.type ‘text’; input.value todo.text; input.className ‘edit-input’; span.replaceWith(input); input.focus(); input.select(); const finishEdit () { const newText input.value.trim(); if (newText newText ! todo.text) { todo.text newText; saveAndRender(); } else { renderTodos(); // 重新渲染恢复原状 } }; input.addEventListener(‘blur’, finishEdit); input.addEventListener(‘keypress’, (e) { if (e.key ‘Enter’) { finishEdit(); } }); } // 7. 过滤任务 filterButtons.forEach(btn { btn.addEventListener(‘click’, () { filterButtons.forEach(b b.classList.remove(‘active’)); btn.classList.add(‘active’); currentFilter btn.dataset.filter; renderTodos(); }); }); // 8. 清除已完成任务 clearCompletedBtn.addEventListener(‘click’, () { todos todos.filter(t !t.completed); saveAndRender(); }); // 9. 更新任务计数 function updateItemCount() { const pendingCount todos.filter(t !t.completed).length; itemCountSpan.textContent ${pendingCount} 个待办任务; } // 10. 保存到本地存储并重新渲染 function saveAndRender() { localStorage.setItem(‘todos’, JSON.stringify(todos)); renderTodos(); } // 简单的HTML转义防止XSS虽然这里数据来自我们自己但养成好习惯 function escapeHtml(text) { const div document.createElement(‘div’); div.textContent text; return div.innerHTML; } });这个JS文件做了以下几件关键事状态管理用一个todos数组来存储所有任务对象每个对象包含id、text、completed属性。这是应用的“单一数据源”。数据持久化使用localStorage在浏览器关闭后保存任务数据。渲染函数renderTodos函数根据当前状态todos和currentFilter来生成DOM。这是声明式UI的雏形状态改变视图自动更新。事件处理为表单提交、复选框切换、删除按钮、双击编辑、过滤按钮等绑定了事件处理函数。注意因为任务项是动态生成的我们在每次渲染后需要重新绑定事件attachItemEvents。对于列表项的事件也可以使用事件委托但这里为了逻辑清晰采用了重新绑定的方式。工具函数saveAndRender将保存和渲染封装在一起确保数据与视图同步。escapeHtml是一个简单的安全函数。通过这个完整的案例你可以清晰地看到HTML提供了结构化的内容容器CSS定义了这些容器的外观和布局规则而JavaScript则负责管理数据状态并响应用户操作来更新数据和视图。三者各司其职又紧密协作。复习时带着这种“协作”的视角去审视每一个知识点你会发现它们不再是孤立的碎片而是一个有机整体中的不同环节。这才是真正掌握前端基础的关键。