企业官网建设流程全解析

前端入门最常用到的三样技术就是 HTML、CSS 和 JavaScript。很多人第一次接触前端时，第一反应是先学框架、先配环境，结果在工具链里耗掉了大部分热情。实际上，浏览器本身就能运行前端三件套，你只需要一个文本编辑器和现代浏览器，就能从零写完一个能运行的页面。这篇教程把目标压缩在 3 小时里：前 45 分钟搭 HTML 结构，中间 60 到 75 分钟写 CSS 样式和布局，最后用一段 JavaScript 把页面变成可以交互的动态页面。

这 3 小时不追求把所有语法背完，也不涉及工程化工具。学完之后，你能独立写出一张“个人名片”页面：卡片居中显示，输入名字时标题同步变化，点击按钮能切换深色和浅色主题，页面上还有一个每秒刷新的时钟。这个案例虽然小，但已经覆盖了前端开发的完整闭环：内容结构、视觉呈现、行为交互。零基础读者只要按顺序动手敲、动手保存、动手刷新浏览器，都能完成。

适合这样学的人有两种：一是完全没有写过网页，想先确认自己是否适合前端开发的初学者；二是已经会用基础标签，但一直没把 HTML、CSS、JavaScript 串联起来的人。下面按小时拆分，每个小节结束都有自检点，建议不要跳到后面，而是每个小时都实际运行一遍。

1. 3小时入门，先建立 HTML + CSS + JS 的最小闭环

1.1 三件套为什么必须一起学

HTML、CSS、JavaScript 各自解决不同的问题，但它们只有组合起来，才构成一个完整的网页。

HTML 负责内容结构。标题、段落、图片、按钮、输入框，这些“页面里有什么”都由 HTML 描述。CSS 负责视觉表现。颜色、大小、间距、圆角、布局，这些“看起来是什么样”都由 CSS 控制。JavaScript 负责行为和动态数据。点击按钮、输入文字、请求数据、更新页面，这些“发生了什么变化”都由 JavaScript 驱动。

可以用一个并不完全准确但很好记的类比：HTML 是房间的墙体格局，CSS 是墙纸、地板和家具布置，JavaScript 是入住后按开关、调灯光、操作电器的动作。如果只学 HTML，页面像一张打印出来的传单；加入 CSS 后，传单变成了有设计感的卡片；再加入 JavaScript，卡片才有了响应能力。

这也解释了为什么很多零基础读者单独看 CSS 教材会觉得枯燥。因为 CSS 的选择器、属性、布局规则，只有挂在一个具体的 HTML 结构上才有意义。单独学某个知识点容易忘记，绑定到同一个案例里反复使用，才会真正记住。

1.2 三小时时间表：每一小时完成什么

3 小时听起来很短，但分配到具体任务后是够用的。关键是不要把时间浪费在“先把所有标签背下来”或“先把所有属性背下来”上。下面这张时间表是本文的执行主线：

每个小时结束都要刷新浏览器验证。如果某个阶段卡住了，不要继续往下看，先解决眼前的问题。入门阶段最大的误区是“先记住全部语法，再开始写”，实际上应该反过来：先写出最小页面，遇到问题再去查语法。

这种单文件学习方式只适合学习环境。真实项目还要考虑目录组织、文件缓存、性能压缩、浏览器兼容等问题，但那些不是入门阶段的任务。明确区分学习环境和生产环境，是为了让初学者不被工具链吓倒。先把一个文件跑通，再逐步接触多人协作和发布部署。

1.3 本教程的最终产出物

整个教程围绕同一个案例推进，最终会得到一份名为index.html的文件。它包含三个功能：

• 输入框：在输入框里输入名字，页面标题会实时变成输入的内容。
• 按钮：点击后页面在深色和浅色主题之间切换。
• 时间：页面上显示当前时间，每秒钟更新一次。

这个案例是刻意设计成单文件的。单文件对新手最友好，因为它不需要考虑模块、打包、路由这些前缀知识，只要保存、双击就能运行。等完整案例跑通后，第 7 节再把它拆成index.html、style.css、script.js三个文件，提前感受前端工程化的基本结构。这样安排既降低了起步门槛，又不会让你停在“只会写一个文件”的层次。

