零基础学前端：HTML、CSS与JavaScript三小时入门实战指南-开发者社区

大家好，我经常在后台收到类似的问题：“我想学前端，但网上的教程太散了，有没有一条清晰的路线？”或者是“我看了一堆视频，但自己动手写页面还是写不出来”。

其实前端入门没有想象中那么复杂，核心就三门语言：HTML、CSS、JavaScript。只要把这三者的分工搞清楚，再动手写两三个小页面，你就能建立起对整个前端开发的基本认知。

今天这篇文章，我会带你在 3 小时左右完成一次系统的前端入门。整体节奏是：先理解概念，再写代码，最后做一个完整的小项目。文章里的代码都可以直接复制运行，建议你跟着敲一遍，不要只看不练。

无论你是完全零基础的新手，还是后端、测试、运维想拓展前端技能，这篇教程都适用。

1. 前端三剑客：HTML、CSS、JS 分别是什么

在写代码之前，我们先把概念理清楚。很多初学者一开始就纠结“先学 HTML 还是先学 JS”，其实只要理解了三者各自的职责，这个问题自然就解决了。

1.1 用盖房子来理解三者的关系

把网页想象成一栋房子：

HTML 是房子的结构和毛坯：墙体、楼层、房间布局。它负责定义页面上有什么内容，比如标题、段落、图片、按钮。
CSS 是房子的装修：墙面颜色、地板材质、家具摆放。它负责让内容变得好看，比如字体大小、颜色、间距、布局位置。
JavaScript 是房子的水电和智能家居：开关控制灯光、门铃响铃、电梯运行。它负责让页面“动”起来，比如点击按钮弹出提示、轮播图切换、表单校验。

简单来说：

HTML 决定“页面有什么”
CSS 决定“页面长什么样”
JavaScript 决定“页面能做什么”

1.2 专业一点的解释

用技术术语来描述：

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，通过标签来描述网页内容的结构。
CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用来控制 HTML 元素的呈现效果。
JavaScript 是一种脚本语言，运行在浏览器中，可以操作 HTML 元素、与用户交互、向后端发送请求等。

需要注意的是，HTML 和 CSS 都不是编程语言，只有 JavaScript 才是真正的编程语言。这也是为什么很多人说“JavaScript 入门比 HTML/CSS 难”的原因——因为它涉及变量、函数、逻辑判断等编程概念。

1.3 一个极简示例看清三者分工

