Web前端学习路线，超全面整理「HTML+CSS+JS+Ajax+jQuery+VUE
以下这一系列【web前端学习路线图】主要合初学者入门。
先看下，web需要掌握的知识点：
- HTML
- CSS
- JavaScript
- AJAX
- jQuery
- Vue.js
下面是Web前端基本的学习路线：
第一阶段：
HTML+CSS/HTML5+CSS3
HTML视频教程主要讲解了HTML基础语法，内容主要包括：
HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点。
通过该视频的学习之后，可以开发基本的网页，并且可以看懂别人编写的HTML页面。
CSS视频教程主要讲解什么是css 。
层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
适合人群
- 0基础想入门的同学
- 基础不牢固的同学
第二阶段：
JavaScript+JS框架技术
主要讲解前端开发中的核心技术JavaScript，俗称JS，视频中讲解了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点。
适合人群
- 已具备HTML基础知识与JS基本操作的同学
- Web前端爱好者以及在职程序员
第三阶段：Ajax
Ajax技术是基于js语言的扩展，能够通过将请求发送给后台，并从后台取得相关数据，然后将数据在页面做局部刷新的重要技术。
本教程会通过对ajax的传统使用方式，结合json操作的方式，结合跨域等高级技术的方式，对ajax做一个全面的讲解。
适合人群
- 掌握HTML基本知识和JS基本操作的
第四阶段：jQuery
jQuery是优秀的JavaScript框架，能使用户更方便地处理HTML Documents、events、实现动画效果，并且方便地为网站提供Ajax交互。
本教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解，更结合了大量的案例。
第五阶段：Vue.js
通过视频的学习，让大家掌握Vue.js及在项目中的使用。将一步一步地让大家快速地掌握Vue.js这样一个前端核心框架，以适应公司的开发需要。
Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来......
学习路线要配合课程才能学的会的，晚上有时间的朋友可以进学习群听公开课
对于零基础的人而言，要怎么学习Web前端呢？
1、前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。
2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、Webpack 等，搭建项目及开发项目。
3、Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。
最后给要学前端的同学一个忠告：
1、首先，自学是件很苦的事情，学习本身就是件反人性的过程，更何况在一个从零开始的全新领域独自奋斗，这里不是要打击你，而是要你认真想好，结合自身的环境、条件。不然半途而废浪费的不仅是时间，还有精力、金钱。
2、如果你已经想好决定去做，那就不要犹豫，坚持下去你就可以成功，很多学渣都可以，你没有什么不可以的，一定要相信自己。
3、兴趣是最好的老师，很多人对这句话非常反感，被生活所迫，谈兴趣不可笑吗？其实不是，问问自己对技术有没有兴趣，坐不坐得住。做自己喜欢和感兴趣的事情才能够走的更远和更久，很多人不理解这一点，总有一天你会明白的，我当时转前端的时候也是因为自己挺喜欢，而且最接近用户，都是所见所得的东西很好玩，另外一方面也觉得工资也挺高，所以自己打心里觉得做前端挺好。
4、做好持续学习，时刻保持学习的心态，说实话现在社会，科技的发展非常之快，技术的更新更是如此，如果你觉得学习一门技术就可以吃到老，我劝你还是打住，可能考个公务员更适合你（不要杠精，我并不是说公务员不要学习，自己体会就好）。
5、永远不要觉得迟，只要行动然后坚持下去，你就干掉了 80% 的人，自学的人很多，但是坚持下来的没有几个。就像郭德纲说过，不是我的相声说的多好而是我活了下来。
6、与其把时间花在学与不学的纠结上，不如把这个时间放在行动上，如果发现自己不合适也坚持不下去，那就换个赛道，专注的去做一件事情，会提高你的成功概率。
学完HTML、css、JavaScript之后学什么？这张前端学习路线图一定能给你答案！
第一阶段：前端入门网页基础
html5+css3→ 页面布局实战
第二阶段：前端入门开发内功
javascript（基础+进阶）→ ES6→ Ajax→ Promise→Git→node.js→PC端全栈开发实战
第三阶段：前端高级框架技术
vue2+vue3→vue实战项目 →Pinia→React→React实战项目
第四阶段，混合应用开发技术
微信公众号→微信小程序→微信小程序实战项目→ uni-app→uni-app实战项目 react项目
第五阶段：大前端的架构技术
webpack5→Vite2→typescript架构 HarmonyOS app
以前前端开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作了。而现在除了普通的编码以外，还要考虑如何性能优化，如何跨端、跨平台实现功能，尤其是 AI、5G 技术的来临，都在加快Web前端技术的更新，也在逼促开发者要不停的学习，不能的接受新的技术标准。
“学什么”“怎么学”其实是我们要着重解决的问题。
这一波良心推荐的前端教程+项目干货，不谈虚的，直接来谈每个阶段要学习的内容以及配套教程！
非常适合新手学习，从最基础的html+css开始讲起，每个视频都是分开的一小节，知识点密集，每个知识点还有实战项目让你练习。
第一阶段：前端入门网页基础
html5+css3→ 页面布局实战（响应式/移动端/pc端页面）
1、 前端入门基础核心必看html+css
这是入门前端最基础的内容。学会后，就能达到初级Web前端工程师水平。熟悉了前端开发的HTML与CSS基础知识，就能够配合UI设计师进行项目布局开发了。
本系列从概念到具体基础知识点全程干货满满，为前端小白入门找到了很好的学习抓手，可以作为前端开发学习“梦开始的地方”，老师深入浅出的讲解和动画视频解析并用真实的案例巩固知识，学练结合，打好基础，不怕学不会！
2、 页面布局实战
有了第一步的基础知识，你就可以实战各种页面布局了。学会后，更加夯实初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现了。
本课程讲的是HTML+css pc端项目实战，通过讲解拉勾网得首页、登录页等，学完即可进一步学会应用HTML+CSS，掌握页面布局和标签、属性等的使用，让你从小白进化为真正的网页美化师。
第二阶段：前端入门开发内功
javascript（基础+进阶）→ ES6→ Ajax→ Promise→Git→node.js→PC端全栈项目开实战
1、javascript（基础+进阶）
JavaScript全套视频教程（10天学会Js，前端javascript入门必备）
本视频主打内容最全最新，包括JS基础，基于面向对象开发实战，前后端交互实战，jQuery与BootStrap，以及CSS预处理器Sass，打造一站式知识长龙服务，适合有HTML和CSS基础的同学学习。
2、ES6
ES6的发布是大前端的里程碑。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。
最新版Web前端ES6-ES13教程，JavaScript高级进阶视频教程
本视频主打内容最全最新，包括ES6-ES13所有新特性 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。
3、 Ajax
Ajax技术可以使网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。
本视频主打内容最全最新，包括Ajax XHR基础语法、fetch和axios使用、以及 跨域解决方案，打造一站式知识长龙服务，适合有JS基础的同学学习。
4、 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。
本视频主打内容最全最新，包括Promise基础语法、手写Promise、async与await 以及 实战应用，打造一站式知识长龙服务，适合有JS基础的同学学习。
5、 Git
项目管理工具Git教程上线啦～一看就会，上手不废的最新版从入门到实战全套教程，视频包括Git常用命令、Git分支管理、团队以及跨团队协作、VSCode集成Git，稳稳拿捏Git
6、 node.js
本视频你将从认识Nodejs开始学习npm、nrm、yarn；内置模块、路由、express、MongoDB、身份认证、koa、MySQL、Socket、Mocha等知识点全覆盖，学完本系列视频可以让前端程序员插上后端的翅膀，真正成为一名全栈工程师，助力同学横向全面发展。
7、 PC端全栈项目开实战（2选1）
本PC项目实战视频是基于JS开发，强化ES6-ES13的项目应用，打通前后端数据交互，并实战应用周边生态Sass以及Bootstrap, 打造一站式知识长龙服务，适合有js基础的同学学习。
web前端js+nodejs后端express框架博客系统项目实战教程，前后端交互开发毕设项目
本套使用主要教会大家，如何利用nodejs的一个express框架和js开发一个blog项目。教会大家使用js做后端，使用js做前端，成为一名全栈工程师。
适合作为一个课程设计或者毕业设计，最终我们实现了一个完整的博客系统，包括用户的登录、注册，图片上传，文章的发布、富文本编辑器、删除、编辑、修改、列表展示，评论的发布、删除、列表展示。最终实现了用户的文章和评论的后台管理和博客的前台展示和评论功能。
第三阶段：前端高级框架技术
vue2+vue3→vue实战项目 →Pinia→React→React实战项目
1、 vue2+vue3
Vue2.0+Vue3.0全套教程，vue.js零基础入门到vue项目实战，前端必学框架教程
Vue.js致力于构建数据驱动的web应用开发框架，以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。 本课程以项目实战为驱动，以轻松幽默的评书演义，帮你打开通往Vue.js的任督二脉，从vue2轻松过渡到vue3,助力同学成为一位优秀的Vue.js开发人员。
2、 vue实战项目
Vue+ElementUI物业后台管理系统
本项目是利用Vue3.0 + Element Plus UI技术开发后台管理系统，本视频你将见证从零开始搭建项目，手把手教你使用vue3.0组件开发，并用Element UI库快速创建项目页面，使用axios封装与拦截器进行前后端交互，用json-server模拟数据后台创建。在项目中还会讲到工具库的封装、vue环境变量的部署、路由的设置与配置、响应式配置等。
3、 Pinia
前端Pinia教程，Pinia+vue3+vite+ts+腾讯IM聊天解决方案项目实战
基于vue3+vite+ts来学习pinia的使用，并结合当下最流行的聊天解决方案——腾讯IM完成项目实战，并深入封装基于pinia的IM插件。
4、 React
React已经成为江湖大厂的主流前端开发框架，本视频基于最新版React17良心制作。对React开发核心技术以及周边技术栈进行详细讲解，并进一步通过实际需求案例驱动知识点吸收，帮助大家迅速成长为React开发高手。最后还有一个完整的后台管理系统项目实战讲解，让大家即使身不入大厂，也可对企业内部真实项目组开发流程与细节做到心中有数。
5、 React实战项目
全球新闻发布管理系统
本项目实战教程一站式应用React全家桶打造企业级后台系统，无缝对接各大门派需求，让你不入江湖，便知江湖风雨。 同学们先去看过上述React开发基础视频，熟悉React 组件开发，组件通信以及基础路由开发再配合食用本实战教程效果更好。
第四阶段，混合应用开发技术
微信公众号→微信小程序→微信小程序实战项目→ uni-app→uni-app实战项目
所谓混合开发，就是将HTML5基于浏览器的应用，嵌入到基于Android和iOS手机APP里，或者嵌入到基于Node和Chromium的桌面APP里。因为兼具了WebApp和NativeApp的双重优点，混合应用开发技术得到了广泛的应用。
学会这个部分，就拥有了多端开发能力，能够胜任跨平台跨设备的架构工作。常见的混合开发如手机端的微信公众号、微信小程序、桌面端的Electron技术和PWA技术等。
1、微信公众号
本系列课程从整个微信公众号体系的介绍开始，进一步使用编辑模式来完成一个最基本的公众号搭建；此外你还将了解到公众号的开发模式以及所需的服务端相关知识，其中包括Express、MongoDB、Robo3T、mongoose、云服务器等；还会对微信JS-SDK鉴权的整个流程进行梳理与开发；使用vue技术栈结合vant组件库，构建web应用并集成到微信公众平台中。
2、微信小程序
本系列视频课程分为两大部分，微信小程序基础与项目实战开发。小程序开发基础学习部分你将从开发流程学起，到全局配置、todolist、基础语法、组件及自定义组件的基础知识学习。实战开发部分的讲解则会从项目搭建到借口、封装、首页模块、轮播模块、搜索模块、分类模块、授权模块、购物车及我的模块深度剖析小程序。
3、小程序实战
锋巢直播IM ——基于腾讯云音视频跨平台应用
小程序开发实战项目-锋巢直播IM ——基于腾讯云音视频跨平台应用
本视频使用腾讯即时通信IM+直播电商解决方案组件TLS,并涉及众多腾讯云产品，包括但不限于云直播，云数据库，Serverless，提供了一站式讲解，帮助大家迅速整合直播电商功能到自己的业务中， 通过幽默风趣讲解驱动学习的积极性，让大家不入公司，便知公司项目的全貌。
4、Uniapp
前端uniapp入门到实战项目教程(微信小程序+H5+安卓APP+IOS APP)
Uniapp 是基于「 Vue + 微信小程序 」语言体系，开发人员学习成本低上手快，随着如今 Uniapp 生态也逐步趋于成熟。基于 Uniapp 开发多端项目，已经是很多中小型企业常用的技术解决方案。 我们就从 Uniapp 基础开始，对照企业级实践标准，从零到一打造一个多端（微信小程序 + H5 + 安卓 app + IOS app）的社区论坛类项目。
5、Uniapp 实战
Vue项目实战，uni-app蛋糕订购项目开发教程（vue+uniapp+小程序）
本项目是一个面向部分城市群体的蛋糕定制网站，为指定区域的用户提供在线定制、实时配送，打造线上线下相结合的个性化蛋糕定制服务。
第五阶段：大前端的架构技术
webpack5→Vite2→typescript
掌握这个部分，即可拥有大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高并发访问量等开发经验。
1、webpack5
前端webpack5全套教程，全网最完整的webpack教程（基础+高级）
webpack5课程分为四大部分，分别是webpack基础应用篇，webpack高级应用篇，webpack项目实战篇以及webpack内部原理篇。在本课程中，我们将通过前后呼应的demo从0到1学会webpack5，在项目实战中学以致用并在最后阶段去理解其底层的原理，从而做到对webpack5知其然并知其所以然的精熟掌握程度，完成前端工程师的一大步提升。
2、Vite2
Vite 基于原生 ES-Module 推出的前端构建工具，Vite 因为它的跨前端框架的能力 和极其优越的性能，被大家称为下一代前端构建工具，及时的学习新技术是有必要的。本系列视频你将会学到Vite环境的搭建、依赖预构建、模块热重载、在Vite中使用vue2\vue3\CSS等其他技术、服务器渲染等关联技术。
前端学习阶段
1 、web前端入门阶段
HTML/HTML5，在实际工作中主要使用的是HTML5，但是HTML作为基础知识也是必须要掌握的。
l CSS/CSS3
l JavaScript（ES6语法）
l 网络请求如Ajax
l JSON、XML类常规数据结构
l 熟悉各种编辑器的使用（目前常用的是：VScode 和 Hbuilder X）
l 学会用Google浏览器（这一点可能很多人觉得自己都会用，其实这里更多的是指如何利用浏览器调试查看自己程序的技能）
l Git,SVN等代码管理工具的使用
2 、WEB前端初级阶段
目前如果你只会HTML、CSS、JavaScript已经远远不能满足市场需求了，你至少得掌握一些框架的运用。
l 至少掌握一个目前流行的三大前端框架（Vue、Angular、React）
l 至少掌握一个UI框架，如Bootstrap，Vant，Element-ui等
l 学会，使用插件和组件，比如应用中常用到的轮播插件Swiper
l 熟练使用JavaScript的ES6语法，他会比ES5方便很多，而且目前兼容性也比较好了
l 学习并使用CSS预处理语言Sass和Less
l 前端模拟请求工具，目前常用的为PostMan
3 、WEB前端中级阶段
l 学习并掌握Node.js的简单开发
l 学习并掌握前端自动化配置 Webpack、Gulp等
l 学习微信小程序的开发
l 数量运用Vue、React、Angular其中之一进行项目开发
l 熟悉Http协议，WebSocket协议的使用
定期关注行业动态，根据市场变化动态补充或者扩展自己的知识储备。
4 、WEB前端高级阶段
l 熟练掌握并运用Web组件化、插件化开发知识
l 掌握服务器知识，比如Node的熟练运用、Nginx的部署等
l 掌握一定的移动端开发技能
l 掌握一定的桌面应用开发技能，如Electron
l 保持一个不断的学习状态，将前端、服务端、桌面程序技能运用自如，同时适当扩展自己研发能力以外的工作能力，如沟通能力、管理能力等。
```python
class BertPooler(nn.Module):
def __init__(self, config):
super().__init__()
self.dense = nn.Linear(config.hidden_size, config.hidden_size)
self.activation = nn.Tanh()
def forward(self, hidden_states):
# We "pool" the model by simply taking the hidden state corresponding
# to the first token.
first_token_tensor = hidden_states[:, 0]
pooled_output = self.dense(first_token_tensor)
pooled_output = self.activation(pooled_output)
return pooled_output
from transformers.models.bert.configuration_bert import *
import torch
config = BertConfig.from_pretrained("bert-base-uncased")
bert_pooler = BertPooler(config=config)
print("input to bert pooler size: {}".format(config.hidden_size))
batch_size = 1
seq_len = 2
hidden_size = 768
x = torch.rand(batch_size, seq_len, hidden_size)
y = bert_pooler(x)
print(y.size())
```
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
62
0- 0
已为社区贡献1条内容
所有评论(0)