2. 第 1 小时：把 HTML 结构写到浏览器能读懂

2.1 一页 HTML 的最小结构

在文本编辑器里新建一个文件，命名为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> </head> <body> <h1>你好，前端</h1> </body> </html>

这是 HTML 文档的标准骨架。<!DOCTYPE html>的作用是告诉浏览器“请按现代标准模式解析这个页面”，它不是标签，而是文档类型声明。<html lang="zh-CN">声明页面语言是简体中文，浏览器翻译、搜索和语音引擎都会参考这个属性。<head>里放的是不直接显示在页面上的配置：字符集、页面标题、后续的 CSS 和 JS 引用。<body>里放的是用户能看到的全部内容。

<meta charset="UTF-8">是中文网页最容易忽略的一行。如果没有它，浏览器可能用错误编码解析页面，中文会显示成乱码。<meta name="viewport" ...>主要影响移动端显示，入门阶段可以先保留。<title>会显示在浏览器标签页上，搜索引擎也会把它作为标题。

2.2 最常用的 10 个标签，先记住这些

HTML 标签非常多，但入门只需要先掌握下面这一组。它们足以支撑一个信息型页面的基本结构。

注意区分块级元素和行内元素。<div>、<p>、<h2>默认独占一行，适合搭结构；<span>、<a>默认排在同一行里，适合在文本中局部修饰。后面写 CSS 时，这个区别会影响display和布局行为。

把这些标签组合起来，形成本文最终案例的 HTML 结构：

<div class="card"> <div class="avatar">H</div> <h2 id="name">前端新人</h2> <p class="desc">这是我的第一张网页名片</p> <input id="nameInput" type="text" placeholder="输入你的名字"> <button id="themeBtn" type="button">切换深色主题</button> <div class="time" id="timeText"></div> </div>

这段代码先保存在文件里，后面 CSS 和 JavaScript 都要围绕它来做。此时直接打开浏览器，页面会很朴素，但结构已经存在了。这正是学 HTML 时的合理状态：先保证内容清晰，而不是急着让它好看。按钮上的type="button"值得注意，它明确告诉浏览器这是一个普通按钮，不会触发表单提交。虽然当前页面没有表单，但养成加上type的习惯，可以避免以后把按钮放进表单时页面被莫名刷新。

2.3 class 和 id：CSS 与 JavaScript 的连接点

上面的结构里反复出现了class和id。它们是 HTML 给元素起的“钩子”，后续要么被 CSS 选中来改样式，要么被 JavaScript 选中来改内容。

class表示“一类元素”，同一个页面里可以重复。CSS 中写一个类选择器，所有带这个类的元素都会生效。比如.card会匹配 HTML 里class="card"的元素。id表示“页面里唯一的元素”，同一个页面中不要出现两个相同的id。JavaScript 里要用document.querySelector('#name')这种写法时，id是快速定位的依据。

命名方面，推荐使用小写字母和连字符，例如card-title、name-input，不要写成NameInput或name_input。虽然浏览器不强制，但统一风格可以降低后期维护成本。这个习惯从第一行代码就要建立。

2.4 本小时自检：结构正确比样式好看更重要

第 1 小时结束时，检查三个点。

第一，页面能打开，并且显示卡片的文字内容。第二，标题、段落、输入框、按钮的位置符合直觉。第三，标签都闭合了，没有出现嵌套错乱。检查标签最简单的办法是看缩进和层次：<div>里面的内容要往里缩进一层，读到</div>时应该和对应的<div>对齐。

常见的卡点有两个。一是文件保存成了.txt，浏览器打开时只能看到源代码。解决方法是记事本保存时文件名带.html后缀，或者直接修改文件扩展名。二是标签漏写了反括号，例如<div>写成了<div，页面后半段会全部失效。这类问题在入门阶段非常常见，不用背，多写几次就能形成肌肉记忆。

3. 第 2 小时：用 CSS 完成样式与基础布局

3.1 CSS 的三种写法，学习阶段推荐哪一种