我们先写一个最简单的页面，让你直观感受三者的不同：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端三剑客示例</title> <style> h1 { color: #ff6b6b; } </style> </head> <body> <!-- HTML：定义内容 --> <h1 id="title">你好，前端</h1> <button id="btn">点击我</button> <!-- JavaScript：定义行为 --> <script> document.getElementById('btn').onclick = function () { alert('你点击了按钮'); }; </script> </body> </html>

在这个例子中：

<h1>和<button>是 HTML，负责展示内容。
h1 { color: #ff6b6b; }是 CSS，把标题文字变成红色。
document.getElementById('btn').onclick = ...是 JavaScript，给按钮绑定点击事件。

把这段代码保存为index.html，用浏览器打开，你会发现点击按钮后会弹出一个提示框。这就是三者的协作。

2. 环境准备：零成本搭建前端开发环境

前端开发的入门成本非常低，不需要安装复杂的集成开发环境，一个浏览器加一个文本编辑器就够了。下面介绍具体准备步骤。

2.1 需要的工具

你只需要准备两样东西：

浏览器：推荐 Chrome 或 Edge，它们自带开发者工具，调试页面非常方便。
代码编辑器：推荐 VS Code（Visual Studio Code），免费、插件丰富、对前端支持极好。

除此之外不需要额外安装任何服务器软件。HTML 文件直接用浏览器打开就能运行，这也降低了入门门槛。

2.2 安装 VS Code 并推荐插件

VS Code 的安装过程很简单，去官网下载对应系统的安装包，一路下一步即可。安装完成后，建议安装以下几个插件，能提升写代码的体验：

插件名称	作用
Chinese Language Pack	VS Code 中文界面
Live Server	本地实时预览页面，修改代码后浏览器自动刷新
Prettier - Code formatter	自动格式化代码，统一风格
Auto Rename Tag	修改 HTML 开始标签时自动同步结束标签

其中Live Server特别推荐。它本质上是一个本地开发服务器，能提供实时刷新能力，避免每次改代码都手动刷新浏览器。

2.3 浏览器开发者工具的使用

按F12或右键选择“检查”，可以打开浏览器开发者工具。对于新手来说，最常用的两个面板是：

Elements（元素）面板：查看当前页面的 HTML 结构和 CSS 样式，可以临时修改样式观察效果。
Console（控制台）面板：查看 JavaScript 输出和报错信息，这是排查问题的重要入口。

后面遇到问题，第一步就应该打开控制台看有没有报错，这比“瞎猜原因”高效得多。

2.4 创建第一个项目结构

建议你新建一个文件夹作为学习目录，例如frontend-demo，后续所有练习文件都可以放在这里。一个简单的项目结构如下：

frontend-demo/ ├── index.html ├── css/ │ └── style.css └── js/ └── main.js

把 HTML、CSS、JavaScript 分别放在不同目录，是一种良好的工程习惯。当然，在学习阶段也可以先全部写在一个 HTML 文件里，等掌握后再拆分。

3. HTML 核心语法：构建页面的结构

HTML 是整个网页的骨架。这一节我们只学最核心的语法和标签，这些内容覆盖日常开发中 80% 以上的场景。

3.1 HTML 文档的基本结构

每一个 HTML 页面都有一个固定的基础结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <!-- 页面内容写在这里 --> </body> </html>

各部分的含义：

<!DOCTYPE html>：声明这是一个 HTML5 文档，让浏览器按标准模式解析。
<html>：根元素，所有其他标签都嵌套在它里面。lang="zh-CN"表示页面语言是中文。
<head>：存放页面元信息，比如编码、标题、样式引用。这里的内容不会直接显示在页面上。
<meta charset="UTF-8">：声明字符编码为 UTF-8，避免中文乱码。
<body>：页面所有可见内容都放在这里。

初学者最容易犯的错误是忘记写meta charset="UTF-8"，导致中文乱码。建议直接记住这个结构，每次新建 HTML 文件时先写出来。

3.2 常用的 HTML 标签

下面整理了一份初学者必备的标签清单，按用途分类：

标题标签

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>

h1到h6共六级标题，数字越大字号越小。一个页面通常只使用一个h1，用于突出页面主旨，也有利于 SEO。

段落与文本

<p>这是一个段落，用于展示一段完整的文字内容。</p> <span>行内文本</span> <strong>加粗文本</strong> <em>斜体文本</em> <br>

<p>是块级元素，独占一行，段落和段落之间会自动产生间距。
<span>是行内元素，适合包裹局部文字。
<strong>表示重要内容，默认加粗显示，语义上比<b>更推荐。
<br>是换行标签，它是一个自闭合标签，没有结束标签。

超链接与图片

<a href="https://www.csdn.net" target="_blank">访问 CSDN</a> <img src="https://example.com/pic.jpg" alt="图片描述" width="300">

href表示链接地址。
target="_blank"表示在新标签页中打开。
img的src是图片地址，alt是图片加载失败时显示的替代文字，也有利于无障碍访问。
图片有width或height属性时可以控制显示尺寸，但更推荐在各场景下用 CSS 控制。

列表

<ul> <li>无序列表项</li> <li>无序列表项</li> </ul> <ol> <li>有序列表项</li> <li>有序列表项</li> </ol>

ul是无序列表，列表项前面是圆点。
ol是有序列表，列表项前面是数字序号。
列表标签非常适合用来做导航菜单、新闻列表等结构。

表单元素

<form> <input type="text" placeholder="请输入用户名"> <input type="password" placeholder="请输入密码"> <input type="email" placeholder="请输入邮箱"> <textarea placeholder="请输入备注"></textarea> <select> <option value="1">选项一</option> <option value="2">选项二</option> </select> <button type="submit">提交</button> </form>

表单是页面与用户交互的重要入口。input的type属性决定了输入类型，常见的取值有文本text、密码password、邮箱email、数字number、复选框checkbox、单选框radio等。

placeholder是占位提示文字，在输入框为空时显示灰色提示。

3.3 HTML 语义化

HTML 语义化是指用合适的标签表达内容含义，而不是全用<div>堆砌。比如：

<header>表示页头。
<nav>表示导航区域。
<main>表示页面主体内容。
<footer>表示页脚。
<section>表示一个区域。

语义化标签对搜索引擎更友好，也有利于屏幕阅读器理解页面，是前端开发的良好实践。

3.4 HTML 小结练习

写一个包含标题、段落、链接和表单的小页面：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <header> <h1>欢迎来到我的网站</h1> </header> <main> <p>这是一个简单的 HTML 页面，包含标题、段落、链接和列表。</p> <a href="https://www.csdn.net" target="_blank">去 CSDN 学习</a> <h2>我的技能</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </main> <footer> <p>版权所有 © 2025</p> </footer> </body> </html>

把代码保存为index.html并用浏览器打开，这就是你写的第一个完整页面。

4. CSS 核心语法：让页面变好看

HTML 负责内容，CSS 负责表现。一个页面如果只写 HTML，看起来就像毛坯房，加上 CSS 之后才具备设计感。

4.1 CSS 的三种引入方式

CSS 有三种引入方式，按推荐程度从低到高排列：

方式一：行内样式

<p style="color: red;">这段文字是红色</p>

直接写在标签的style属性里，优先级最高，但不利于维护，不推荐在项目中使用。

方式二：内部样式

<style> p { color: red; } </style>

写在 HTML 文件的<head>中，适合单页面小项目或演示场景。

方式三：外部样式（推荐）

<link rel="stylesheet" href="css/style.css">

将 CSS 代码独立存放为.css文件，再通过<link>引入。这种方式的优势是结构清晰、便于复用和缓存，是实际项目中的标准做法。

4.2 CSS 选择器

CSS 语法由“选择器 + 声明块”组成，声明块里是“属性: 值;”的键值对。选择器决定了“给谁设置样式”。

标签选择器

选中指定标签名的所有元素：

p { font-size: 16px; }

类选择器

类选择器以.开头，选中指定class的元素。一个元素可以有多个类名，多个元素也可以使用同一个类名：

<p class="highlight">这段文字会被高亮</p> <p class="highlight">这段文字也会被高亮</p>

.highlight { background-color: yellow; }

类选择器是实际开发中使用频率最高的。

ID 选择器

ID 选择器以#开头，选中指定id的元素。id在页面中应该是唯一的：

<p id="intro">这段文字是唯一的</p>

#intro { font-weight: bold; }

后代选择器

后代选择器用空格连接，选中某元素内部的所有匹配后代：

div p { color: gray; }

上面的代码表示选中div内部的所有p标签。

4.3 CSS 盒模型

盒模型是 CSS 中最重要的概念，没有之一。

每个 HTML 元素在页面上都可以看成一个矩形盒子，它由四部分组成：

内容（content）：元素的实际内容区域。
内边距（padding）：内容到边框之间的距离，是透明的。
边框（border）：围绕在内边距外的边框线。
外边距（margin）：元素与外部其他元素之间的距离。

.box { width: 200px; padding: 20px; border: 1px solid #ccc; margin: 10px; }

这里有一个经典问题：width: 200px是内容宽度，还是整个盒子的宽度？

答案是：在标准盒模型下，width只包含内容宽度，实际占用的总宽度是width + padding + border。所以上面的.box实际总宽度为200 + 20*2 + 1*2 = 242px。

为了让width直接等于元素的总宽度，可以使用：

* { box-sizing: border-box; }

border-box会把padding和border包含在设定的宽度内，这在布局中更加直观和可控，也是很多项目中的全局默认设置。

4.4 Flexbox 布局

页面布局是 CSS 的另一个核心难点。过去人们常用float布局，现在更推荐 Flexbox（弹性布局），因为它更简单、更强大。

把一个容器设置为display: flex，它就成为弹性容器，内部的子元素自动在一条轴线上排列。

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

.container { display: flex; justify-content: center; align-items: center; gap: 20px; } .item { width: 100px; height: 100px; background-color: #4a90e2; color: #fff; display: flex; justify-content: center; align-items: center; }

常用属性说明：

justify-content：控制主轴方向的排列方式，取值有flex-start、flex-end、center、space-between、space-around。
align-items：控制交叉轴的对齐方式，取值有stretch、flex-start、flex-end、center。
flex-direction：控制主轴方向，默认是row（水平），改为column可以垂直排列。
gap：设置子元素之间的间距，比传统的margin更简洁。

Flexbox 能把“水平垂直居中”这样过去很麻烦的事情变成一行代码：

.parent { display: flex; justify-content: center; align-items: center; }

4.5 常用文本与颜色样式

下面列举一些高频 CSS 属性供查阅：

body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 16px; color: #333; line-height: 1.6; } h1 { text-align: center; font-weight: bold; } a { text-decoration: none; color: #4a90e2; }

颜色可以使用十六进制（#ff6b6b）、RGB（rgb(255, 107, 107)）或颜色关键字（red）。十六进制是最常用的形式。

5. JavaScript 核心语法：让页面动起来

到了这一节，你开始接触真正的编程语言。JavaScript 的语法量并不小，但入门阶段只需要掌握几个核心概念，就能写出很多有意义的交互页面。

5.1 变量与数据类型

在 ES6（ECMAScript 2015）标准中，定义变量的推荐方式是let和const：

let score = 90; // 可以重新赋值的变量 const pi = 3.14159; // 常量，不可重新赋值 var oldWay = '不推荐'; // 老式写法，存在作用域问题

JavaScript 中的常见数据类型如下：

const name = '张三'; // 字符串 String const age = 25; // 数字 Number const isStudent = true; // 布尔值 Boolean const scores = [98, 87, 92]; // 数组 Array const person = { // 对象 Object name: '张三', age: 25 };

可以通过typeof查看变量的类型：

console.log(typeof 'hello'); // string console.log(typeof 123); // number console.log(typeof true); // boolean

5.2 函数

函数是一段可复用的代码块。我们看两个示例：

// 函数声明 function greet(name) { return '你好，' + name; } const result = greet('李四'); console.log(result); // 你好，李四

// 箭头函数（ES6 推荐写法） const add = (a, b) => a + b; console.log(add(3, 4)); // 7

函数在 JavaScript 中非常重要，因为事件处理、数据请求、数据处理都依赖函数来组织逻辑。

5.3 操作 DOM：最核心的交互能力

DOM（Document Object Model，文档对象模型）可以理解为浏览器对 HTML 结构的一棵对象树。JavaScript 通过操作 DOM 来改变页面内容和样式。

获取元素

// 根据 id 获取元素 const title = document.getElementById('title'); // 根据 class 获取元素列表 const boxes = document.getElementsByClassName('box'); // 使用 CSS 选择器获取第一个匹配元素（推荐） const firstBox = document.querySelector('.box'); // 获取所有匹配元素 const allBoxes = document.querySelectorAll('.box');

修改内容和样式

const title = document.getElementById('title'); title.textContent = '新的标题文字'; // 修改文本内容 title.style.color = 'blue'; // 修改样式 title.style.fontSize = '24px'; // 注意使用驼峰命名

事件监听

事件是 JavaScript 与用户交互的桥梁。“点击”、“输入”、“鼠标移动”都是事件。

const btn = document.getElementById('btn'); btn.addEventListener('click', function () { alert('按钮被点击了'); });

addEventListener是推荐的事件绑定方式，它比直接在标签上写onclick更灵活，同一个元素可以绑定多个事件处理函数。

5.4 条件判断与循环

条件判断和循环是所有编程语言共有的基础能力：

const score = 85; if (score >= 90) { console.log('优秀'); } else if (score >= 60) { console.log('及格'); } else { console.log('不及格'); }

const fruits = ['苹果', '香蕉', '橘子']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // forEach 写法更简洁 fruits.forEach(function (fruit) { console.log(fruit); });

5.5 JavaScript 小结练习

尝试在浏览器的 Console 面板中运行以下代码，观察输出：

const students = [ { name: '张三', score: 85 }, { name: '李四', score: 92 }, { name: '王五', score: 66 } ]; students.forEach(function (student) { if (student.score >= 70) { console.log(student.name + '：通过'); } else { console.log(student.name + '：未通过'); } });

这一步能帮你顺手巩固“对象数组遍历 + 条件判断 + 字符串拼接”这几个核心知识点。

6. 综合实战：3 小时做出一个完整页面

前面四节分别讲了 HTML、CSS、JavaScript 的基础知识。现在我们把三者串起来，做一个“个人待办清单”页面。这个项目结构简单，但完整覆盖内容、样式和交互。

6.1 功能需求

我们实现一个待办清单，需要支持以下功能：

输入框输入待办事项。
点击“添加”按钮，事项出现在列表中。
点击单个事项，可以标记为已完成（出现删除线）。
列表为空时给出提示文案。

6.2 项目结构

todo-demo/ ├── index.html ├── style.css └── main.js

6.3 编写 HTML 结构

文件路径：todo-demo/index.html

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的待办清单</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="app"> <h1>我的待办清单</h1> <div class="input-area"> <input type="text" id="todo-input" placeholder="请输入待办事项"> <button id="add-btn">添加</button> </div> <ul id="todo-list" class="todo-list"> <li class="empty-tip">暂无待办事项</li> </ul> </div> <script src="main.js"></script> </body> </html>

6.4 编写 CSS 样式

文件路径：todo-demo/style.css

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .app { width: 420px; background-color: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .app h1 { font-size: 24px; text-align: center; margin-bottom: 20px; color: #333; } .input-area { display: flex; gap: 10px; margin-bottom: 20px; } #todo-input { flex: 1; padding: 10px 14px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px; outline: none; } #todo-input:focus { border-color: #4a90e2; } #add-btn { padding: 10px 20px; background-color: #4a90e2; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; } #add-btn:hover { background-color: #357abd; } .todo-list { list-style: none; } .todo-list li { padding: 12px 14px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 10px; font-size: 14px; cursor: pointer; transition: background-color 0.2s; } .todo-list li:hover { background-color: #f9f9f9; } .todo-list li.completed { text-decoration: line-through; color: #999; background-color: #f0f0f0; } .empty-tip { text-align: center; color: #999; border: 1px dashed #dcdfe6 !important; cursor: default !important; }

这里包含了 Flexbox 布局、盒模型、伪类选择器和圆角阴影等知识点，可以对照前面章节复习。

6.5 编写 JavaScript 交互逻辑

文件路径：todo-demo/main.js

// 获取页面元素 const input = document.getElementById('todo-input'); const addBtn = document.getElementById('add-btn'); const todoList = document.getElementById('todo-list'); // 添加待办事项 function addTodo() { const text = input.value.trim(); if (text === '') { alert('请输入待办事项'); return; } // 移除“暂无待办事项”提示 const emptyTip = document.querySelector('.empty-tip'); if (emptyTip) { emptyTip.remove(); } // 创建列表项 const li = document.createElement('li'); li.textContent = text; // 点击切换完成状态 li.addEventListener('click', function () { li.classList.toggle('completed'); }); todoList.appendChild(li); input.value = ''; } // 绑定按钮点击事件 addBtn.addEventListener('click', addTodo); // 支持按回车键添加 input.addEventListener('keydown', function (event) { if (event.key === 'Enter') { addTodo(); } });

这段代码用到了事件监听、DOM 创建、字符串处理和 CSS 类名切换，是本项目的核心逻辑。

6.6 运行与验证

在todo-demo目录下，右键index.html，选择“打开方式”中的浏览器打开。也可以在 VS Code 中安装 Live Server 插件后，右键选择“Open with Live Server”。

预期效果：

页面最开始显示“暂无待办事项”。
输入文字并点击“添加”，事项出现在列表中。
点击事项文字，出现删除线，再点一次恢复。
输入为空时点击添加，会弹出提示。

如果页面没有报错，所有交互都正常，说明你已经成功完成了一个完整的前端小项目。

6.7 扩展思路

这个项目做完后，你可以尝试自己添加以下功能：

给每个事项增加“删除”按钮。
增加“全部完成”“清空列表”按钮。
使用浏览器的localStorage保存数据，刷新页面后数据不丢失。
给完成状态增加动画过渡效果。

这些扩展涉及的新知识都不复杂，非常适合作为练手方向。

7. 常见问题与排查思路

新手写代码时最容易遇到的问题是：代码照着写了，但页面就是不对。下面整理了几个高频问题，并给出通用的排查思路。

问题现象	常见原因	解决思路
HTML 页面中文乱码	缺少`<meta charset="UTF-8">`	在`<head>`中补充该标签，确保文件保存编码也是 UTF-8
CSS 样式没有生效	CSS 文件路径错误或没有被正确引入	打开开发者工具 Elements 面板，检查`<link>`标签路径；确认 class 名拼写一致
JavaScript 报`xxx is not defined`	变量名拼写错误，或代码在元素加载前执行	检查控制台报错位置；将`<script>`放到`body`末尾，或使用`DOMContentLoaded`事件
`getElementById`获取到 null	ID 拼写不一致，或脚本在元素之前执行	对比 HTML 中的 id 和 JS 中的 id；调整脚本位置
图片不显示	路径错误或图片文件不存在	使用相对路径时注意当前文件所在目录；检查`src`是否存在
CSS 样式被覆盖	选择器优先级问题	尽量避免使用行内样式；用更具体的选择器；检查样式引入顺序
点击按钮没有反应	事件绑定代码存在语法错误，或绑定未执行	打开 Console 面板查看报错；确认`addEventListener`的代码确实被执行

一个通用的排查顺序是：

打开浏览器开发者工具，切到 Console 面板，看有没有红色报错。
如果有报错，根据错误信息和行号定位到具体代码。
如果没有报错，切换到 Elements 面板，检查 DOM 结构和样式是否正常。
在 JavaScript 代码中添加console.log输出中间值，确认函数有没有执行、数据对不对。

掌握这个顺序，你就能独立解决大多数入门阶段的问题。

8. 学习建议与工程习惯

三个小时后，你已经能写一个完整的交互页面。但如果想进一步走向真实项目开发，有些工程习惯可以尽早培养。

8.1 手工敲代码

不要复制现成代码，也不要只看不动手。亲手敲一遍代码，你会发现很多“看懂了但写不出来”的地方。遇到问题时，先自己尝试解决，再查资料，记忆会更深刻。

8.2 遵循项目文件结构

学习阶段可以一个 HTML 文件搞定一切，但项目阶段要尽早按职责拆分文件：

project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── assets/ └── images/

这样分工明确，代码可维护性更强，也有利于多人协作。

8.3 注意命名规范

命名规范是代码可读性的基础：

HTML 的class命名使用小写单词加连字符，例如todo-list、input-area。
JavaScript 变量和函数使用驼峰命名，例如addTodo、todoList。
避免无意义命名，例如a、b、temp1，别人看不懂，过段时间你自己也看不懂。

8.4 善用浏览器开发者工具

开发者工具是前端工程师最常用的调试工具。除了查看报错，还可以：

在 Elements 面板临时修改 CSS，实时预览效果，确认方案后再改代码。
在 Console 面板直接执行 JavaScript，测试函数逻辑。
在 Network 面板查看资源加载状态和请求耗时。

8.5 理解而不是背代码

HTML 标签、CSS 属性和 JavaScript 方法非常多，没有人能全部背下来。正确的做法是掌握核心概念，然后用到什么查什么。常用的东西多用几次自然记住，不常用的知道去哪里查就够了。

8.6 保持学习节奏

入门之后，建议按下面顺序继续深入学习：

JavaScript 进阶：数组方法（map、filter、reduce）、对象操作、异步编程（Promise、async/await）。
工程化工具：Git 版本管理、Node.js 基础、npm 包管理。
现代前端框架：Vue 或 React，二选一为主即可。
周边能力：HTTP 基础、浏览器渲染原理、移动端适配、性能优化。

9. 总结

通过三个小时的学习，你已经掌握了前端开发的三个核心支柱：

HTML：用标签搭建页面内容。
CSS：用样式美化页面表现。
JavaScript：用代码实现页面交互。

你亲手完成了从零搭建一个可交互的待办清单页面，也了解了页面出问题后的通用排查思路。

前端学习没有捷径，但有清晰的地图。当你熟悉了基础知识，下一步就是大胆去写、去练、去折腾。把文章里的代码亲手敲一遍，再试着改一改、加一加功能，你会发现前端的成就感来得比自己预想中更快。