先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
如果你需要这些资料，可以添加V获取：vip1024c （备注前端）
正文
如果大家平时多逛一下技术论坛，你们大概率就能见到他言论。
比如知乎上，就能经常看到他的一些回复和留言。
以一己之力，就能抗衡这些大厂的框架，而且 Vue 非常 火，隐隐有赶上 React 的节奏。
至于 Angular，在国内用的很少。
国内主要就是 React 和 Vue，当前 React 份额更高，但是 Vue 也不甘示弱。
估计很快就能赶上 React，乃至超过 React 也是非常困难的。
====================================================================
===================================================================
首先，我们先来学习 HTML。
HTML，本省的语法比较简单，语法风格 和 Java 之类的差别很大。
它不像一个表达逻辑的语言，而只是一个叫做 标记的语言。
就是说：HTML 并不能表达一些逻辑，而只是能表达“有哪些东西”的一种信息。
所以，HTML 不是用来表达逻辑的，而是用来表达信息的。
很简单！
1、创建一个文本文件
2、将文件后缀改成 .html 即可。
这栋最好的特点就是：如果我们想要运行 html 也不需要额外的编译器什么的，直接有浏览器就行、
这种前端开发的学习，就要比我们的 C，Java等等…要省事很多！
像我们学习Java，要装jdk，编译 器idea，搭建环境…
很多新手，都在这里栽过跟头。
但如果你要学习前端的话，直接一上来，拿着记事本就能写，有浏览器就能运行。
根本就不需要去安装额外的东西！
这对新手来说：非常友好！
虽然，我们完成一个最简单的HTML代码，但是有一个很大的问题！
就是用记事本去写代码，是在是太麻烦了。
记事本就不适合用来写代码
替代方案：
1、直接使用 idea
idea，是分有 社区版 和 专业版的。
社区版：只支持HTML，不支持 CSS 和 JS，这就会导致后面的很多代码没有高亮和提示。
专业版：支持HTML，CSS 和 JS，完全能够胜任。
不要使用 idea 的科学（pojie）之后的专业版，有bug，会无缘无故的报错。
2、可以使用 VSCode 来作为这里的开发工具。
VSCode 对于前段是天然支持的，不需要安装任何额外的插件。
就可以很好的胜任前端的基础开发。
我们目前使用 VSCode来编写，使用浏览器直接运行本地文件。
用这样的方式来进行开发和测试。
如果你是使用的idea写的，写好之后，右侧上角有一个 浏览器的小图标。
你直接点击图标就可以打开浏览器。
idea 的 运行方式 和 直接双击的运行方式，其实本质上是不同的。
学到后面，这两个操作会存在一定的差别。
本篇博客，以双击运行的方式来进行的。
如果在后面的操作中，你们当中有人用idea这种方式来运行的。
结果不一样，不要在下方评论。
小拓展：
快速编写 HTML 代码的小技巧
大家会发现用 VSCode写HTML 代码。没有idea方便。
因为idea 之久就给我们写好了。
不要着急抱怨。
VSCode也有着 快熟创建的创建的 HTML 代码的机制。
就是： ！加 tab键，或者 ! 加 enter键
此时，VSCode就会自动生成 一个默认的网页模板。（主流开发工具（包括idea）都有这个功能，叫做emmet 风格的快捷键）
这里面生成的代码，和我们刚才手敲的代码是有所不同的，下年我们来简单讲讲。
记住！在VSCode中，修改了代码，一定要记得即使保存。
当然VSCode 也可以配置成自动保存，但是VSCode 默认是手动保存。
如果没有保存，直接刷新界面，是看不到效果的
浏览器的开发者工具
当页面显示内容成功之后，如果在浏览器里面看到 页面的详细结构呢？
在浏览器中，有一个非常非常重要的组件：开发者工具！
通过这个开发者工具，就可以观察到页面的基本结构！！
按下快捷键 F12.
如果你使用的是笔记本: FN 加 F12.
或者，右键页面的任意位置，选择菜单的中审查元素也是一样的。
我们这个界面太简单了，可能朋友们印象不深。
我来看个复杂的。
由于界面太复杂了，我们想观察一个特指的元素怎么办？
比如搜索搜索的logo
太小了，对吧？
按照上面的快捷键去调试一下，就OK了。
下面这样就很清楚了吧？
也就说：你想看那块地方的代码，就用这个箭头点一下，它就能跳转到对应的位置
小结
我们已经了解了 HTML基本开发方式，也了解了浏览器如何查看页面结构。
接下来，就开始具体学习 HTML 中的语法细节。
说是语法细节，实际上学习的是 HTML 中的各种标签。
一个网页上可能有连接，文本，按钮，输入框，图片等等…很多不同的元素。
这些页面上不同的元素，就对应到 HTML 的标签。
所以，我们学习 HTML 就是在学习各种标签，以及它们的用法 和 使用时的注意事项。
换个说法：如果我们把这些常用的标签掌握了，HTML也就是掌握了！
首先。要明白 HTML 描述了 页面上都有什么东西，它不表达逻辑。
比如：java中的变量，条件，循环，方法，类，集合类等等…
这些 HTML 都没有。
HTML有的只是 标签。
到了这里，其实大家就可以放宽心了。
前端这里虽然是要学习 HTML，CSS，JS，这三个语言。
但是实际上，只有 JS 是一个正经语言。
另外两个都只是表示信息，语法规则都非常简单。
注释标签
. HTML 也是可以写注释的。
只不过，它的注释风格有些特别。
注释写起来比较麻烦，可以借助快捷键来快速实现。【Ctrl 加 / 来切换注释 】
就是和 idea 添加注释符是一模一样的快捷键。
注意！注释标签是不能嵌套的。
小拓展 :
HTML 可以不公开注释标签。
当前是直接运行的HTML，所以是能够看到的。
实际开发中，往往一个完整的前端项目，要通过一些打包构建工具来进行构建。
这个构建的过程中就会把 HTML中的注释给去掉。
包括对 JS 代码也会进行一些处理（混淆和压缩之类的工作）
另外，这不是一个技术问题。
我们虽然可以通过技术来保证注释不被外面的人看见。
但是！保不齐，你写了一句不该写的注释，被同事看见了。
直接给你截屏发网上了。
【不要怀疑！真的是有这种人。觉得好玩就发出去了】
最好就别写一些多余的注释。
标题标签
标题标签一共有6个
h1 至 h6.
数字越小，里面的内容就越粗越大。
数字越大，里面的内容就越细越小。
写过博客的朋友都知道 几级标题 吧？
这个 h1 - h6，就相当于 # - ######【一级标题 至 六级标题】
段落标签
段落标签，叫做 p 标签。
这个就表示一个段落。
毕竟报纸除了标题之外，还有正文。
正文就得分段，所以我们就得通过 p 标签 来去表示段落。
换行标签
换行标签：br
格式化标签
格式化标签，其实是针对 文本 进行一些样式上的调整。
1、加粗: strong 标签 和 b 标签
2、倾斜: em 标签 和 i 标签
3、删除线: del 标签 和 s 标签
4、下划线: ins 标签 和 u 标签
以上这四组标签，每组标签中的两个标签都是等价的，效果是相同的。
图片标签
图片，可以使用img标签来表示图片。
img 也是一个单标签。（不需要结束标签）
img 里面可以写很多的属性，其中最终的属性就是 src 属性。
通过 src 描述图片具体所在的位置。
img 标签的其他属性
超链接标签
超链接标签，也就是 a 标签。
它的效果：就是在点击之后能够跳转到其它的页面。
这其实也是我们用户进行交互的一个重要途径。
另外，在本页面内跳转，这个机制。
可以通过锚点链接来实现，也可以通过 JS 来实现。
其中使用 JS 实现，就可以加入一些动画效果（类似PPT的动画效果），用户体验会更好。
注意！上面形容锚点链接的效果，JS也能做到。
瞬间跳转到指定位置，不带任何动画效果。
此时，可能是锚点链接实现的，也可能是 JS 实现的（不做动画效果就行了）。
总得来说：JavaScript，能做到的事情更多。
锚点链接 本省属于 HTML 的内容，功能是有限的。
JS 的功能是更强的。
拓展
a 叫做 超链接标签。
其中涉及到 链接。
说到链接，就不得不说到：连接 和 链接之间的区别。
连接 - Connection：表示与客户端和服务器通信就绪的一种状态。
1、数据库的JDBC，需要数据库服务器建立连接。
2、TCP 三次握手 建立连接。
链接 - Link：表示快捷方式
通过点击某个 数据/图片，可以直接 打开软件 / 访问网站。
表格标签
表格标签，它是一组标签。【不止一个】
1、table 标签: 表示整个表格
2、tr: 表示表格的一行
3、td: 表示一列
4、th: 表示表头中的一列. 会居中加粗
5、thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
6、tbody: 表格得到主体区域
其实
1、border加上边框
2、使用 th 标签 给表格加上表头
3、使用cellspacing 属性去掉单元格之间的间隙
这三个操作也是可以通过 CSS来实现的。
实际开发中，很少会直接使用 table 属性来做。
有的人会很疑惑：
HTML 能实现表格，CSS也能实现表格。
这不就画蛇添足嘛？
确实如此！
这是一个历史遗留的问题。
上古时期，当时只有HTML，没有CSS。
当时的我们的网页也比较简单，你要想实现一些样式的效果的调整。
都得靠 HTML 本身的一些属性。
但是后面随着 我们代码越写越多。
写得多了，你会发现：用 HTML 来实现样式的效果的调整，很难受。
光靠 HTML 能实现的样式效果太少了！已经跟不上人们的需求。
所以，后面就发明了 CSS。
有了CSS之后，我们就相当于把 样式 和 本来页面的结构，给分离开了。
然后，CSS里面就接管了很多原来 HTML 的一些功能。
当然，HTML 原有的一些功能，也没有删干净，有些就保留下来了。
所以，就造成了当前的现状。
列表标签
列表标签，主要用来罗列一组 并列的数据。
列表标签里面一共有三种：
1、无序列表
2、有序列表
3、自定义列表
表单标签
像有些页面带有输入框，这其实就是通过表单标签来实现的。
比如：b站
除此之外，还有一些：下拉菜单 ，单选框，复选框，这些都是 表单标签来实现的。
表单标签，是用户和页面之间交互的重要手段。
大部分的 HTML 标签 都是给用户“展示”。
而表单标签，是让用户来“输入”。
select 标签
select 标签，起到的效果是“下拉菜单/下拉框”
textarea 标签
textarea 标签，表示 多行编辑框。
前面的 input 标签，虽然也能让我们进行编辑，但是 input 只能编译一行，不能换行的。
小结
以上这些标签都是搭配 表单（form）标签 使用的 。
在 form标签内部进行使用。
不要有太大压力，不用背。
多练练也就记住了。
有个还不错的印象就行了。
另外，HTML 一些常用的标签也都介绍的差不多了。
最后，再说一组标签：无语义标签
div 标签 - division - 含义是 分割
span 标签 - 含义是跨度
这两个标签，其实是出厂频率最高的标签。
前面的标签，都是“有语义”的标签，每个标签都有一个明确的角色。
比如：
p：表示一个段落
input：表示单行的输入框
a：表示超链接
依次类推。
它们都是有着自己明确的角色。
这些就叫做“有语义的标签”。
之所以有这么多“有语义标签”，是因为 HTML 诞生的初衷就是为了去表示“报纸/杂志”这样的媒体。
想想看，既然是表现“报纸/杂志”，就肯定会有标题，段落，换行，选项，图标，列表等等、、、
这是HTML的最终目的，但是随着时间推移，对于前端的要求在不断的提高。
还是拿b栈来说，你能说它的页面想报纸吗？
这个东西，就和我们所谓的传统媒体已经有很大的区别了！
这些页面已经变得非常丰富多彩了！
里面有很多丰富的动态交互效果。
现在我们所看到的页面，已经不能单单的认为是一张报纸了。
而得认为是一个“应用程序”。
页面上显示的东西更加复杂，交互的效果更加丰富。
正式因为网页变成了一个“应用程序”，那还需要说什么标题，段落，超链接吗？
这个时候，其实这些概念就越来越弱化了，
相比于 有语义标签，无语义标签更适合于“应用程序”的场景。
一个应用程序是多变的。
比如：我们现在要显示一个什么什么东西，这个东西已经没有办法把它套入什么标题，段落，这样的框架里。
因此，这个时候我们也就不用去管标题，段落什么的！
我们就直接使用这种无语义标签来去表示就可以了！
其实我们这里的 div 和 span，它们的功能就可以代替上面绝大部分的有语义标签！
图片，超链接，各种标题什么的，这种都是可以代替的。
只要通过 CSS 设计成一些不同的样式，就可以做到 让 div 和 span “长得”和我们原有的那些标签一摸一样。
唯一无法代替的是 form 这一系列的标签。
极端来讲：
我们的一个网页，可以 90%的标签都是 div / span，这是完全可行的！
但是这种做法并不常见。
具体无语义标签是什么？
它就没有任何语义！可以用来表示任何标签！
div 和 span 有什么区别？
唯一的区别：
div 默认是一个块级元素（独占一行）
span 默认是一个行内元素（不独占一行）
其实块级元素和行内元素，这两个元素的特性，不止这一个。
还有一些其他的，这点后面在讲CSS里面的一些细节的时候，再来去详细的展开。
=================================================================
介绍到这里，其实HTML的标签还没有全部认识到。
但是常用的 HTML 标签就这么多，我们的学习任务，就是熟悉这些常用标签。
如果你想了解的更多，你可以去查询 MDN 文档
是一个mozilla 开源的组织创建的，该开源组织，最大的一个产品就是 firebox（火狐） 浏览器。
当前最主流的浏览器是 Chrome（edge），在这之前是 IE。
而firebox 一直都没能登上巅峰，但是也没有被落下。
注意！我说的浏览器指的是 内核，内核是浏览器最核心的功能部分。
但是，市面上看到的大部分浏览器，其实都是没有自主研发内容，都是在现有的内核基础上，套了皮。
比如：搜索浏览器，360浏览器，猎豹浏览器，2345浏览器…这些都是套壳的产物。
【这些都是拿着比较古老的 Chrome 来套皮的】
真正的浏览器内核，那也就是 IE，Chrome，Firefox。这些都是有着自研内核的浏览器。
我建议：咱们以后参加在线面试的时候，最好就用 Chrome。
浏览器之间的差别是非常大的，很可能一个页面在 A浏览器下正常，在B浏览器下就有bug。
但是不管怎么样！这个页面对于Chrome一定是支持最好的！！！
像国内的一些浏览器打一个双核的名号，其实 双核 == Chrome + IE。
这是一个历史遗留问题。
在以前，有一些网银是不支持 Chrome的，只支持 IE。
就是它从安全性上考虑，需要用到 IE 里面一个叫 Active 的插件。所以一直不支持 Chrome。
所以，当时国内读的浏览器厂商为了迎合用户，为了让用户能用到 网银，又能用到 Chrome，于是就搞一个双核浏览器。
极速模式，就是Chrome
兼容模式。就是IE
===================================================================
基于上述学习的内容，写两个简单的案例。
做出一个跟下面这张图类似效果的简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<h1>博主的简历</h1>
<h2>基本信息</h2>
<img src="flower.jpg" alt="" title="DarkAndGrey" height="150">
<p>求职意向: Java 开发工程师</p>
<p>联系电话: 110</p>
<p>邮箱: 110@qq.com</p>
<!-- 我的gitup链接就不给了，都是博客的例子，主要看到的博客就行了 -->
<p>
<a href="#">我的gitub</a>
</p>
<p>
<a href="https://blog.csdn.net/DarkAndGrey?spm=1010.2135.3001.5343">
我的博客
</a>
</p>
<h2>教育背景</h2>
<ol>
<li>1990 - 1996 动感超人幼儿园</li>
<li>1996 - 2002 奥特之星小学班</li>
<li>2002 - 2005 假面来打初中班</li>
<li>2005 - 2008 复仇者联盟高中班</li>
<li>1990 - 1996 社会体验大学 专科</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>Java 基础语法扎实，已经刷了 800 道LeetCode题</li>
<li>常见数据结构都可以独立实现并熟练应用</li>
<li>熟知计算网络理论，并且可以独立排查常见问题</li>
<li>掌握 web 开发能力，并且独立开发了学校的留言墙功能</li>
</ul>
<h2>我的项目</h2>
<ol>
<!-- 第一恶项目 -->
<li>
<h3>留言墙</h3>
<p>开发时间: 2008年9月 到 2008年12月</p>
<p>功能介绍:</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<!-- 第二个项目 -->
<li>
<h3>学习小助手</h3>
<p>开发时间: 2008年9月 到 2008年12月</p>
<p>功能介绍:</p>
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<p>
本人除了能卷, 就没有其他优点。
</p>
</body>
</html>
至于添加边框，在下一篇 CSS 中。
因为需要借助 CSS 来实现。
拓展：关于个人评价怎么写。
大家后面都是要去写简历的。
网上很多的简历模板，就会写着 个人评价，
个人建议，这个 个人评价最好就不要写！
这个东西写了，可能会把自己给坑了。【防止你吹大了】
如果非要写，尽量写客观的内容，不要写主观的内容。
客观：就是指一符合实际情况，有物品可以证明的。
主观：就是虚的，纯属扯淡的哪一种！
比如：本人乐观开朗，积极向上，沟通组织能力强…这些面试官压根就不会信。
如果 hr 都已经看麻了那还好，就怕有那种抬杠的HR。
你是真的乐观开朗，积极向上，沟通组织能力强吗？
请你举出你生活中的实例，证明你乐观开朗，积极向上，沟通组织能力强。
【懵逼】
如果你能举出来，举的好，也就罢了。
但如果没举明白，立马就会被打上 不诚信，简历作假的标签。
不诚信，简历作假：这是所有的公司的高压线，触之必死！
哪怕你们前面技术层面的东西，答得再好，也是一样凉凉。
实事求是，才是最稳妥的做法。
吹牛皮，秀操作都是危险操作，容易直接凉凉！
很多时候，公司辞退人，都是因为“态度问题”。
另外，非常不建议大家相互参考简历，根据自己的能力来写实。
选择日期根据月份来变化，目前还实现不了。
这是必须要搭配JS，才能实现的。
根据月份的选项，JS 来动态生成日期 select 里面的option 的内容。
另外，可能有人会因为他的细心，而产生疑问：input 不是和 form搭配的吗？
如果需要和服务器进行交互，是需要搭配from的。
但是，当前只是写一个简单的纯页面，不涉及到提交到服务器，所以就不必用form。
正常情况下，都是要搭配使用的。
比如：
去面试写一个这样的程序。那么就需要写了。
有没有form，只是影响能不能给服务器提交，不影响页面的显示。
当然，也有办法，不依赖form 实现数据的提交给服务器，后面会详细介绍。
而且，是一个重点内容，暂时不剧透了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>填写简历</title>
</head>
<body>
<h1>请填写简历信息</h1>
<table>
<!-- 这个表格每一行有两列 -->
<!-- 姓名 -->
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<!-- 选择性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" id="male" checked="checked">
<img src="性别男.png" height="20px">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<img src="女.png" height="20px">
<label for="female">女</label>
</td>
</tr>
<!-- 出生日期 -->
<tr>
<td>出生日期</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择天数--</option>
<option>1</option>
<option>2</option>
### 最后
**小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：**
**凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。**
**入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。**
**整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。**
**而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。**
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）**
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
ion>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择天数--</option>
<option>1</option>
<option>2</option>
### 最后
**小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：**
**凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。**
**入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。**
**整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。**
**而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。**
**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**
**需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）**
[外链图片转存中...(img-lF3xSfos-1713238583036)]
**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