CSS 可以写在三个位置：标签的style属性里、页面的<style>标签里、外部的.css文件里。

<!-- 方式一：内联样式，直接写在标签上 --> <p style="color: red;">红色文字</p> <!-- 方式二：内部样式，写在 head 中 --> <style> .desc { color: gray; } </style> <!-- 方式三：外部样式，通过 link 引入 --> <link rel="stylesheet" href="style.css">

内联样式最直接，但它只作用于当前标签，无法复用。外部样式表最适合生产环境，因为多个页面可以共用一份文件，浏览器还能缓存它。入门阶段推荐用内部样式：代码集中，方便对照，不涉及文件路径问题。等综合案例完成后，第 7 节再把样式拆成外部文件。实际项目中不要让页面堆大量内联样式，否则后续换主题、换配色会非常痛苦。

3.2 选择器：样式不生效的头号原因

选择器决定 CSS 规则应用在哪些元素上。入门阶段掌握四类就够用。

优先级可以简单理解为：id高于class，class高于标签；写在后面且优先级相同的规则会覆盖前面的规则。入门阶段不需要死记优先级计算规则，但当一条样式“应该生效却没生效”时，先按这个顺序排查。在浏览器开发者工具的 Styles 面板里，被划掉的样式通常会显示来源，一眼就能找到覆盖来源。

这里要特别提醒：CSS 属性写错通常不会报错，只会被浏览器忽略。比如border-radius误写成border-radius：16px，也就是错用了中文冒号，或者把圆角写在不存在的属性上，页面不会有任何提示。出现样式问题时，优先怀疑拼写和分号，再怀疑选择器。

3.3 盒模型和 Flex：入门阶段先掌握这两块布局能力

布局是新手最容易放弃的部分，因为概念太多。先掌握盒模型和 Flex 两个核心就够用了。

盒模型描述每个元素在页面中占用的空间：从内到外依次是内容区、内边距padding、边框border、外边距margin。padding控制内容和边框之间的空隙，margin控制元素和其他元素之间的距离。在调试工具里选中任意元素，浏览器会用不同颜色把这几块区域标出来，非常直观。

Flex 是目前最常用的现代布局方式之一，特别适合处理“一排、一列、居中、间距”这类需求。在父元素上设置display: flex，它的直接子元素就会按照主轴排列。

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

justify-content控制主轴方向的排列，align-items控制交叉轴方向的排列。当flex-direction默认是row时，justify-content: center就是水平居中，align-items: center就是垂直居中。这个组合是“让一个元素在屏幕上居中”的最简单方案。如果想让卡片内部变成纵向排列，就设flex-direction: column。

入门阶段记住下面这张属性表，足以应对大多数基础布局。

justify-content: space-between是另一个高频用法，它可以让一行的两个子元素分别贴在左右两端，中间留出空隙。gap可以避免用多个margin去拼间距，代码会清爽很多。当布局越来越复杂后，再学 Grid 和定位都不会晚。

3.4 给卡片加上样式：一步步理解每个属性

在第 2 节的 HTML 结构基础上，加上下面的样式，保存后刷新浏览器：

