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