前端零基础详细学习计划书

适用人群：完全零基础、没有英语基础的学习者
学习目标：能独立做出一个个人网站 / 博客（静态页面，可部署上线）
每日投入：2–3 小时（周末可加量）
预计周期：约 11 周（可随时提速或放慢）
语言策略：全程中文为主，关键概念附带英文原词对照

写在前面：给"没有英语基础"同学的几句话

很多人一听说"前端要写代码"就怕，其实：

你不需要先学英语。HTML/CSS 里大部分是单词缩写，但含义都很直白，本计划每个词都会先讲中文意思，再让你认识英文原词。
写代码不等于写英文作文。你只是"拼积木"——把现成的关键词（中文里叫"标签""属性"）按规则摆好。拼写记不住？复制粘贴 + 多敲几遍就会了。
遇到报错不要慌。报错信息虽然是英文，但大多是固定几句话，本计划后附"常见英文报错中文速查"，照表查就行。
工具可以全中文。代码编辑器（VS Code）能装中文语言包，浏览器自带翻译，完全够用。

一、学习前准备（第 0 周，半天搞定）

1.1 安装工具（全部中文界面）

工具	用途	中文设置
VS Code	写代码的编辑器	扩展里搜"Chinese"装「简体中文语言包」并重启
Chrome 或 Edge 浏览器	看网页效果、查资料	右键可"翻译成中文"
一个网盘/笔记	存代码和笔记	任意，推荐"腾讯文档"或"有道云笔记"

安装步骤（图文可搜 B站："VS Code 安装教程 2024"）：

下载 VS Code → 一路下一步安装。
打开后左侧点"扩展"图标（方块），搜 Chinese，安装「简体中文(Simplified Chinese) Language Pack」，重启。
再搜 Live Server 并安装——它能让你点一下就在浏览器里打开网页，省去手动刷新。

1.2 建立专属学习文件夹

在电脑任意位置新建文件夹，例如 我的前端学习/，以后所有练习都放这里，结构如下：

我的前端学习/
├─ 01-HTML练习/
├─ 02-CSS练习/
├─ 03-JavaScript练习/
├─ 04-个人博客项目/
└─ 学习笔记.md   （每天记术语和踩坑）

1.3 推荐中文资源（贯穿全程）

视频：B 站搜「HTML CSS JavaScript 入门」，推荐免费全套：黑马程序员、尚硅谷、pink 老师（前端基础）。
图文查用法：菜鸟教程 runoob.com（最通俗）、MDN 中文 developer.mozilla.org/zh-CN（最权威）。
动手练习：freeCodeCamp 中文版、CodePen（可切中文界面）。
卡住了问：B 站、CSDN、知乎，直接把报错中文描述搜出来。

二、中英术语对照表（先混个脸熟）

本表建议打印贴在桌前。不需要背，用到时查。

中文	英文	一句话解释
超文本标记语言	HTML	网页的"骨架"，决定有什么内容
层叠样式表	CSS	网页的"皮肤"，决定好不好看
JavaScript	JS	网页的"神经"，决定能不能动/交互
标签	tag	用 `< >` 包起来的命令，如 `<h1>` 标题
元素	element	一个标签及其内容整体
属性	attribute	标签上的补充信息，如 `href="网址"`
选择器	selector	CSS 用来"点名"哪个元素要美化
盒模型	box model	每个元素像个盒子，有内容/内边距/边框/外边距
布局	layout	元素在页面上怎么摆放
弹性布局	Flexbox	一排元素自动对齐、伸缩
网格布局	Grid	像表格一样把页面分格子
文档对象模型	DOM	把网页变成 JS 能操作的"积木树"
事件	event	用户的动作，如点击、输入
变量	variable	装数据的"盒子"，取名存值
函数	function	一段可重复使用的"动作"
控制台	console	浏览器里看报错和调试的地方
部署 / 上线	deploy	把网页放到互联网上让别人访问

三、阶段1：HTML 基础（第 1–2 周）

目标：能写出结构清晰的静态网页骨架，比如一个"个人简介页"。

第 1 周：认识网页与基础标签

天	今日任务	验收标准
第1天	看视频：网页是什么、浏览器与编辑器、新建第一个 `.html` 文件	能打开一个显示"你好，世界"的网页
第2天	标题 `<h1>~<h6>`、段落 `<p>`、换行 `<br>`、水平线 `<hr>`	写出一段带标题和几段文字的页面
第3天	加粗 `<strong>`、斜体 `<em>`、无序列表 `<ul><li>`、有序列表 `<ol>`	做出一个"我的爱好"列表
第4天	链接 `<a href="">`、图片 `<img src="">`	页面能点链接跳走、能显示一张图
第5天	注释 `<!-- -->`、空格与特殊字符、`<div>` 和 `<span>` 盒子	理解"块"和"行内"的区别
周末	综合练习：写「个人简介页」骨架（头像+名字+简介+爱好列表+联系方式）	页面内容齐全、结构清楚

