1. 前端到底是做什么的先把整张地图摊开很多同学第一天学前端上来就懵了。打开招聘网站看到一堆“Vue”“React”“小程序”“工程化”的词再翻翻面试题发现问的是“闭包”“事件循环”“虚拟DOM”人还没开始学就想放弃。我第一天学的时候也差不多满脑子只有一个问题这些东西和我有什么关系先别急。Day 1 最该干的不是背任何知识点而是花二十分钟把“前端开发”这张地图摊开搞清楚它到底解决什么问题以及你往后几个月大概会走在一条什么样的路上。1.1 前端到底是干什么的通俗地说前端就是“用户能直接看到和操作的那部分”。你在浏览器里打开的页面、手机里的小程序、甚至智能电视上显示的界面都属于前端开发的范畴。后端则负责把数据送给前端前端负责把数据变成“人看得懂、点得动、有反馈”的东西。这个区别很关键。很多新手以为前端就是“写个好看的页面”但真正入行之后你会发现前端至少还要处理这些事页面怎么做才加载得快、不同手机型号上显示会不会错位、用户点了按钮之后界面怎么响应、数据变了界面怎么跟着变、多人协作时代码怎么组织才不乱。这一堆事才是“前端基础知识”里真正值钱的部分。前端三件套的关系我用一个特别土的比喻HTML是房子的骨架CSS是墙皮和装修JavaScript是水电和智能家居。骨架没搭好装修再好也是危房装修不到位骨架再结实也没人愿意住水电不接通房子就是个空壳。1.2 Day 1 的学习边界我见过太多人第一天就想一把梭HTML没写利索就去看“如何用Vue实现某某功能”结果第二天全都忘了产生严重的挫败感。我给你的建议是第一天的目标不要贪就四个字——建立体感。也就是说第一天的任务是把“浏览器打开一个HTML文件”这件事走通把“改代码、刷新页面、看到效果”这个循环跑起来顺便认识一下最基本的标签、样式和简单的交互。你已经比昨天更接近“前端开发者”了。后面你会接触到大量热词Vue、React、组件库、微前端、工程化、状态管理、面试题……它们统统不用急。地基扎实的人盖楼才快地基松的人爬到第三层就开始提心吊胆。Day 1 就是给这栋楼浇第一铲混凝土。2. 开发环境搭建装好工具再上路环境搭建这步很多人低估了它的重要性结果连写代码的编辑器都选不对第一天就卡死在各种奇怪的问题上。这一节我直接给你一套“照着做就行”的方案。2.1 浏览器Chrome 是刚需前端开发最常用的浏览器目前依然是 Chrome。原因很直接它的开发者工具DevTools是所有浏览器里对开发者最友好的几乎所有主流调试习惯都围绕它展开。你以后不管用什么浏览器做产品测试的时候 Chrome DevTools 都是默认的调试战场。下载安装 Chrome 之后请你马上做一个动作打开任意网页比如百度首页按一下F12笔记本上可能是Fn F12或者Ctrl Shift I。你会看到右侧或下方弹出一个大面板里面有 Elements、Console、Network、Sources 等一堆页签。第一次打开没看懂很正常。你只需要先认识三个Elements显示页面的当前结构和渲染后的样式。你想看某个元素长什么样、被哪些样式影响全在这里。Console页面里跟 JavaScript 相关的输出和报错都在这。以后遇到“代码不生效”第一反应就应该是打开 Console 看有没有红色报错。Network记录页面加载过程中的所有网络请求。现在可以只扫一眼长什么样后面做项目用到网络请求时再深入。我刚开始学的时候最喜欢在 Elements 面板里临时改文字、改颜色改完按刷新就没了但是这个过程特别直观秒懂 CSS 的“即时生效”。这个小心思你现在就可以试右键点页面上的任意一段文字选“检查”然后在右侧的样式面板里改颜色页面马上变。2.2 编辑器VS Code 基本是行业标配编辑器我直接推荐 VS Code不要问“哪个编辑器最好”先把主流工具用顺手再说。VS Code 免费、插件生态强、几乎全平台通用面试时提“我用 VS Code”也完全拿得出手。下载地址我就不写了搜一下就能找到。装完之后你有两个必做动作。第一按F1或者Ctrl Shift X打开扩展商店把下面这几个插件装齐Live Server在一个 HTML 文件里右键选择“Open with Live Server”浏览器会自动打开一个页面。以后你改文件保存页面自动刷新写代码体验直接翻倍。Prettier - Code formatter格式化代码的比如自动补全引号、对齐缩进。新手写代码缩进混乱太常见了Prettier 能帮你养成好习惯。ESLintJavaScript 的“语法警察”会提示哪些写法容易出 bug。第一天只需装上看不懂提示不要紧后面慢慢懂。Auto Rename Tag自动同步修改 HTML 的开始和结束标签。比如你把h1改成h2它帮你把/h1一起换掉。Path Intellisense写文件引用路径的时候自动补全省得自己敲容易错。第二设置一下“自动保存”。打开设置Ctrl ,搜索Auto Save设为afterDelay或者直接选“File Auto Save”打开。这样你每次切出窗口代码就会自动保存配合 Live Server 就是改完立刻看见效果。2.3 创建你的第一个 HTML 文件找个文件夹新建一个文件命名index.html。注意两点文件名一定要全英文小写里面别带空格网页入口为什么习惯叫index是因为服务器默认会把index.html当首页加载。用 VS Code 打开这个文件输入一个感叹号!然后按Tab键你会看到编辑器自动生成了一个标准的 HTML 骨架。这就是 VS Code 内置的Emmet功能的功劳以后你会越来越依赖它。再往body标签里写一行h1Hello World/h1右键文件空白处选择Open with Live Server。浏览器打开看到页面上出现 Hello World 的那一刻你就算是正式迈进了前端开发的门。提示如果 Live Server 打开后浏览器空白先检查一下文件是不是叫index.html以及 VS Code 底部状态栏有没有显示Go Live。实在不行关掉 Live Server 再重新开启一次。3. HTML 基础页面的骨架HTML 全称是 HyperText Markup Language超文本标记语言。记住一件事HTML 不是编程语言它是“标记语言”本身没有任何逻辑能力它的任务就是把内容按照结构摆好。你后面写 JavaScript 的时候会深刻体会这两种语言的差别。3.1 标准文档结构长什么样前面你用! Tab生成的骨架包含了 HTML 文档必备的几个部分!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1Hello World/h1 /body /html逐行解释一遍这一遍吃透后面省很多事!DOCTYPE html告诉浏览器“我是一个 HTML 页面请用现代标准渲染我”。没有这一行浏览器可能进入“怪异模式”很多样式表现会和你想的不一样。html langzh-CN根元素。lang属性声明页面主要语言是中文方便阅读器和搜索引擎理解内容。head放“关于页面的信息”不直接显示在页面上。编码、适配信息、标题都在这。meta charsetUTF-8声明字符编码是 UTF-8。没有这一行中文可能变成乱码这是新手最容易踩的坑。meta nameviewport contentwidthdevice-width, initial-scale1.0移动端适配的关键。这一行告诉浏览器按设备宽度渲染页面而不是按桌面宽度缩小。很多第一天不讲但我建议你直接就养成这个习惯因为以后几乎每个项目都要用到它。title浏览器标签页上显示的文字也是搜索引擎识别页面主题的重要依据。body页面所有可见内容的容器你写的所有文字、图片、按钮都在它里面。3.2 高频标签先记这几个Day 1 不需要把标签背全下面这张表才是第一周的真实兵器库标签作用一句话备注h1~h6标题从大到小一个页面只保留一个h1SEO 友好p段落浏览器会有默认间距别手动加br换行a href链接超链接href是必填属性img src图片地址 alt描述图片alt是图片加载失败时显示的替代文字必填ul/li无序列表菜单栏、商品列表都是它的场景div无语义的块级容器用来分块布局CSS 的好帮手span无语义的行内容器包住一小段文字去单独改样式input表单输入框类型有 text、password、checkbox 等button按钮可以用 JS 绑定点击事件写标签还要养成两个习惯所有标签都小写双标签必须正确闭合。写div忘写/div是新手最高频的报错来源之一现在很多编辑器会自动补全但你要知道“为什么会有这个限制”——浏览器解析 HTML 时是逐字读取的标签不闭合它就无法判断层次整个页面的结构都会乱掉。3.3 语义化写给浏览器也是写给未来合作的同事HTML 里有一类标签叫“语义化标签”比如header、nav、main、section、footer。它们和div功能上是一样的都是“容器”区别在于它们把容器的“含义”也表达出来了。为什么要语义化至少三个实际理由。第一对无障碍访问友好。屏幕阅读器需要靠标签判断哪些是导航、哪些是正文才能帮视障用户正确读网页。第二对 SEO 友好。搜索引擎爬虫会看重标签的层级和语义来理解页面内容。第三对团队协作友好打开别人的代码看到nav就知道这是导航区而不是在一堆div里猜。Day 1 你不需要把每个语义标签都用到但要有这个意识写 HTML 的时候先想“这块内容是什么”再想“用什么标签能表达它”而不是一律用div糊上去。4. CSS 基础给骨架穿衣服CSS 全称是 Cascading Style Sheets层叠样式表。它干的事就是告诉浏览器这个元素是什么颜色、多大、放在哪。为什么叫“层叠”因为多条规则可以同时作用于同一个元素最终按优先级叠加生效。这个“层叠”概念是新手最容易糊涂的地方。4.1 CSS 的三种引入方式第一种行内样式写在标签的style属性里h1 stylecolor: red;Hello/h1第二种内嵌样式写在head里的style标签内style h1 { color: red; } /style第三种外链样式把 CSS 写进独立的.css文件再在head里用link引入link relstylesheet hrefstyle.css实际开发几乎百分百用第三种。原因很简单多个页面可以共用同一个 CSS 文件改一处全站生效HTML 文件保持干净浏览器还能缓存 CSS 文件第二次打开速度更快。Day 1 直接用第三种方式开始养成正确的组织习惯。优先级方面记住一个粗略但好用的排序行内样式 内嵌/外链后写的胜出 浏览器默认样式。更细的优先级涉及“选择器权重”今天先不展开但你以后一定会反复遇到“我写的样式为什么被覆盖了”这类问题走到那一步再回来学权重就刚刚好。4.2 20 分钟掌握最常用的选择器选择器就是“告诉浏览器我要给哪个元素上样式”的手段。第一批只需要学会五类/* 1. 标签选择器给页面所有 p 标签加样式 */ p { color: #333; } /* 2. 类选择器给 class 为 card 的所有元素加样式 */ .card { border: 1px solid #eee; } /* 3. id 选择器给 id 为 nav 的元素加样式 */ #nav { background-color: #f8f8f8; } /* 4. 后代选择器给 card 里的所有 p 加样式 */ .card p { font-size: 14px; } /* 5. 组合和多重选择同时给多个选择器加相同样式 */ h1, h2 { font-weight: bold; }重点说说.card和#nav的区别id在一个页面里只能出现一次是唯一的class可以反复用可以多个类名叠加比如div classcard active。实际开发中绝大多数样式都用class来控制id更多留给 JavaScript 去精准定位元素。为什么因为“一个 id 只能有一个”这种约束放在样式设计里太死板了。类名命名也有学问card、nav、btn-primary这种带语义的类名读代码的人一眼就懂。别起div1、box2这种名字当天写得爽第三天就找不到了。4.3 盒模型CSS 布局的灵魂概念页面里每一个元素本质上都是一个“矩形盒子”。这个盒子由四层组成从内到外分别是内容区content、内边距padding、边框border、外边距margin。用快递盒子来理解。内容区是你买的商品padding 是盒子里的缓冲泡沫border 是纸箱壁margin 是箱子与箱子之间保持的距离。很多新手会困惑“为什么我设了宽度元素却比预期宽”就是因为默认情况下width设定的是 content 的宽度padding 和 border 还要额外叠加。这个坑有一个标准解法我正在用的也是几乎所有工程项目的通用做法* { box-sizing: border-box; }border-box的含义是width直接包含 content、padding、border 三者的总和。你给它 200px它就真占 200px怎么调 padding 都不会撑爆布局。这个规则建议第一天就设上能救你未来一年里的大多数布局事故。想直观看到盒模型Chrome DevTools 的 Elements 面板里选中任意元素右侧样式区域的底部会有一个长方形的盒子示意每个区域都标注尺寸。以后调间距、调尺寸都在这个可视化结构里操作。4.4 Flexbox一套简单到犯规的布局方案布局曾是 CSS 里最劝退的部分块级元素默认竖着排浮动布局到处乱飘。直到 Flexbox 出现很多布局噩梦才终结。Flexbox 的核心思路是给父容器设置display: flex它里面的子元素就会自动沿着一条主轴排列方向默认是水平。.flex-container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ gap: 12px; /* 子元素间距不需要写 margin 了 */ }初学者把这三个属性背下来就已经能解决 80% 的布局需求卡片横排、导航栏分布、按钮居中。justify-content管主轴方向的对齐align-items管交叉方向的对齐gap直接给子元素之间加间距——还记得 4.3 说 margin 经常把布局搞乱吗gap就是救星。你还会看到很多人用flex: 1让某个子元素占满剩余空间实现“左右两个中间自适应”的经典布局。这个里面涉及到 flex-grow、flex-shrink 等概念Day 1 先不需要深究会用flex: 1就能做出很多实用的布局效果。5. JavaScript 基础让页面真正“活”起来到了 JavaScript前端才从“能看”变成“能玩”。JS 是真正的编程语言第一天的目标很朴素认识变量学会选中页面元素改它的内容再绑一个点击事件。5.1 变量和基础数据类型声明变量有三个关键词先记let它表示一个以后可能被重新赋值的变量。再记const表示一个不变的常量尽量多用。老代码里常见的var现在被淘汰了这个版本你可以晚点再了解。const siteName 我的学习笔记; let visitorCount 0; visitorCount 1; // let 可以重新赋值数据类型方面第一天至少认识这几种字符串用引号包的文本、数字、布尔值true/false、数组一组数据、对象一堆有名字的属性、null 和 undefined两个都表示“空的”但含义不同null 是你主动赋值的空undefined 是声明了没赋值。有一个地方新手容易懵console.log(...)是干嘛的它是“往 Console 面板输出一个值”的命令。你可以把它理解为给代码装摄像头想知道某个变量此刻是什么值打印出来看就行。我至今写代码遇到疑惑第一反应还是console.log。5.2 最简单的 DOM 操作DOM 就是“文档对象模型”浏览器会把 HTML 结构编译成一棵对象树JS 通过操作这棵树来改变页面。听起来抽象实际写起来很朴素p idmessage还没变化/pconst message document.getElementById(message); message.textContent 文本已经被改了;两行代码页面上那段文字就变了。document.getElementById(message)是在文档里找到一个 id 为 message 的元素textContent是它的文本内容属性赋值就等于改文字。更现代一点的写法是document.querySelector(#message)参数和 CSS 选择器完全一样学一次两用。从 Day 1 开始我建议你就用querySelector因为后面学框架、学各种库这个 API 是所有工具交互的基石。5.3 事件用户和页面的对话光能改文本还不够你希望页面“回应”用户的操作。这个机制叫事件监听const btn document.getElementById(btn); btn.addEventListener(click, function () { alert(你点了我); });解释一下addEventListener(click, 函数)的意思是“当这个按钮被点击时执行后面的函数”。函数是 JS 里一个重要的基础概念Day 1 你只需要把它当作“一段打包好的、可以执行的代码块”。有经验的开发者现在通常会写成箭头函数btn.addEventListener(click, () { alert(你点了我); });两种写法都行箭头函数更现代一点你看别人的代码时两种都要能认出来。事件不只有click还有mouseover鼠标悬停、keydown键盘按下、submit表单提交等今天就先养一个意识几乎所有交互都是“监听事件 → 做出响应”的套路。提示JavaScript 的代码要放在 HTML 里被引用了再写。你可以把script srcapp.js放到body的最底部因为浏览器是自上而下解析页面的如果 script 在 body 前面此时下面元素还没创建出来getElementById拿到的是 null代码就直接报错了。这个问题等以后学到defer属性时你会找到更优雅的解法。6. Day 1 综合实战做一张个人名片页学了一堆散装知识点最容易第二天全忘。我的经验是学完立刻做一个“能跑通”的小东西把今天的知识点都揉进去。这个价值比多做十道选择题都高。这张个人名片页我设计得很小但 HTML 结构、CSS 样式、JS 交互全都有你跟着敲一遍保存刷新整个 Day 1 就闭环了。先建项目文件夹里面放三个文件index.html、style.css、app.js。方便起见把 HTML、CSS、JS 三个文件拆分出来这也是未来真实项目的组织方式。6.1 index.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 div classcard h1 classname小明/h1 p classintro前端学习者今天从 Day 1 开始/p p classstatus粉丝数span idcount0/span/p button idfollowBtn关注/button /div script srcapp.js/script /body /html注意我做了三件事link引入 CSS 放在head里script放在body底部然后给 JS 要操作的元素留了id。这三个习惯都是前面提到的坑里总结出来的。6.2 style.css给名片上妆body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f5f5; font-family: Arial, sans-serif; } .card { width: 300px; padding: 24px; border: 1px solid #eee; border-radius: 12px; text-align: center; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .name { margin: 0 0 8px; } .intro { color: #888; font-size: 14px; } .status { font-size: 14px; } #followBtn { margin-top: 12px; padding: 8px 20px; border: none; border-radius: 6px; background-color: #e04b57; color: #fff; cursor: pointer; }这段 CSS 里body用 flex 让整个卡片居中border-radius把卡片四个角变圆box-shadow加了一层浅浅的阴影卡片马上有了立体感。cursor: pointer让鼠标悬停在按钮上时变成小手这是交互反馈里最微小的细节但体验差别很大。6.3 app.js最简单的交互const btn document.getElementById(followBtn); const countSpan document.getElementById(count); let count 0; let isFollowing false; btn.addEventListener(click, () { if (!isFollowing) { count 1; countSpan.textContent count; btn.textContent 已关注; isFollowing true; } else { isFollowing false; btn.textContent 关注; } });这段代码做了三件事点击按钮后粉丝数加一按钮文字变成“已关注”再点一次按钮文字变回“关注”。用isFollowing这个布尔变量去记录当前状态这是编程里极其常见的“状态标记”用法。整个页面跑通一共不过 50 行代码但它涵盖了 HTML 结构、CSS 布局与样式、DOM 操作、事件绑定和状态切换。第一次完整跑通这个流程的成就感是前端学习路上第一批重要的正反馈。以后你回头看这个小名片会觉得它幼稚但那一刻的“哦原来是这样”千金不换。7. 第一天最容易踩的坑问题速查第一天会碰到的问题就那么几个而且几乎人人都会遇到。我直接给你整理成一张速查表遇到问题来对应着排查就行。现象常见原因检查思路页面打开是空白文件名不对、文件没保存、路径错误确认文件名是index.html编辑器底部显示“已保存”检查body里有没有内容中文变成乱码meta charsetUTF-8缺失或注释错误看head里有没有 charset 声明图片显示不出来图片路径写错、文件名大小不对、网络资源被拦先看 Network 面板里图片请求的状态码本地图片路径要相对当前文件位置CSS 样式完全没生效link路径不对、CSS 文件有语法错误、被更高优先级覆盖先看 DevTools Console 有没有资源 404再检查选择器名称是否和 class 完全一致JS 不执行script 标签放在了head里、找不到元素 id、代码报错优先看 Console 红报错把 script 放到 body 底部按钮点击无反应事件绑定代码在按钮渲染前执行、函数名写错把整段 JS 放到 body 底部再在addEventListener这行打断点或加console.log关于“样式不生效”有一个特别常见但被忽略的原因CSS 选择器写了.card但 HTML 里是classcard active这没问题但如果类名拼写有一个字母不一致CSS 就静默失效页面正常显示但样式不对。这种问题最磨人建议第一反应就复制粘贴类名不要手敲。另一个高频场景是“明明代码都对就是没有效果”八成是缓存问题。浏览器会缓存 CSS、JS 文件修改后刷新可能不生效。你可以在 DevTools 的 Network 面板勾选“Disable cache”并保持 DevTools 开启状态或者按Ctrl Shift R强制刷新。这个问题等你以后学会构建工具会有更系统的方案但今天知道这个手法已经够用。关于“记不住”这件事我要多说一句。第一天最大的心理坑是你试图“记住所有标签”。完全没必要。前端知识分两类一类需要理解一类机械记忆即可。比如盒模型、flex 布局属于前者理解后这辈子忘不了而某个标签的具体写法属于后者查文档就完事。你今天的任务是把前者理解透后者只要能认出来、知道去哪查就行。8. Day 1 之后的路怎么走如果你今天把上面跟着做完了恭喜你已经完成了很多人反复放弃的第一关。接下来你应该做什么我不给你安排太多任务只说方向。第一明后两天各做一个小页面刻意用上今天学过的标签、选择器、flex 布局和事件。没有应用的知识三天后必忘。这就像学骑车道理都懂不骑上去永远学不会。第二去了解一下 Git 和 GitHub。“把代码存到历史记录里”这个习惯越早养成越受益。第一天你就可以在自己的仓库建一个目录把这个名片页传上去哪怕只有一个人看着也是在记录自己的成长轨迹。第三把“前端学习路线”这条热搜词记下来等你基础比较牢之后再去搜索它。路线图很重要但前提是基础的土壤已经种下否则看了路线图你会发现每一行都在劝退。第四关于框架的选择。过阵子你会面临“学 Vue 还是 React”的灵魂拷问。我给你的建议是这个问题从 Day 1 开始就可以放在心里但答案要等 HTML、CSS、JS 基础都过关之后再定。国内许多公司的业务线更普遍用 Vue它的上手曲线相对平滑生态和中文资料也丰富通常我建议新手第一接触 Vue。但 React 在跨端生态上有自己的优势。选哪个都会有人质疑只要你基础扎实转哪个框架成本都不高。第五顺便记住“组件库”这个词。Element Plus饿了么团队出品和 Ant Design 是国内最常见的两个组件库等你熟悉了 Vue 或 React 之后会频繁用到它们。但一定不要一开始就抱着组件库学那就等于还没学会语法就先抄答案基础会一直虚着。包括热搜词里出现的“前端验证码输入框”“前端使用 Worker 上传大文件”“微前端”这些话题都是你有了一定经验之后才需要面对的第一天统统不用碰。最后再单独说一句关于面试题的事。很多人刚学就在刷“2026 前端面试题”。我的态度很明确太早刷题是浪费时间因为答案对你来说只是无意义的字符串背下来也会忘。面试题真正的价值是检验——等你亲手写过几个项目、踩过几个坑之后再打开你会发现大部分问题已经有直觉答案那时候查漏补缺刷题才有意义。Day 1 你要做的正好相反是大量做题、大量动手把“会看”变成“会写”。我当年第一次写“Hello World”的时候花了两天还搞不明白盒模型是怎么回事感觉周围所有人都比我强。后来我养成一个习惯每天不管多忙都写一个极小的页面哪怕只是把一篇文章从纯文本排成有标题有列表的样子坚持了大概一个月突然有一天再看到布局需求时脑子里不需要想手指就已经在键盘上敲出结构和样式了。前端基础学习的门槛真的不高但它折磨人的地方在于东西太多、杂讯太多你需要的是用一连串“小成功”把自己稳稳推进下去。Day 1 的名片页就是你脚下的第一块砖把它保存好然后接着盖墙吧。