企业官网建设流程全解析

零基础学前端，几乎每个人都会在同一个地方卡住：不是代码写不出来，而是不知道从哪里开始。

打开招聘网站，前端岗位的要求里写着 Vue、React、TypeScript、工程化；打开学习平台，热门课程又推荐你先学 HTML、CSS、JavaScript。两边信息一冲撞，新手很容易产生一个错误判断——“反正框架才是吃饭的本事，HTML 和 CSS 随便看看就行”。

这个想法会带来很直接的后果：学了两周 Vue，连页面为什么渲染不对都找不到原因。因为你看不懂浏览器到底把标签解析成了什么结构，也看不明白一个盒子为什么撑不开、一张图片为什么对不齐。

HTML5 和 CSS3 确实是前端学习路径里最基础的一环，但它不是“随便看看就能跳过”的东西。从 2026 年的视角回头看，现代 CSS3 的能力边界已经比十年前大得多：Flexbox 和 Grid 能完成绝大多数布局，变量让你不用借助预处理器也能维护样式，媒体查询和容器查询让响应式设计变成标配。换句话说，地基不仅没有变矮，反而因为上层建筑越来越高，显得更加重要。

这篇文章会用一套完整的保姆级流程，带零基础读者从 HTML5 的标签语义出发，理解 CSS3 的核心布局原理，最后亲手完成一个可以在浏览器里直接打开的个人主页。读完你会有三个收获：第一，明白 HTML5 和 CSS3 各自负责什么，不再混淆；第二，掌握从空白页面到完整页面的开发流程；第三，遇到样式不生效、布局错乱时，知道第一步该看哪里。

1. 零基础学前端，为什么第一站必须是 HTML5+CSS3

很多人对 HTML 和 CSS 有一个误解，认为它们“不算编程语言”，所以不重要。这句话只说对了一半。

HTML（HyperText Markup Language）是一种标记语言，负责描述网页的内容结构；CSS（Cascading Style Sheets）是一种样式表语言，负责描述网页的视觉呈现。它们确实不像 JavaScript 那样有变量、函数、循环，但在浏览器渲染网页的过程中，它们是第一层和第二层。没有结构，脚本无处安放；没有样式，脚本渲染出的内容也无法阅读。

在实际项目中，HTML5 和 CSS3 的价值体现在三个地方：

第一，它们是浏览器直接识别的语言。无论你用什么框架，最终打包出来的产物一定是 HTML、CSS、JavaScript 三件套。框架只是在帮你“生成”这些代码，而不是替代它们。

第二，它们是排查问题的第一现场。页面上一个按钮偏了、一个背景色没出来、一个区域高度异常，多数时候问题出在 CSS 的盒模型、选择器优先级或者 HTML 的标签嵌套上。如果你看不懂浏览器开发者工具里展示的 HTML 结构和 CSS 规则，后续学任何框架都会像蒙着眼睛走路。

第三，它们的现代化特性正在承接越来越多的业务复杂度。过去一些必须用 JavaScript 才能实现的交互，现在用 CSS3 的过渡、变换、动画就能完成；过去依赖于框架栅格系统的布局，现在 Grid 一行代码就能做好。这意味着，精通 HTML5 和 CSS3 的开发者在做项目时，写出的代码更简洁、性能更好。

所以，零基础学习者不需要一开始就去纠结“选 Vue 还是 React”。正确顺序是：先用 HTML5 + CSS3 把静态页面做好，再进入 JavaScript 阶段，最后再来选择框架。地基打不牢，楼层越高越危险。

为了照顾没有任何基础、第一次写代码的读者，下面两章会把 HTML5 和 CSS3 的核心概念拆开讲清楚。已经有一定基础的读者，可以直接跳到第 4 章，从环境搭建和实战案例开始看。

2. HTML5：从“文档”到“应用”的标记语言

2.1 HTML 到底是什么

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> <h1>你好，前端</h1> <p>这是我用 HTML 写的第一个页面。</p> </body> </html>

这段代码里：