第 2 周：语义化与表单

天	今日任务	验收标准
第6天	语义化标签：`<header> <nav> <main> <section> <footer>`	用语义标签重做第5天页面
第7天	表格 `<table>`：行 `<tr>`、单元格 `<td>`、表头 `<th>`	做一个"课程表"或"技能清单"
第8天	表单 `<form>`：文本输入、密码、单选、多选、下拉、按钮	做一个"留言/订阅"表单
第9天	表单属性：`placeholder`、`required`、`name`、`value`	表单有提示文字、必填项
第10天	HTML 文件结构规范：`<!DOCTYPE>`、`<head>`、`<title>`、`<meta>`	页面标题正确、有中文编码
周末	复习 + 把"个人简介页"补全（加导航、页脚、表单）	一个完整的多区块静态页

阶段1自测：不看教程，能否从空白文件写出一个含标题、列表、图片、链接、表单的页面？能 = 过关。

四、阶段2：CSS 基础与布局（第 3–5 周）

目标：把阶段1的"骨架"变成好看的页面（配色、字体、布局、响应式）。

第 3 周：样式入门与盒模型

天	今日任务	验收标准
第11天	CSS 三种引入：行内、内部 `<style>`、外部 `.css` 文件（推荐外部）	用外部文件给页面上色
第12天	选择器：标签、类 `.class`、ID `#id`、后代选择器	能精准给某个元素改样式
第13天	颜色（颜色名/十六进制 `#fff`）、字体 `font-*`、文字对齐	页面变好看、字清楚
第14天	盒模型：内容、内边距 `padding`、边框 `border`、外边距 `margin`	用"画盒子"理解间距
第15天	背景 `background`、宽度高度 `width/height`、显示 `display`	做出带背景色的卡片
周末	练习：给"个人简介页"加配色和卡片样式	页面有设计感

第 4 周：布局（重点）

天	今日任务	验收标准
第16天	浮动 `float` 与清除（了解即可，现代少用）	理解老式布局
第17天	Flex 弹性布局：`display:flex`、主轴侧轴、`justify-content`、`align-items`	一排元素居中、等分
第18天	Flex 实战：导航栏、卡片横排、底部对齐	做出导航条
第19天	Grid 网格布局：`grid-template-columns`、`gap`	做出照片墙/两栏布局
第20天	定位 `position`：相对、绝对、固定（fixed 做返回顶部）	做出"固定导航"或"返回顶部"
周末	综合：用 Flex+Grid 重做个人页整体布局	布局规整、不乱跑

第 5 周：美化与响应式

天	今日任务	验收标准
第21天	圆角 `border-radius`、阴影 `box-shadow`、透明度	卡片更精致
第22天	过渡 `transition`、悬停 `:hover` 效果	鼠标放上去有动画
第23天	响应式：媒体查询 `@media`，手机/电脑不同样式	缩窗口页面自动适配
第24天	视口 `viewport`、相对单位 `rem/%`、`max-width`	手机上不乱
第25天	CSS 变量 `--变量名`、复用颜色/间距	改一处全站变
周末	项目：完成"个人简介页"全美化 + 手机适配	电脑手机都好看

阶段2自测：能否不查教程，写出一个两栏布局、有悬停效果、手机上不乱的页面？能 = 过关。

五、阶段3：JavaScript 基础（第 6–9 周）

目标：让网页"动起来"——菜单展开、图片轮播、表单校验等。

第 6 周：语法入门