body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f5f7fa; } .card { width: 340px; padding: 24px; border-radius: 16px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: center; } .avatar { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; background: #4f8cff; color: #ffffff; font-size: 28px; line-height: 70px; }

min-height: 100vh让页面至少和浏览器窗口一样高，配合 Flex 才能让卡片在屏幕中央。margin: 0清掉body默认的外边距，避免页面四周出现白边。box-shadow的第一个参数是水平偏移，第二个是垂直偏移，第三个是模糊半径，第四个是颜色；这里做成淡淡的阴影，让卡片从背景中浮起来。

line-height: 70px和.avatar的高度相等，可以让单行文字在容器中垂直居中。这个技巧只适合内容不超过一行的元素，内容变多后会出问题。头像里的蓝色圆形，如果以后换成图片，仍然可以用同一个结构。border-radius: 50%只是把方形变圆的通用写法，当元素宽度和高度相同时效果是正圆。

3.5 本小时自检：用开发者工具验证样式

第 2 小时结束时，卡片应该已经能居中显示，输入框和按钮也被包在卡片内。此时按 F12 打开开发者工具，切到 Elements 面板，选中页面中的.card元素。右侧 Styles 面板会列出所有应用到该元素的规则。如果规则被浏览器忽略，样式文字旁边会出现黄色警告。看到警告后，优先检查属性名是否拼错、值是否合法、结尾分号是否写成中文符号。

不要只凭肉眼判断“样式是否生效”，要把开发者工具当成一面镜子。它能告诉你：这条规则来自哪个文件、是否被其他规则覆盖、盒模型占用空间到底是多少。入门阶段会看 Elements 面板，已经解决了很大一部分 CSS 问题。

4. 第 3 小时：让 JavaScript 给页面增加交互

4.1 从“结构、样式”到“行为”

HTML 负责静态内容，CSS 负责静态样式，JavaScript 则负责让页面“动起来”。这个“动”不一定是动画，也包括三种最常见的交互：用户点击按钮后发生动作、用户输入文字后页面同步更新、页面每隔一段时间自动刷新数据。

JavaScript 操作页面的方式可以归纳成一个循环：先找到目标 HTML 元素，再对它绑定一个事件，最后在事件发生后修改元素的内容、样式或结构。例如，点击“切换深色主题”按钮时，要给整个页面切换背景色，就必须先找到按钮，再监听它的点击事件，然后修改body的类名或样式。

这里会提到 DOM 这个概念。DOM 是浏览器把 HTML 解析成的对象树，树上的每一个节点都对应页面里的元素。JavaScript 不能直接“看见” HTML 文本，它操作的是这棵内存里的树。刚开始不用读太多理论，先记住：querySelector一类方法负责从 DOM 树里找元素，改textContent、style、classList负责把变化写回页面。

4.2 选择元素、监听事件、修改内容

用三个代码片段演示这一组核心操作。先通过id选择元素：

const themeBtn = document.querySelector('#themeBtn'); themeBtn.addEventListener('click', function () { document.body.classList.toggle('dark'); });

const是声明常量的关键字，在这里意味着该变量在赋值后不能再被整体替换，但元素本身的内容仍然可以修改。document.querySelector是“从文档中查找第一个匹配选择器的元素”的方法。addEventListener接收两个参数：事件类型和触发时要执行的函数。classList.toggle('dark')会在元素的 class 列表里添加或移除dark，第一次点击添加，第二次点击移除。

用于实时同步输入框内容时，用input事件：

const nameEl = document.querySelector('#name'); const nameInput = document.querySelector('#nameInput'); nameInput.addEventListener('input', function () { const value = nameInput.value.trim(); nameEl.textContent = value === '' ? '前端新人' : value; });

trim()去掉输入内容首尾空格，避免用户只输入空格时把标题也变成空格。textContent用来替换元素里的文本，它会把内容当纯文本处理。不要用innerHTML直接拼接用户输入，因为innerHTML会把字符串当作 HTML 解析，一旦用户输入包含特殊字符，可能带来安全问题。入门阶段养成用textContent的习惯，是最稳妥的。

这里还有一个非常实用的调试方法：在事件回调里加一行console.log(value)，然后打开 Console 面板查看输出。console.log不会影响页面运行，却能让你确认事件有没有触发、变量值到底是什么。代码行为不符合预期时，先在关键位置打印关键值，比盲目改代码有效得多。

4.3 实时反馈：读取输入并更新时间

把当前时间显示到页面里，需要三步：拿到当前时间、格式化成时:分:秒、把文本写入页面。为了实现每秒更新，还要用一个定时器。

const timeText = document.querySelector('#timeText'); function updateTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); timeText.textContent = '当前时间：' + hours + ':' + minutes + ':' + seconds; } updateTime(); setInterval(updateTime, 1000);

new Date()创建当前时间对象，getHours()、getMinutes()、getSeconds()分别取时、分、秒。padStart(2, '0')的作用是让 9 显示成 09，保证格式整齐。setInterval的第一个参数是要重复执行的函数，第二个参数是毫秒间隔，1000 毫秒等于 1 秒。首次调用updateTime()是为了避免页面打开后第一秒显示空白，定时器只在 1 秒后才触发。