• <!DOCTYPE html>声明文档类型，告诉浏览器按现代标准解析页面。
• <html>是文档根元素，lang="zh-CN"表示页面主要语言是中文，对 SEO 和无障碍访问有帮助。
• <head>存放页面的元信息，比如字符编码、viewport 设置、标题，这些内容不会直接显示在页面上。
• <meta charset="UTF-8">指定字符编码，防止中文乱码。
• <meta name="viewport">告诉移动端浏览器如何缩放页面，是响应式设计必不可少的一行。
• <body>里才是用户可见的内容。

建议零基础读者先记住一句话：head是给浏览器看的，body是给用户看的。

2.2 HTML5 带来的关键变化

HTML5 是 HTML 的第五个主要版本，但它并不是一次简单的“数字升级”。它的核心变化是把网页从“文档”推向了“应用”。

比如，HTML5 新增了<video>和<audio>标签，让浏览器可以不依赖 Flash 播放视频和音频；新增了<canvas>用于绘制图形；新增了表单控件类型和验证属性，比如type="email"、required，让表单校验不需要额外写 JavaScript。

但这些功能在 2026 年的今天回头看，都已经成为所有现代浏览器的默认能力。真正对初学者影响最深的是一个概念：语义化。

2.3 语义化标签与页面结构

在 HTML5 之前，开发者想做一个导航栏，通常会用一堆<div>拼起来，再通过id或class把结构区分开。HTML5 引入了语义化标签，让结构本身就有含义：

<!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> <header>页面头部，通常放 Logo 和导航</header> <nav>导航区，放一组链接</nav> <main> <article> <h2>文章标题</h2> <p>文章内容……</p> </article> <aside>侧边栏，放相关推荐或广告</aside> </main> <footer>页脚，放版权信息</footer> </body> </html>

这套结构的好处很明确：浏览器、搜索引擎、屏幕阅读器都能一眼识别出页面各区域的功能。搜索引擎对语义清晰的页面更友好，也就是常说的 SEO 利好；屏幕阅读器可以把盲人用户的浏览体验做得更好；团队成员维护代码时，看到<header>就知道是头部，不需要再猜<div id="top">到底是干嘛的。

对于零基础学习者，建议先记住六个最常用的语义化标签：header、nav、main、article、section、footer。但也不要机械地理解为“每个页面都必须全部用上”，语义化的核心是“在合适的位置用合适的标签”，而不是套模板。

2.4 块级元素与行内元素

HTML 标签默认有两种常见的显示方式，初学者一定要区分：

理解这个分类，是为了解释为什么很多时候布局表现为“一个元素自动跑到下一行”。这是块级元素的默认行为，不是 bug。

同时也要提醒，HTML5 对标签的定义已经不完全等同于“块级”和“行内”。CSS 的display属性可以改变一个元素的显示方式。比如给<span>设置display: block，它就会变成块级行为。所以，块级和行内更像是一种“默认状态”，而不是“永恒属性”。

3. CSS3：模块化之后的样式系统

3.1 CSS 的作用与基本语法

CSS 负责告诉浏览器“页面长什么样”。它的基本语法由两部分组成：选择器和声明块。