天	今日任务	验收标准
第26天	JS 是什么、两种引入（内部 `<script>`、外部 `.js`）、控制台 `console.log`	能在控制台打印文字
第27天	变量 `let`、常量 `const`、命名规则	存数据并输出
第28天	数据类型：数字、字符串、布尔、`+` 拼接	做简单运算和拼接
第29天	运算符：`+ - * /`、`>` `<`、`==`、`&&` `	写条件判断小例子
第30天	模板字符串、弹窗 `alert`/`prompt`	和用户简单交互
周末	练习：写一个"简易计算器"页面（输入两个数显示结果）	能算加减

第 7 周：流程控制与函数

天	今日任务	验收标准
第31天	条件 `if / else / else if`	根据不同输入显示不同结果
第32天	多分支 `switch`、三元运算符	简化判断
第33天	循环 `for`、`while`	重复输出或累加
第34天	数组 `[]`：增删查、遍历 `for...of`	操作一组數据
第35天	对象 `{}`：属性与方法	表示"一个人"的信息
周末	练习：待办清单（数组存任务，循环显示）	能列出来

第 8 周：DOM 与事件（核心）

天	今日任务	验收标准
第36天	获取元素：`getElementById`、`querySelector`	拿到页面上的元素
第37天	修改内容：`textContent`、`innerHTML`；改样式 `.style`	点按钮改文字
第38天	事件：`onclick`、`addEventListener`、点击/鼠标移入	用户动作触发代码
第39天	表单事件：`input`、`submit`；获取输入值	读取用户输入
第40天	综合：显示/隐藏元素（做折叠菜单）	点一下展开收起
周末	练习：导航菜单点击展开 + 返回顶部按钮	两个交互都通

第 9 周：小项目实战

天	今日任务	验收标准
第41天	图片轮播（自动/点击切换）	做出轮播
第42天	表单校验（手机号/邮箱格式、必填）	错误有提示
第43天	简单待办（增删、标记完成）	功能完整
第44天	主题切换（白天/黑夜，用 CSS 变量）	一键换肤
第45天	把以上效果接到"个人简介页"	个人页有交互
周末	复习阶段3，整理 JS 笔记（重点：DOM/事件）	笔记完整

阶段3自测：能否给任意页面加上"点击按钮弹出提示""表单校验""轮播"三个功能？能 = 过关。

六、阶段4：综合项目 + 部署上线（第 10–11 周）

目标：做出一个完整、可访问的个人博客，并部署到互联网。

第 10 周：规划与搭建

天	今日任务	验收标准
第46天	规划博客结构：首页、文章列表、关于我（画草图）	有清晰页面地图
第47天	搭首页：导航 + 头图 + 简介（HTML+CSS）	首页成型
第48天	文章列表页：卡片式文章（Flex/Grid）	列表好看
第49天	文章详情页：标题/正文/排版样式	阅读舒适
第50天	关于我页 + 联系表单（接阶段3校验）	四页联通
周末	统一风格：配色、字体、组件复用	全站一致

第 11 周：部署上线

天	今日任务	验收标准
第51天	注册 GitHub 或 Gitee（中文界面）	有账号
第52天	建仓库、上传代码（或桌面工具拖拽上传）	代码在云端
第53天	开启 Pages 服务（GitHub Pages / Gitee Pages）	拿到网址
第54天	浏览器打开你的网址，检查显示	别人能访问
第55天	写「README」说明：这是什么、怎么本地运行	项目有说明
周末	庆祝 🎉 分享给朋友，写学习总结	完成！

部署中文步骤（以 Gitee Pages 为例，最友好）：

注册 gitee.com（码云，全中文）。
新建仓库 → 把 04-个人博客项目 文件夹上传。
仓库里点「服务」→「Gitee Pages」→ 选分支 master、部署目录 / → 开启。
等待片刻，获得 https://你的用户名.gitee.io/仓库名 这样的网址，发给朋友即可访问。

七、每日学习节奏模板（2–3 小时）

时间	做什么	提示
0:00–0:20	复习昨天 + 看今日目标	翻笔记，不慌
0:20–1:20	看教程/视频（理解概念）	跟着暂停、思考
1:20–2:20	跟着敲代码（动手）	一定自己敲，别复制
2:20–2:50	做课后小练习 / 查错	报错查附录
2:50–3:00	记笔记（术语 + 踩坑）	写进学习笔记.md

原则：看懂 ≠ 会写。每个知识点，关掉教程自己从头写一遍才算学会。

八、常见英文报错中文速查（无英语也能自救）

英文报错（片段）	中文意思	常见原因
`Uncaught SyntaxError`	语法错误	少了括号/引号/分号
`is not defined`	未定义	变量名拼错或没声明
`Cannot read properties of null`	取不到元素	选择器写错 / JS 在元素前执行
`404 Not Found`	找不到文件	路径或文件名拼错
`Failed to load resource`	资源加载失败	图片/文件地址错了
`TypeError: ... is not a function`	不是函数	方法名拼错
`CORS` / `blocked by CORS`	跨域被拦	本地先不管，部署后再说

通用排错三步走：① 看浏览器控制台（F12）报错行 → ② 把报错中文意思搜出来 → ③ 对照上面表格改。

九、进度打卡表（可打印）

周打卡

周次	阶段	是否过关
第1周	HTML	□
第2周	HTML	□
第3周	CSS	□
第4周	CSS	□
第5周	CSS	□
第6周	JS	□
第7周	JS	□
第8周	JS	□
第9周	JS	□
第10周	项目	□
第11周	部署	□

每日打卡

日期	学了什么	写了什么代码	卡住的点	解决没
				□
				□
				□

十、给零基础同学的 5 条加油建议

慢就是快：前两周别贪多，把 HTML 写熟，后面 CSS/JS 才顺。
每天敲，别断：哪怕只写 10 行，也比周末突击 6 小时效果好。
抄→改→写：先照着抄懂，再改参数看变化，最后自己写。
卡住就搜：把现象用中文描述去搜，90% 的问题别人早问过。
做成作品最开心：第11周上线那一刻，你会很有成就感，这是坚持下去的动力。

本计划书可长期使用，按自己的节奏前进即可。祝你早日做出属于自己的个人网站！🚀

Markdown测试