定时器的时间误差在入门阶段可以忽略。当后面学到异步和性能优化时，再考虑setInterval可能因浏览器节流而在后台不准确的问题。当前案例的主要目标是让读者理解“用数据驱动界面”的表达方式。

4.4 脚本放哪里，以及为什么总是报 null

这是 JavaScript 新手最常见的报错：Cannot read properties of null (reading 'addEventListener')。产生原因通常是脚本执行时，目标元素还没被解析出来。

<body> <div>内容</div> <script> const card = document.querySelector('.card'); card.addEventListener('click', function () {}); </script> </body>

浏览器从上往下解析 HTML。如果<script>放在了<head>里，而它立刻去查找还在<body>里的.card，此时.card还不存在，querySelector就会返回null。解决办法有两个。一是把<script>放在<body>的最底部，保证所有 HTML 都解析完再执行脚本。二是使用defer属性加载外部脚本，让脚本在文档解析完成后执行。入门阶段最简单的是第一种：脚本放</body>之前。

另一个高频问题是拼写错误。浏览器的方法名区分大小写，addEventListener不能写成addeventlistener。querySelector也不能写成querySelectorAll然后当成单个元素使用。当交互毫无反应时，先看控制台有没有红色报错，再去检查事件名和选择器。

4.5 本小时自检：控制台没有红色报错

第 3 小时结束时，三个交互都应该能工作：输入名字时卡片标题同步变化；点击按钮时页面背景和卡片颜色切换；当前时间每秒刷新。打开 F12 的 Console 面板，如果没有任何红色报错，说明脚本语法和查找逻辑基本正确。

此时建议主动做两个小改动来测试理解程度。第一，把按钮的点击事件从“切换深色主题”改成“点击后弹出 alert 提示”，确认事件绑定本身没被误解。第二，给多个元素加上同一个 class，再用querySelectorAll配合循环修改样式，理解 class 的复用性。能完成这两个小改动，说明这一小时的投入没有白费。

5. 最后 15 分钟：把三件套合成一个可运行的综合案例

5.1 案例目标与验收标准

本案例不再拆成不同阶段，而是给出一份完整的index.html。验收标准有四条：

• 页面打开时有一张居中显示的个人名片，背景和文字都能看清。
• 在输入框中输入文字，卡片标题立即变成输入内容；清空输入框后，标题恢复默认文字。
• 点击按钮，页面在深色与浅色主题之间切换，按钮文字同步变化。
• 页面上的时间每秒刷新一次。

这个案例综合了三件套的核心用法：HTML 提供结构和钩子，CSS 提供样式和布局，JavaScript 提供事件、取值、定时器和 DOM 修改。