/* 选择器：选中页面上的元素 */ p { /* 声明：属性: 值; */ color: #333; font-size: 16px; }

在 2026 年的视角下，CSS 已经发展为一个模块化、持续迭代的标准体系。CSS3 是其中影响最大的一次版本跨度，它把庞大的样式系统拆分成多个独立模块，比如选择器、盒模型、背景、边框、动画、多列布局、Flexbox、Grid 等。每个模块可以独立更新，因此现代浏览器对 CSS 特性的支持不是“整体支持”，而是“按特性支持”。

对初学者来说，不需要了解所有模块，优先掌握四块内容就够了：选择器、盒模型、Flexbox/Grid 布局、媒体查询。

3.2 选择器：先学会这四类

选择器决定“样式作用在谁身上”。零基础阶段先把四种最常用的用熟：

再补充一个优先级规则，这个规则能帮你解释大量“为什么样式没生效”的问题：

!important> 内联样式 > ID 选择器 > 类选择器 > 标签选择器

如果两个同类选择器冲突，后写的生效；如果不同类型的选择器冲突，优先级高的生效。这个规则在排错时非常有用。

3.3 盒模型：布局最重要的一环

盒模型是 CSS 布局最基础也最容易出错的概念。浏览器会把页面上的每个元素都看成一个矩形盒子，这个盒子从内到外依次是：

content（内容区）→ padding（内边距）→ border（边框）→ margin（外边距）

初学者经常遇到的问题是：给一个元素设置了width: 300px，加上padding: 20px和border: 5px，结果实际占用的宽度变成了 350px。这是因为默认的box-sizing: content-box下，width只包含内容区。

解决方案是在全局样式中加一行：

* { box-sizing: border-box; }

border-box表示宽度包含内容区、内边距和边框。这样写布局时，你设置的width就是元素实际占据的宽度，便于控制。绝大多数现代前端项目都会默认使用这个设置。

3.4 Flexbox 与 Grid：布局的两大主力

CSS3 真正改变前端开发体验的，是 Flexbox 和 Grid 的出现。

Flexbox 适合一维布局，也就是排成一行或排成一列的场景。典型应用是水平居中、垂直居中、导航栏分布、按钮组排列。

.container { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ gap: 16px; /* 子元素间距 */ }

Grid 适合二维布局，也就是同时处理行和列的复杂场景。典型应用是页面整体骨架、卡片网格、后台管理布局。

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

上面这段代码表示把容器分成三列，每列宽度相等，列间距 20px。1fr是 Grid 中的一个单位，表示“剩余空间的一份”，理解成“按比例分配”即可。

如果说 2026 年学 CSS 和十年前有什么最大区别，那就是布局方式已经高度现代化：过去要靠浮动、定位、各种 hack 才能实现的布局，现在用 Flexbox 和 Grid 可以清晰、稳定、语义化地完成。

3.5 媒体查询与响应式设计

响应式设计的核心是“让页面在不同屏幕尺寸下都可用”。CSS3 中实现这一目标最主要的手段是媒体查询。

/* 默认样式先写在这里 */ .card { width: 100%; } /* 屏幕宽度不小于 768px 时 */ @media (min-width: 768px) { .card { width: 50%; } }

这段代码表示：在窄屏上，卡片占满整行；在宽屏上，一张卡片只占一半宽度。浏览器会根据当前视口宽度自动选用合适的样式。

移动优先是零基础学习者应该尽早养成的写作习惯。也就是说，先写手机端的默认样式，再用@media (min-width: ...)逐级增强平板端和桌面端。理由是移动端约束更大，优先写最受限的版本，后续适配时不容易出现溢出问题。

4. 环境准备与前置条件

HTML5 和 CSS3 的前端开发环境，是几乎所有编程方向里最轻量的。不需要安装 Java、不需要配置数据库，只需要一个浏览器和一个代码编辑器。

浏览器建议使用 Chrome 或者 Edge。它们的内核相同，开发者工具也几乎一致。日常开发时按F12打开开发者工具，可以查看 HTML 结构、CSS 样式、控制台报错、网络请求，是前端排错最重要的入口。

代码编辑器建议使用 Visual Studio Code，也就是常说的 VS Code。安装后建议再做两件事：

第一，安装 Live Server 插件。它可以在本地启动一个简易服务器，并在你保存代码后自动刷新页面，省去手动刷新的麻烦。

第二，了解项目的目录结构。即使是零基础，也要开始遵循“项目目录”的意识，不要把所有文件都堆在桌面。

my-website/ ├── index.html ├── css/ │ └── style.css └── images/ └── avatar.png

这是一个非常基础的前端项目结构：index.html是入口页面，css文件夹存放样式，images文件夹存放图片。在实际团队中，这个结构会复杂得多，但“入口页面、样式文件、静态资源分离”的思想从第一天就适用。

接下来，用一组最小代码跑通第一个页面。新建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>Hello，HTML5 + CSS3</h1> </body> </html>

用 VS Code 打开这个文件，右键选择 “Open with Live Server”，浏览器会自动打开页面并显示标题文字。如果这一步能跑通，说明环境已经就绪，可以进入实战环节。

5. 零基础实战：开发一个完整的个人主页

前面的概念如果只是“看过”，还不足以形成能力。这一章会从零开始，带读者完成一个可以在浏览器中直接打开的个人主页。这个案例会用到 HTML5 的语义化标签、CSS3 的变量、Flexbox 布局、Grid 布局、过渡动画和媒体查询，覆盖入门阶段最重要的知识点。

5.1 页面规划

先想清楚页面需要哪些区块，再动手写代码。本案例规划为四个区域：

1. 顶部导航：左侧是名字，右侧是三个链接。
2. 个人介绍区：头像、一句话简介、一个按钮。
3. 技能展示区：用卡片形式展示三项技能。
4. 页脚：版权信息。

规划的意义在于，先有结构再有样式，而不是一边写一边想。做完这一步，代码只是把规划翻译成 HTML 和 CSS。

5.2 建立项目目录

新建一个文件夹my-profile，在其中创建index.html和css/style.css。目录结构如下：

my-profile/ ├── index.html └── css/ └── style.css

这一步的目的是养成“页面入口与样式分离”的习惯。后续项目变大时，你还可以把 CSS 再拆分为多个文件，比如base.css、layout.css、components.css，但现在先保持简洁。

5.3 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="css/style.css"> </head> <body> <!-- 顶部导航 --> <header class="site-header"> <div class="container header-inner"> <p class="logo">MyProfile</p> <nav class="nav"> <a href="#about">关于</a> <a href="#skills">技能</a> <a href="#contact">联系</a> </nav> </div> </header> <!-- 个人介绍区 --> <section class="hero" id="about"> <div class="container hero-content"> <img class="avatar" src="https://picsum.photos/120/120" alt="头像"> <h1>你好，我是前端学习者</h1> <p>正在从零开始学习 HTML5 和 CSS3，目标是成为一名合格的前端工程师。</p> <a class="btn" href="#skills">查看我的技能</a> </div> </section> <!-- 技能展示区 --> <section class="skills" id="skills"> <div class="container"> <h2>我的技能</h2> <div class="skills-grid"> <article class="card"> <h3>HTML5</h3> <p>能够使用语义化标签搭建页面结构，理解浏览器渲染流程。</p> </article> <article class="card"> <h3>CSS3</h3> <p>掌握 Flexbox、Grid、媒体查询，能够制作响应式页面。</p> </article> <article class="card"> <h3>JavaScript</h3> <p>学习变量、函数、事件处理，为后续框架学习打基础。</p> </article> </div> </div> </section> <!-- 联系区 --> <section class="contact" id="contact"> <div class="container contact-inner"> <h2>联系我</h2> <p>如果你也正在学习前端，欢迎一起交流。</p> <a class="btn btn-light" href="mailto:example@email.com">发送邮件</a> </div> </section> <!-- 页脚 --> <footer class="site-footer"> <div class="container"> <p>© 2026 MyProfile. 通过 HTML5 + CSS3 制作。</p> </div> </footer> </body> </html>

这里用到了几个关键点：

• <header>、<nav>、<section>、<article>、<footer>都是 HTML5 语义化标签，每个区域的功能从名字就能看懂。
• <a href="#about">是页内锚点链接，点击后页面会滚动到对应 id 区域。
• <link rel="stylesheet" href="css/style.css">负责引入外部样式文件。

5.4 CSS 文件：样式是皮囊，布局是骨架

/* 文件路径：css/style.css */ /* 全局重置与变量 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #2563eb; --text-color: #1e293b; --bg-light: #f1f5f9; --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --radius: 12px; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text-color); line-height: 1.6; background-color: #ffffff; } .container { width: min(1100px, 92%); margin: 0 auto; } /* 顶部导航 */ .site-header { background-color: #ffffff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; } .logo { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); } .nav { display: flex; gap: 24px; } .nav a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.2s ease; } .nav a:hover { color: var(--primary-color); } /* 个人介绍区 */ .hero { padding: 80px 0; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); } .hero-content { text-align: center; } .avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 24px; border: 4px solid #ffffff; box-shadow: var(--card-shadow); } .hero h1 { font-size: 2rem; margin-bottom: 12px; } .hero p { max-width: 600px; margin: 0 auto 32px; color: #475569; } /* 按钮 */ .btn { display: inline-block; background-color: var(--primary-color); color: #ffffff; padding: 12px 28px; border-radius: 999px; text-decoration: none; font-weight: 500; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .btn-light { background-color: #ffffff; color: var(--primary-color); border: 2px solid var(--primary-color); } /* 技能区 */ .skills { padding: 80px 0; } .skills h2 { text-align: center; font-size: 1.75rem; margin-bottom: 40px; } .skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background-color: var(--bg-light); border-radius: var(--radius); padding: 32px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow); } .card h3 { margin-bottom: 12px; color: var(--primary-color); } /* 联系区 */ .contact { padding: 80px 0; background-color: var(--bg-light); } .contact-inner { text-align: center; } .contact h2 { margin-bottom: 12px; } .contact p { margin-bottom: 24px; color: #475569; } /* 页脚 */ .site-footer { padding: 24px 0; text-align: center; font-size: 0.875rem; color: #64748b; } /* 响应式：窄屏时技能卡片改为单列 */ @media (max-width: 768px) { .skills-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 1.5rem; } }

5.5 关键代码说明

这份 CSS 里有几个值得零基础读者停下来研究的地方：

:root中定义的 CSS 变量，相当于样式的“全局常量”。后续修改主色调时，只需要改一处，全站颜色都会联动变化。这是 CSS3 提供的变量能力，建议从第一天就养成使用的习惯。

position: sticky; top: 0;让导航栏固定在视口顶部。这是 CSS3 后期得到稳定支持的定位方式，比传统的fixed更适合导航场景，因为它不会让导航脱离文档流。

display: grid; grid-template-columns: repeat(3, 1fr);是三列等宽布局最简洁的写法，配合gap设置间距。窄屏时通过媒体查询把列数改成 1，就实现了响应式。

transition配合:hover实现悬停动画，属于 CSS3 的过渡模块。它并不复杂，但能让页面呈现出“有交互感”的体验。注意，transition声明要写在元素的默认状态上，而不是写在:hover里，否则鼠标移出时不会有过渡动画。

width: min(1100px, 92%)是 CSS3 比较新的函数式写法，表示“在 1100px 和 92% 之间取一个较小的值”。窄屏时容器宽度不会超过视口宽度的 92%，宽屏时最多不超过 1100px，就不需要再为.container单写媒体查询了。

6. 运行结果与效果验证

6.1 如何运行项目

在 VS Code 中打开index.html，右键选择 “Open with Live Server”，或者直接在浏览器中双击文件打开。推荐使用 Live Server 的方式，因为保存代码后页面会自动刷新。

如果一切正常，你会看到：

• 页面顶部有一个白底导航栏，左侧是 “MyProfile”，右侧是三个链接，点击链接可以滚动到对应区域。
• 导航栏下方是以蓝色渐变背景为主的个人介绍区，中间显示圆形头像、标题、一段介绍文字和按钮。
• 往下滚动，是“我的技能”区域，三张卡片并排排列，鼠标悬停时卡片会轻微上浮，并出现阴影。
• 最底部是联系区和页脚。

6.2 如何用开发者工具验证

按F12打开开发者工具，切换到 Elements（元素）面板，可以点选页面上的任意元素。比如点选一张技能卡片，右侧 Styles 面板会展示它的完整 CSS 规则。此时你可以临时修改一些属性值，例如把背景色改成黄色，页面会立即更新，刷新后恢复原样。这个操作是在真实开发中定位样式问题的基本手段。

6.3 如何判断案例是否成功

判断标准不是“看起来和示例图一样”，而是以下三个检查点：

1. 页面没有横向滚动条，说明没有元素溢出视口。
2. 缩放浏览器窗口到手机宽度时，技能区的三列卡片会变成一列，说明媒体查询生效。
3. 点击导航栏里的任意链接，页面能平滑滚动到对应区块，说明锚点和scroll-behavior生效。

如果某一步没有达到预期，优先打开浏览器控制台。HTML 文件缺失、CSS 文件路径写错、标签未闭合等问题，控制台通常在 Network 面板中会有红色提示。判断失败后第一步看哪里，永远是从控制台开始。

7. 零基础常见问题与排查思路

以下表格汇总了 HTML5 + CSS3 入门阶段最常出现的几类问题，读者可以收藏备查。

八类问题覆盖了零基础阶段至少 90% 的报错场景。如果遇到没有列出问题，正确的思路依然是“打开控制台，看报错信息，再按错误提示去搜索”。

8. 最佳实践与学习路径建议

8.1 写代码阶段就该养成的六个习惯

第一个习惯：先有结构，再有样式。很多新手喜欢一边写 HTML 一边写 CSS，结果是改一个标题样式要翻很久。正确做法是从上到下写完整 HTML 结构，确认内容完整后，再写 CSS。

第二个习惯：用语义化标签而不是<div>标签堆叠。这不是“显得专业”，而是让页面结构可读。别人接手你的代码时，不需要猜你这里的div是想表达什么。

第三个习惯：class 命名尽量用英文单词，并且语义清晰。skills-card比div3好，profile-avatar比img1好。命名规范的收益在项目变大后会指数级提升。

第四个习惯：把样式拆到独立 CSS 文件。写练习时直接写在 HTML 里的<style>标签中很省事，但项目一复杂，“内联样式”和“内嵌样式”都会成为维护负担。从第一课开始就使用外部样式表，实际上是在为团队协作做准备。

第五个习惯：学会看开发者工具。不要靠猜，不要凭感觉改代码。看到样式没生效，第一反应是选中元素，看 Styles 面板里有没有属性被划掉。

第六个习惯：写完一个小功能立即验证。页面每增加一个区块，就刷新一次浏览器。等整页写完后才预览，一旦出错会多花几倍时间定位。

8.2 零基础学习路线参考

HTML5 和 CSS3 的知识量并不小，不建议试图在几天内全部学完。参考路线如下：

第一周，主攻 HTML。熟悉常用标签、块级与行内元素、语义化结构、表单。能用语义化标签写一个带导航、内容区、页脚的静态页面。

第二周，主攻 CSS 基础。掌握选择器、盒模型、字体样式、颜色与背景、Flexbox。能对一个页面做基础美化，并理解“盒模型算不清”时如何排查。

第三周，主攻 CSS3 布局与响应式。掌握 Grid、媒体查询、CSS 变量、过渡动画。能实现一个在三端设备上显示良好的卡片式页面。

完成这三周内容后，可以做一个综合练习：尝试把自己的个人主页重新实现两遍，第一遍不看代码，第二遍尝试加入新的响应式交互。这个阶段的关键是“重复写出”，而不是“看过就过”。

8.3 学完 HTML5 + CSS3，下一步是什么

学完 HTML5 和 CSS3，说明你已经具备“做静态页面”的能力。下一步的路线有两条，需要并行推进。

第一条线是 JavaScript。这是前端的编程核心，也是从静态页面走向动态交互的必经之路。先学变量、数据类型、函数、条件判断、循环、DOM 操作，再接触事件监听和异步请求。

第二条线是工具链。建议学习 Git 的基本使用（版本管理）、npm 的基本命令（依赖安装）、以及一个现代框架，通常是 Vue 或 React。注意顺序，不要跳过 JavaScript 直接学框架，否则会遇到看不懂代码的问题。

从整个学习路径看，HTML5 + CSS3 是唯一一段“看到效果最快”的阶段：你写的每一行代码，刷新后都能立刻看到结果。这种即时反馈是保持学习动力的天然优势，值得好好利用。

9. 总结

HTML5 和 CSS3 不是前端学习的“前菜”，而是前端的语言基础。HTML5 解决了页面结构怎么组织的问题，从大块区块到具体内容都有对应的语义；CSS3 解决了页面呈现怎么设计的问题，从颜色字体到栅格响应式，都有一套完整体系。

本文从零开始，完成了一个纯 HTML5 + CSS3 的个人主页，覆盖了语义化标签、CSS 变量、Flexbox、Grid、媒体查询和过渡动画等核心知识点。只要按照文中步骤从环境搭建走到代码实践，你就已经掌握了最基础的“做页面”能力。

接下来，不要急着去刷下一个教程。先花几天时间，围绕自己的兴趣方向再做一两个页面，比如模仿一个你常用的网页首页、做一个自己的学习笔记页面，把第 5 章的案例改成自己的真实内容。只有当你能不依赖教程、从空文件开始独立写出一个页面时，才说明这一阶段真正毕业了。之后再进入 JavaScript，你会发现所有 DOM 操作和事件处理都有一个清晰落脚点，因为你知道页面上的每个区域是怎么来、怎么改、怎么影响的。