一、核心技能准备1. 扎实的前端基础HTML、CSS、JavaScript掌握堆叠布局、性能优化、兼容性等至少掌握一门现代框架React、Vue优先React和Vue掌握前端工程化工具Git、npm/yarn、Webpack、Vite响应式设计Flexbox、Grid基本算法与数据结构提升逻辑思维和面试答题能力2. 互联网产品思维用户体验UX性能优化代码质量Lint、测试3. 后端基础可选但加分项Node.js 基础API设计与调用数据库MySQL、Redis二、项目经验积累独立开发项目实现完整功能如登录、商品展示、评论等参与开源项目积累代码阅读和协作经验模拟真实业务场景优化性能、处理边界情况三、面试准备熟悉常见算法题二分查找、排序、链表、树、数组等常考前端题闭包、作用域、事件模型、性能优化、跨域等熟悉公司技术栈React/Vue/Node等四、提升建议持续刷题LeetCode、牛客网参与开源项目打造自己的项目集GitHub展示深耕技术栈一到两个方向成为专家多参加技术社区、线下交流按阶段划分的前端学习课程推荐阶段一基础入门HTML、CSS、JavaScript基础1.HTML CSS基础前端开发入门教程web前端零基础html5 css3前端项目视频教程_哔哩哔哩_bilibili2.JavaScript基础黑马程序员JavaScript全套教程Web前端必学的JS入门教程零基础JavaScript入门_哔哩哔哩_bilibili阶段二前端框架React或Vue学习1.React入门黑马程序员前端React18入门到实战视频教程从reacthooks核心基础到企业级项目开发实战B站评论、极客园项目等及大厂面试全通关_哔哩哔哩_bilibili2.Vue.js入门前端最新Vue2Vue3基础入门到实战项目全套教程自学前端vue就选黑马程序员一套全通关_哔哩哔哩_bilibili阶段三布局、样式与性能优化1.响应式布局—Flexbox GridB站CSS-Tricks Flexbox Grid用于响应式布局的 CSS Grid Flexbox【CSS Grid Flexbox for Responsive Layouts, v2】_哔哩哔哩_bilibili2.网页性能优化WebPerformance讲解B站网页性能优化入门网页优化实战阶段四工程化与工具学习1.Git基础教学B站杜子腾老师Git入门实战Git教程2.打包工具Vite WebpackB站WebPack/ Vite入门Webpack入门教程Vite实际用法阶段五实战项目和刷题阶段一入门基础HTML CSSJavaScript基础阶段二前端框架React或Vue基础阶段三布局、样式与性能优化阶段四工程化与工具学习一、html5结构!-- 注释 --1.VSCode常用快捷键①代码格式化:shiftAltF②向上或向下移动一行:AltUp或 AltDown③快速复制一行代码:ShiftAltUp 或 ShiftAltDown④快速保存:ctrls⑤快速查找:Ctrl F⑥快速替换:Ctrl H2.声明3.html5基本骨架!DOCTYPE html htm1 head.../head body.../body /htm14.title的增加有利于SEO优化SEO是搜索引擎优化的英文缩写。通过对网站内容调整满足搜索引擎的排名需求5.单标签meta,包含在title!DOCTYPE html htm1 langen//langen代表当前语言是英文 head meta charsetUTF-8 titleitbaizhan/title /head body /body /htm16.标题标签h1-h6生成h1到h6快捷键:h$*6在标签中添加属性:alignleft | center | right默认居左7.段落标签p换行标签br单标签源码显示8.单标签hr/hr/标签在 HTML 页面中创建水平线》hr colorred width300px size5px align/ //px代表像素宽度属性:color:设置水平线的颜色width:设置水平线的长度size:设置水平线的高度align:设置水平线的对齐方式(默认居中)可取值left|right9. 图像标签定义imgimg--单标签注图片与网页在同一文件夹下img src alt title width heightEG:属性常规使用一般之规定宽度不规定高度防止图片失真src:路径(图片地址与名字)alt:规定图像的替代文本width:规定图像的宽度height:规定图像的高度title:鼠标悬停在图片上给予提示10.3种图片路径绝对路径是电脑的盘符存储与访问的具体地址图片与源码不在一个文件夹,相对路径./找同级/找子级同级的./可省略 ../返回到上一级子级关系:/eg:index与1。父级关系:./eg:hello与1。同级关系:../可以直接访问egindex与1。或网络路径11.超文本链接a /a在标签 a 中使用了herf属性来描述链接的地址即url默认情况下链接将以以下形式出现在浏览器中一个未访问过的链接显示为蓝色字体并带有下划线访问过的链接显示为紫色并带有下划线。点击链接时链接显示为红色并带有下划线。12.常用文本标签可以嵌套使用13.列表标签---有序列表可以进行嵌套有序列表是一列项目列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。源码》显示type属性ol的属性type 拥有的选项①1 表示列表项目用数字标号(1,2,3...)②a 表示列表项目用小写字母标号(a,b,c....)③A 表示列表项目用大写字母标号(A,B,C...)④i 表示列表项目用小写罗马数字标号(i,ii,iii...)⑤I 表示列表项目用大写罗马数字标号(Ⅰ,ⅡⅢ..)源码》显示14.列表标签---无序列表可以嵌套无序列表是一个项目的列表此列项目使用粗体圆点(典型的小黑圆圈)进行标记无序列表始于ul标签。每个列表项始于li标签。type属性ul 的属性type 拥有的选项①disc 默认实心圆②circle 空心圆③square 小方块④none 不显示快捷键生成ulli的布局:ulli*3(数字表需要的li数量修改)15.标签--表格表格标签表格:table行:tr单元格(列):td快捷键生成表格结构:tabletr*mtd*n {要显示的文本信息}源码回车显示常用表格属性①border:设置表格的边框②width:设置表格的宽度③height:设置表格的高度源码显示16.表格单元格合并(保留左上删除右下水平合并:colspan垂直合并:rowspaneg:合并单元格1和27和11》17.form表单表单在 Web 网页中用来给用户填写信息从而能采用户信息使网页具有交互的功能。所有的用户输入内容的地方都用表单来写如登录注册、搜索框。表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。属性说明action服务器地址name表单名称method中Get和Post的区别数据提交方式get把提交的数据url可以看到post看不到get一般用于提交少量数据post用来提交大量数据18.*表单元素一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。表单标签form、表单域input、表单按钮submit\button源码》显示①文本框文本域通过input type text标签设定②密码框密码字段通过input type password标签设定密码字段不会明文显示而是以星号或原点代替③提交按钮19.块元素与行内元素内联元素每个块元素独占一行行内元素只占自身大小一行左至右一次排放常见块元素div、form、h1-h6、hr、p、table,ul等常见内联元素行内元素a、b、em、span、strongs等行内块级元素特点不换行、能够识别宽高button、.img、input等20.html5新增标签div容器标签容器结构——一个正常div——H5新标签header/header头部nav/nav导航section/section定义文档中的节比如章节、页眉、页脚aside/aside侧边栏footer/footer脚部article/article代表一个独立的、完整的相关内容块例如一篇完整的论坛帖子一篇博客文章一个用户评论等21.*表单标签(单项默认选择checked多选默认选择selected)input系列标签在网页中显示收集用户信息的表单效果如登录页、注册页input标签可以通过type属性值的不同展示不同效果type属性值(默认text)——eg:!--注释br换行-- !--placeholder提示用户输入内容-- 文本框input typetext 文本框2对比placeholderinput typetext placeholder请输入用户名 br 密码框input typepassword 密码框2input typepassword placeholder请输入密码 br 单选框input typeradio br 多选框input typecheckbox br 文件选择input typefile br 提交按钮input typesubmit br 重置按钮input typereset br 普通按钮input typebutton——radio属性(多选的默认选择也是checked)file属性multiple多选文件submit、reset功能实现前提有表单域form功能。value:给button按钮添加显示文字修改submit、reset默认显示文字也是valuebuttont系列标签在网页中显示用户点击的按钮select系列标签:提供多个选项下拉菜单控件textarea文本域系列标签可输入多行文本的表单控件右下角可调宽高但一般用CSS调宽高lable系列标签绑定内容与表单标签关系语义化标签分有语义标签和没有语义标签div和span——用于做网页布局div:独占一行span:一行可显示多个有语义标签了解手机端网页使用网页导航网页底部字符实体1、HTML中的空格合并现象2、常见字符实体第二个及往后用的少注结尾在网页中显示特殊符号综合作业1_学生信息表综合作业2—表单二、CSS样式基础——css层叠样式表-/*css注释*/1、CSS引入方式内嵌式当前页面一般写在head标签里的style标签中style标位于title标签下外联式多个页面CSS写在一个单独的.css文件中通过link标签在网页中引入行内式当前标签配合js)CSS写在标签的style属性中2、基础选择器①标签选择器用于查找标签②类选择器通过类名找到网页中所有带有这个类名的标签设置样式一个标签可以同时有多个类名类名间以空格隔开类名可以重复一个类选择器可以同时选中多个标签。③id选择器类名不可以重复其不是用来作美化使用④通配符选择器3.字体和文本样式1字体样式①字体大小font-size数字px不设置单位无效②字体粗细font-weight③字体样式是否倾斜font-style④字体系列调节字体类型font-family无衬线字体sans-serif衬线字体serief等宽字体monospace⑤font属性复合空格隔开fontstyle weight size family省略时只能省略前两个复合属性一个后跟多个值的写法各值间空格隔开2.文本样式①文本缩进text-indent取值数字px*数字em(1em当前标签的font-size的大小)②文本水平对齐方式text-align取值默认左对齐图片span标签、a标签、input标签居中时text-align: center要给这些元素的父元素设置③文本修饰text-decoration取值3.line-height行高取值①数字px;②倍数line-height可以放在font属性line-height与size用斜杠隔开其他用空格隔开4.扩展1》颜色常见取值2》标签水平居中方法总结margin0 auto;0表上下间距auto表左右间距——左右auto就能居中4.chrome调试工具F12或浏览器右键-检查删除线代码重复被覆盖掉--黄色感叹号说明语法有问题--方框中勾上的说明生效的不想要该效果 取消对应的勾可以在样式框中调整样式但不会被报存。5.综合案例案例1新闻网页案例2效果图二、CSS样式进阶1.后代选择器三、Javascrip基础1.JS 的组成ECMAScript基础——规定了JS的编程语法和基础核心知识是所有浏览器厂商共同遵守的一套JS语法工业标准。DOM进阶页面文档对象模型——是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作大小、位置、颜色等。BOM浏览器对象模型——提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口比如弹出框、控制浏览器跳转、获取分辨率等。2.js样式①行内式②内嵌式③外部式3.注释4命名5.JavaScript输入输出语句6.声明变量var 变量名7.JS把数据类型分为两类Number数值型可以是整数也可以是小数复杂数据类型object)数据类型转换转换为数字型//转数值型parseInt取整去单位转整型 parseFloat转浮点//Number变量“- * 、”算数运算的减乘除布尔型转换8.转义字符选择语句①if-else②多分枝选择语句switch循环语句①for②while③do-while9.10.创建数组元素可以是任意类型①利用new创建数组②利用数组字面量创建数组11.函数声明没有return返回undefine①利用函数关键字自定义unction hanshuming(){ return 返回结果 }②函数表达式(匿名函数):​​​​​​​var变量名function(){}; var num 10; //1fun是变量名不是函数名 //2函数表达式声明方式跟声明变量差不多只不过变量里面存的是值,而函数表达式里面存的是函数 //3函数表达式也可以进行传递参数12.arguments(隐藏了所有的实参)使用当我们不确定有多少个参数传递的时候可以用arguments来获取。在JavaScript中arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象arguments对象中存储了传递的所有实参。arguments展示形式是一个伪数组因此可以进行遍历。伪数组具有以下特点●具有length属性●按索引方式储存数据●不具有数组的pushpop等方法function fc(){ console.log(arguments);// } fc(1,2,3);//调用13.创建对象三种方式script //①利用对象字面量创建对象{} //用逗号隔开里面的属性或者方法我们采取键值对的形式键 //varobj{};创建了一个空的对象 var obj1 { uname:张三疯, age:18, sex:男, sayHi:function(){ console.log(hi~); }//方法冒号后面跟的是一个匿名函数 } console.log(obj1.age);//使用对象1:对象名.属性名 console.log(obj1[age]);//使用2对象名[属性名] //调用对象的方法对象名.方法名 obj1.sayHi(); //②利用new object();利用等号赋值用分号隔开 var obj2 new Object();//创建空对象 obj2.unamezhang; obj2.age18; obj2.sayHifunction(){ console.log(hi~); } //③利用构造函数创建对象-一次创建多个多个对象的属性方法相同前两方式一次只能创建一个对象 // /* function 构造函数名(){ this.属性值; this.方法function() {} } //构造函数名首字母大写 */ function Star(uname,age,sex){ this.unameuname; this.ageage; this.sexsex; this.sing function(){ console.log(); } } var ldh new Star(刘德华,21,男);//调用构造函数必须用new console.log(ldh.uname); console.log(ldh.age); console.log(ldh.sex); ldh.sing(sing属性值); //var ldh2... /*new关键字在构造函数中的作用 1.new构造函数可以在内存中创建了一个空的对象 2.this就会指向刚才创建的空对象 3执行构造函数里面的代码给这个空对象添加属性和方法 4.返回这个对象 */ /script14.JavaScript中的对象分为3种自定义对象、内置对象、浏览器对象自定义对象、内置对象是JS基础内容属于ECMAScript浏览器对象属于JS独有的内置对象内置对象的使用可以通过查阅MDN/W3C文档MDN:MDN Web Docsdate()日期格式化时间戳//获得Date总的毫秒数时间戳不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数 //1.通过valueOf() getTime() var date new Date();//返回当前时间毫秒数 console.log(date.valueOf());//就是我们现在时间距离1970.1.1 console.log(date.getTime()); //2.简单的写法最常用的写法 var date1 new Date();// new Date()返回的就是总的毫秒数 console.log(date1); //3H5 新增的 获得总的毫秒数 console.log(Date.now());倒计时/*倒计时 将来的时间戳减去现在的时间戳剩余的转化为日时分秒 d parseInt(总秒数/60/60/24);//天数 h parseInt(总秒数/60/60 %24);//时 m parseInt(总秒数/60 %60);//分 s parseInt(总秒数%60);//秒*/ function countDown(time){ var nowTime new Date();//返回当前时间毫秒数 var inputTime new Date(time);//用户输入时间 var times (inputTime - nowTime)/1000; var d parseInt(times/60/60/24);//天数 dd10?0d:d; var h parseInt(times/60/60 %24);//时 hh10?0h:h; var m parseInt(times/60 %60);//分 mm10?0m:m; var s parseInt(times%60);//秒*/ ss10?0s:s; return 倒计数 d 天 h 时 m 分 s 秒; } console.log(countDown(2026-1-7));15.数组//创建数组两种方式 var 数组名new Array(n);//①利用new创建数组,创建了长度为n的空数组 var 数组名new Array(n,m);//创建了含n,m两个元素的数组 var 数组名[]];//②利用数组字面量创建数组 console.log(arr[i])//检测是否为数组 //①instanceof运算符 var arr[]; var obj{}; console.log(arr instanceof Array); console.log(obj instanceof Array); //②Array.isArray(),h5新增 console.log(Array.isArray(arr)); console.log(Array.isArray(obj));数据翻转去重var arr new Array(); //翻转数组 /*function reverse(arr){ var newArr[]; for (variarr.length-1;i0;i--){ newArr[newArr.length]arr[i]; } return newArr; }*/ function reverse(arr){ if (arr instanceof Array){ var newArr[]; for (var iarr.length -1; i 0; i--){ newArr[newArr.length]arr[i]; } return newArr; }else{ return 这个参数要求必须是数组格式[1,2,3] } } console.log(reverse([1,2,3])); console.log(reverse(1,2,3)); //检测是否为数组 //①instanceof运算符 var arr[]; var obj{}; console.log(arr instanceof Array); console.log(obj instanceof Array); //②Array.isArray(),h5新增 console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); //数组去重 //数组去重[ca’, a,a,x,c,b’]要求去除数组中重复的元素。 //1.目标把旧数组里面不重复的元素选取出来放到新数组中重复的元素只保留一个放到新数组中去重。 //2.核心算法我们遍历旧数组然后拿着旧数组元素去查询新数组如果该元素在新数组里面没有出现过我们就添加否则不添加。 //3.我们怎么知道该元素没有存在利用新数组.indexOf(数组元素如果返回时-1就说明新数组里面没有改元素 function unique(arr){ var newArr[]; for (var i0; iarr.length;i){ if (newArr.indexOf(arr[i]) -1){ newArr.push(arr[i]); }//newArr.indexOf(arr[i]),在 newArr 中查找 arr[i] 第一次出现的位置 //:严格相等类型不同也返回false } return newArr; } var demo unique([c,a, a,a,x,c,b]); console.log(demo);添加/删除数组元素返回数组元素索引数组转字符串16.基本包装类型三个类型:String、Number和 Boolean17.字符串​​​​​​​根据位置返回字符//根据字符返回位置:indexOf(),lastIndexOf(),返回第一个/最后一个索引 var str改革春风吹满地春天来了; console.log(str.indexOf(春)); console.log(str.indexOf(春,3));//从索引号是3的位置开始往后查找 //查找abcoefoxyozzopp中所有o出现的位置以及次数 var str1abcoefoxyozzopp; var indexstr1.indexOf(o); var counter0; while( index ! -1){ console.log(index); indexstr1.indexOf(o,index1); counter; } console.log(出现次数counter); //根据位置返回字符:charAt(index)charCodeAt(index)-返回对应ASCII码str(index)-h5新增 //1 var str2 andy; console.log(str.charAt(3)); for (vari0;istr.length;i){ console.log(str.charAt(i)); } //2.charCodeAtindex返回相应索引号的字符ASCII值目的判断用户按下了那个键 console.log(str.charCodeAt(0));//97 //3.str[index]H5 新增 console.log(str2[0]);字符串的基本方法1.替换字符replace被替换的字符‘替换为的字符2.字符转换为数组split分隔符​​​​​​​/*字符串拼接操作方法 conat(str1,str2,str3.…. substr(start,length) slice(start, end) substring(start, end)*/ var strmy name is jeanyia; console.log(str.concat(hfdju));//相当于 console.log(str.substr(2,8)); console.log(str.slice(2,7));//从start位置开始截取到end位置end取不到 console.log(str.substring(2,6));//和slice相同但是不接受负值 //1.替换字符replace被替换的字符‘替换为的字符 var str cfsdvgfdsgf console.log(str.replace(c,a)); //2.字符转换为数组split分隔符 console.log(str.split(v));18.数据类型的 内存分配简单类型又叫做基本数据类型或者值类型存储时变量中存储的是值本身存放在栈中系统分配释放如stringnumber,boolean,undefined,null复杂类型又叫做引用类型存储时变量中存储的仅仅是地址即引用存放在堆中程序员分配释放通过new关键字创建的对象系统对象、自定义对象如Object、Array、Date等1.简单数据类型是存放在栈里面里面直接开辟一个空间存放的是值2.复杂数据类型首先在栈里面存放地址十六进制表示然后这个地址指向堆里面的数据六、vue3:​​​​​​​https://cn.vuejs.org/脚本部分入口createAppimport { createApp, ref } from vue createApp({ setup() { return { count: ref(0) } } }).mount(#app)代码解析1.​​​​​​​import { createApp, ref } from vue从 Vue 库中导入 createApp创建应用实例和 ref响应式引用创建一个响应式数据。2.createApp({ ... }).mount(#app)创建Vue 应用实例并挂载到页面中 idapp 的根元素。3.setup() { return { count: ref(0) } }setup是 Vue 3 的组合式API 的入口函数在组件实例创建阶段调用。count是一个响应式引用ref初始值为 0。ref(0) 会返回一个对象包含一个 .value 属性用于存放实际数据并且具备响应性。setup 返回一个对象其中的属性会暴露给模板使用。在这里暴露 count。count: ref(0) 的写法是把 count 暴露给模板初始值为 0。实际值通过 count.value 访问。模板部分div idapp button clickcount Count is: {{ count }} /button /div代码解析1. div idapp作为挂载点和 mount(#app) 对应。2.button clickcount给按钮绑定点击事件当按钮被点击时执行 count。在组合式 API 下模板会自动处理对 ref 的解包。在模板中直接写 countVue 会自动把 count.value 投入模板中。Count is: {{ count }}将 count 的当前值渲染到按钮文本中。由于 count 是一个 ref模板会自动读取其值等同于 count.value。知识点1.el:挂载点①Vue实例的作用范围是什么呢?Vue会管理el选项命中的元素及其内部的后代元素②是否可以使用其他的选择器可以使用其他的选择器但是建议使用ID选择器③是否可以设置其他的dom元素呢可以使用其他的双标签不能使用HTML和BODY2.data:数据对象Vue中用到的数据定义在data中data中可以写复杂类型的数据渲染复杂类型数据时遵守js的语法即可!-- 3模板语法把数据渲染到页面 -- div idapp {{message }} h2{{ school.name }} {{school.mobile }}/h2 ul li{{campus[0] }}/li li{{campus[3] }}/li /ul /div !-- 1导入开发版本的Vue.js -- !--开发环境版本包含了有帮助的命令行警告-- script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script script // 2创建实例对象 var app new Vue({ //2设置el和data属性 el:#app, data:{ message:你好小黑, school:{ name:黑马程序员, mobile:400-618-9090 }, campus:[北京校区,上海校区,广州校区,深圳校区] } }) /scriptVue本地应用1. 内容绑定事件绑定vtextvhtmlV-on基础2. 显示切换属性绑定vshowvifvbind3. 列表循环表单元素绑定v-forv-on补充vmodelv-text设置标签的文本值textContent如果部分替换使用{{。。。}}v-html设置标签的innerHTML​​​​​​​V-on基础为元素绑定事件内容绑定实例——计数器4.v-show:根据表达值的真假切换元素的显示和隐藏​​​​​​​5.v-if:根据表达值的真假切换元素的显示和隐藏操纵dom元素与v-show区别v-show操作的是样式频繁切换的元素用v-show,反之用v-if6.v-blind:设置元素的属性(比如:src,title,class)可省略为显示切换实例——图片切换7.v-for:根据数据生成列表结构8.v-on补充传递自定义参数事件修饰符​​​​​​​9.v-model:获取和设置表单元素的值双向数据绑定列表循环实例——记事本1.新増生成列表结构v-for数组——获取用户输入(v-model)——回车,新增数据(v-on.enter添加数据2.删除3.统计统计信息个数v-textlength)​​​​​​​4.清空​​​​​​​5.隐藏没有数据时隐藏元素v-showv-if数组非空Vue网络应用(网络请求库axios)网络请求库script srchttps://unpkg.com/axios/dist/axios.min.js/scriptaxios.get(地址?keyvaluekey2values).then(function(response){},function(err){}axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){}key由接口文档提供可访问接口axiosvue