5.2 完整代码：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>3小时前端入门小案例：个人名片</title> <style> :root { --bg: #f5f7fa; --card-bg: #ffffff; --text: #222222; } body.dark { --bg: #1e1e1e; --card-bg: #2d2d2d; --text: #eeeeee; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; transition: background 0.3s; } .card { width: 340px; padding: 24px; border-radius: 16px; background: var(--card-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: center; } .avatar { width: 70px; height: 70px; margin: 0 auto 12px; border-radius: 50%; background: #4f8cff; color: #ffffff; font-size: 28px; line-height: 70px; } input { width: 70%; margin-top: 12px; padding: 8px 10px; border: 1px solid #cccccc; border-radius: 6px; } button { display: block; margin: 12px auto 0; padding: 8px 18px; border: none; border-radius: 6px; background: #4f8cff; color: #ffffff; font-size: 14px; cursor: pointer; } .time { margin-top: 12px; font-size: 14px; opacity: 0.7; } </style> </head> <body> <div class="card"> <div class="avatar">H</div> <h2 id="name">前端新人</h2> <p class="desc">这是我的第一张网页名片</p> <input id="nameInput" type="text" placeholder="输入你的名字"> <button id="themeBtn" type="button">切换深色主题</button> <div class="time" id="timeText"></div> </div> <script> const nameEl = document.querySelector('#name'); const nameInput = document.querySelector('#nameInput'); const themeBtn = document.querySelector('#themeBtn'); const timeText = document.querySelector('#timeText'); nameInput.addEventListener('input', function () { const value = nameInput.value.trim(); nameEl.textContent = value === '' ? '前端新人' : value; }); themeBtn.addEventListener('click', function () { document.body.classList.toggle('dark'); const isDark = document.body.classList.contains('dark'); themeBtn.textContent = isDark ? '切换浅色主题' : '切换深色主题'; }); function updateTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); timeText.textContent = '当前时间：' + hours + ':' + minutes + ':' + seconds; } updateTime(); setInterval(updateTime, 1000); </script> </body> </html>

把这段代码保存成index.html，双击打开即可运行。如果暂时看不明白 CSS 变量，不要紧，只要知道:root里定义了三套颜色值，body.dark里把三套颜色值换成了深色方案，页面上的所有var(--bg)、var(--card-bg)、var(--text)引用都会跟着变。这是一种非常轻量的主题切换方式，入门时用它理解“变量”和“类似 class 的开关”很合适。

5.3 代码拆解：三件套如何配合

在这个案例里，三件套的配合关系非常清晰。

HTML 定义了元素的钩子：.card、.avatar、#name、#nameInput、#themeBtn、#timeText都是 CSS 或 JavaScript 的操作目标。CSS 负责初始样式和主题变量，同时通过.card、body.dark这样的选择器，把样式变化挂到 body 的类名上。JavaScript 负责添加事件监听、读取输入、切换类名、更新时间。

可以把类名和id理解成三部分代码的“接口”。HTML 不负责管样式，也不负责管行为；CSS 只负责根据这些类名加载样式；JavaScript 只负责操作这些元素。三者各司其职，页面仍然能协同工作，这就是前端代码组织的基本方式。

5.4 运行与验证：从双击到控制台

创建文件后，双击index.html，浏览器会在地址栏显示file:///路径/index.html，这是正常的本地文件模式。逐个验证四条验收标准。如果在切换主题时页面背景变化了，但按钮文字没有变，检查themeBtn.textContent那两行是否写反。如果输入名字后标题没有变化，先在 Console 里看是否出现null相关报错。

注意：不要只验证页面“能打开”，还要把三个交互都点一遍。能打开只说明静态资源正常，交互正常才能证明 JavaScript 脚本发生效。

如果完全没有任何响应，优先按这个顺序排查：第一，控制台有没有红色错误；第二，script标签是否在body底部；第三，querySelector里的字符串是否和 HTML 中的id完全一致；第四，事件名是input、click，还是被误写成了别的。

6. 零基础最容易踩的坑：按现象排查

6.1 高频问题排查表

入门阶段遇到报错，不要慌乱，多数问题都集中在下面几种现象里。

这张表可以直接当作排错手册。以后做更多页面时，如果遇到相似现象，先回来对照原因，比反复刷新浏览器更有效。

除表格里的内容之外，还要学会通过 Console 的错误文本判断问题类型：

• xxx is not defined：变量名拼错，或在当前作用域里不存在。检查变量声明和拼写。
• Cannot read properties of null：查不到目标元素。检查querySelector的选择器是否和 HTML 中的 class 或 id 一致，再检查脚本执行顺序。
• Unexpected token：语法错误。通常是因为缺少括号、多了分号、或把中英文符号混用了。

这三种错误占了入门阶段 JavaScript 报错的大部分。把错误信息复制到搜索引擎之前，先尝试自己读一遍，很多时候问题就在英文提示里已经指出。

6.2 F12 开发者工具：入门阶段最重要的调试工具

现代浏览器都内置了开发者工具，快捷键是 F12，也可以右键页面元素选择“检查”。入门阶段用三个面板就够了。

Elements 面板显示当前页面的 DOM 结构。在左侧点选元素，右侧会看到它的盒模型、类名、属性和全量样式。这里的“样式被划掉”通常意味着它被优先级更高的规则覆盖，或者不是最终生效值。Console 面板显示 JavaScript 的日志和错误。红色报错是首先要解决的问题；如果脚本里有console.log，也会在这个面板输出变量值，方便逐步定位问题。Network 面板显示页面加载的每一个资源，图片、CSS、JS 的加载状态和耗时都能看到，主要用于排查路径和资源加载失败。

建议从第一天起就形成习惯：遇到问题先打开 F12，而不是反复刷新页面或直接改代码。开发者工具能把“看不见的问题”变成“看得见的线索”。

6.3 每完成一个练习都过一遍这套检查清单

把下面这张清单当作自测工具。每写一个页面，都逐项检查，不要跳过。

• 页面能正常打开，没有白屏和乱码。
• HTML 结构没有漏闭合标签，语义没有严重滥用。
• CSS 中需要应用的样式都在 Elements 面板中被正确解释。
• 页面在常见的 1366 或 1920 宽度下布局没有明显错乱。
• 所有交互功能都能完成一次完整操作。
• F12 的 Console 面板没有红色报错，也没有大量黄色警告。
• 图片、CSS、JS 文件名和路径拼写一致。
• 代码缩进清楚，class 和 id 命名可读。

入门阶段的“完成”不等于“能显示”，而是在完成以上检查后仍能正常使用。用这套标准判断自己的练习结果，比“跟着教程抄一遍”更能反映真实掌握程度。

7. 3 小时之后，下一步该怎么走

7.1 把单文件拆成 HTML、CSS、JS 三个文件

单文件适合快速验证，但实际项目几乎不会把全部代码写在一个文件里。从下一份练习开始，可以拆成三个文件。

<!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="card"> ... </div> <script src="script.js"></script> </body> </html>

<link rel="stylesheet" href="style.css">引入样式文件，<script src="script.js"></script>引入脚本文件。保持三个文件在同一个目录下，路径就不会出问题。外部脚本还可以加上defer属性放在<head>里，浏览器会等文档解析完成后再执行脚本。一开始先沿用“脚本放 body 底部”的方式，熟悉之后再用defer。

拆文件这一步看似简单，实际上包含重要的工程思想：内容、表现、行为分离。三种职责各归各的文件后，你会更容易定位问题：样式有问题去看 CSS，行为有问题去看 JS。这也是 Vue、React 这类框架出现前，原生前端最常用的一种组织方式。

7.2 接下来必须补齐的四个基础知识

3 小时只是起点，后面至少要补齐四个方向。

第一，HTML 的语义化表单和多媒体。熟悉header、nav、main、section、footer等语义标签，学会完整的表单写法。第二，CSS 的盒模型细节、相对单位和响应式。重点练习px、rem、百分比的差异，理解媒体查询，掌握 Grid 的基本用法。第三，JavaScript 的数据类型、函数、数组和对象。没有这些基础，写复杂交互时会非常吃力。第四，浏览器调试和代码组织。会看错误堆栈、会打断点、会拆分函数，会让开发效率明显提升。

框架可以在具备原生基础后再接触。直接跳过三件套去学框架，遇到问题时往往不知道到底是框架的问题，还是基础 JavaScript 的问题，排查起来会很困难。

7.3 用重写而不是复制的方式继续练习

学习前端最有价值的方式不是“保存别人的代码”，而是合上教程，自己从头再写一遍。每写完一遍，把代码删掉或另立新项目，再试一次，直到不再需要参考也能写出完整的index.html。

建议接下来的两周做三个练习：

• 制作一份个人简历页面：需要一个头部、一个项目列表、一个邮箱链接。
• 做一个待办清单：至少支持新增、删除、标记完成三条逻辑。
• 做一个简易计算器：支持加减乘除和清零。

这三个练习分别覆盖结构分层、列表渲染、表单交互、数组操作和事件处理，比继续看教程更能检验能力。

遇到报错时，先读一遍英文错误提示，再把错误信息复制到搜索引擎，最后回到 F12 的 Console 和 Elements 面板核对。3 小时建立的这套最小闭环，会在后续每一次练习中继续发挥作用。真正决定你走多远的，不是记了多少标签和属性，而是能不能独立完成“写页面、看报错、改代码、再验证”这个循环。