前端学习路线梳理
2024-07-23 09:44:36 6 举报AI智能生成
前端学习路线梳理
作者其他创作
大纲/内容
前端基础
HTML
⭐️学习地址：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
HTML 基础教程
HTML API
⭐️ 基本语法
⭐️ 标签
div
标题 h1 ~ h6
段落 p
图像 img
列表 ul / ol
超链接 a
表单 form
表格 table
框架 iframe
⭐️ 属性
HTML 参考手册
hTML5
学习地址：https://www.runoob.com/html/html5-intro.html
✅ HTML5 特性
⭐️ 语义化标签
⭐️浏览器支持
多媒体标签
Canvas 画布
⭐️浏览器存储
localStorage
sessionStorage
⭐️ Web Workers
CSS
⭐️学习地址：https://developer.mozilla.org/zh-CN/docs/Learn/CSS
⭐️CSS 基础教程
⭐️ 引入方式
行内样式
内部样式表
外部样式表
⭐️ 选择器
通用选择器
标签选择器
id 选择器
class 选择器
属性选择器
派生选择器
后代选择器
子元素选择器
相邻兄弟选择器
组合选择器
伪选择器
选择器优先级
⭐️ 属性
单位
px
em
rem
vw
vh
背景
文本
字体
列表
表格
⭐️ 内联元素 / 块状元素
⭐️ 盒子模型
content
padding
border
margin
⭐️ 浮动
设置浮动 float
清除浮动 clear
⭐️ 定位
static
absolute
fixed
relative
⭐️ 层叠规则
CSS 中级教程
⭐️CSS3 高级教程
⭐️ 响应式布局
媒体查询
Flex 布局
Grid 布局
渐变
过渡
动画
背景
边框
圆角
字体
布局
⭐️Flex布局
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
视频教程：https://www.bilibili.com/video/BV1N54y1i7dG/?spm_id_from=333.337.search-card.all.click
Gird布局
视频教程：https://www.bilibili.com/video/BV1or421H7Bh/?spm_id_from=333.788
⭐️ CSS 框架
BootStrap
⭐️ Tailwind CSS
⭐️ CSS 预编译
⭐️ SASS
JavaScript
⭐️学习地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
⭐️ 基本语法
⭐️ 数据类型
⭐️基本数据类型
字符串 String
数组 Number
布尔 Boolean
空值 Null
未定义 Undefined
Symbol
⭐️引用类型
对象 Object
数组 Array
函数 Function
⭐️数据类型转换
⭐️函数
概念
⭐️自定义函数
⭐️调用方式
全局调用
构造函数调用
函数方法调用
apply
call
闭包
⭐️对象
概念
this指向
原型链和继承
常用对象
数字 Number
字符串 String 对象
日期 Date 对象
数组 Array
布尔 Boolean
算数 Math
自定义对象
⭐️作用域（作用域链）
⭐️BOM API
⭐️DOM API
⭐️JSON
了解Ajax
⭐️JavaScript 执行机制
⭐️ 阮一峰 ES6 教程：https://wangdoc.com/es6/
⭐️JS (ES6)
ES6 入门教程 https://es6.ruanyifeng.com/
⭐️let 和 const
⭐️对象解构赋值
⭐️数组解构赋值
⭐️对象扩展和新增方法
⭐️Set 和 Map 数据结构
⭐️Promise & async / await 异步编程
视频教程
前端入门教程，零基础必看的h5(html5)+css3
https://www.bilibili.com/video/BV14J4114768/?spm_id_from=333.999.0.0&vd_source=e78032d8c8538f1d3da5fade01c7b3b8
好奇代码 HTML CSS 网站开发入门指南｜ 基础教程 ｜ 零基础入门前端开发
https://space.bilibili.com/345880241/channel/collectiondetail?sid=1778943
巩固基础
《JavaScript 高级程序设计》：https://t.zsxq.com/0eKWGbTgL
《JavaScript 忍者秘籍》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2
🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备
文档
⭐️ MDN
进阶
ECMAScript6
⭐️学习地址：https://es6.ruanyifeng.com
⭐️ TypeScript
学习地址：https://www.tslang.cn
视频教程
前端框架
VUE3
⭐️学习地址：https://cn.vuejs.org/guide/introduction.html
UI框架
D.Spark
字节跳动----Arco Design
蚂蚁金服----Ant Design Vue
Element Plus
React
工具
⭐️学习编程宝典网站
鱼皮的编程宝典
⭐️vscode
下载地址：https://code.visualstudio.com/
⭐️编程博客
稀土掘金
CSDN
stackoverflow
⭐️git
下载地址：https://git-scm.com/
Git 原理入门：https://www.ruanyifeng.com/blog/2018/10/git-internals.html
视频教程
⭐️常用命令
⭐️浏览器
⭐️ Chrome
⭐️ Edge
后期可以训练编程逻辑
力扣（JavaScript）
⭐️代码托管
GitHub
Gitee
GitLab
⭐️ 包管理
⭐️ npm
⭐️ yarn
⭐️工具库
jQuery
⭐️Lodash
⭐️Axios
⭐️字体图标库
⭐️ IconFont
前端基础知识
⭐️ 域名
⭐️ DNS
⭐️ 服务器
⭐️浏览器
⭐️浏览器 DOM 事件流 / 事件委托
⭐️浏览器加载顺序
⭐️浏览器渲染过程
⭐️浏览器事件循环
⭐️浏览器同源策略
⭐️跨域解决方案
⭐️浏览器缓存
⭐️控制台调试技巧
⭐️HTTP
HTTP 请求过程
⭐️ HTTP 请求类别
⭐️ 常见状态码
1xx 信息
2xx 成功
3xx 重定向
4xx 客户端错误
5xx 服务器错误
⭐️ Cookie
⭐️ HTTPS
0 条评论
下一页
