给想学前端的小白整理了一下学习路线

2024-02-02 17:44

本文主要是介绍给想学前端的小白整理了一下学习路线,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第一阶段:前端入门

  1.Html5

  2.Css3

第二阶段:JavaScript

  ①JavaScript 基础语法

  ②JavaScript 高级(WebAPI/Dom Bom)

  ③JavaScript 框架(jQuery)

  ④数据可视化(echarts)

第三阶段 服务端编程

1.node js基础

2.ajax

3.promise

4.axios

5.了解学习es6语法,http协议规则

6. TypeScript

第四阶段 Vue.js

①框架:Vue.Js【vue2,vue3】

②学会使用UI组件库(网站快速成型工具)

③vue项目实战

第五阶段 微信小程序

第六阶段 React.js 基础

第一阶段:前端入门

CSS & HTML

对于刚入门的朋友我依旧建议先将 CSS(3) & HTML(5) 的知识点认真学习一边。学习的途中最好是学习完一部分就自己在敲一遍代码,加深自己的记忆。

当然如果你愿意,建议你可以先仿一个网站的静态页面(掘金、知乎等都可以),有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能,一开始就使用自动补全对你记忆一些属性时没有帮助的;踏实点学习,日后会有回报的。

关于 CSS(3) 你需要了解的一些知识点
  • 盒模型(标准 & IE )
  • flex、float、Normal Flow 等的理解
  • CSS 常用选择器
  • 行内、内部、外部样式的区别
  • CSS 层叠规则
  • BFC 与 IFC 的了解
  • CSS3 的 transform、transition、animation 等属性的运用了解
  • 响应式布局的理解
  • ……

CSS 说容易也容易,说复杂也复杂;因为 CSS 总是能给你意外的惊喜。

HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是 div 一把梭。因为 div 用的爽,不用担心默认样式。

有人说 HTML 语义化的优点很多,比如清晰的页面结构、有利于 SEO、便于团队开发和维护;这些我都承认,不过我还是喜欢 div 一把梭。

  • HTML 语义化( 不是很理解为什么面试总会问 )
  • canvas
  • 本地存储( localStorage、sessionStorage、cookie 的理解 )
  • video 和 audio 的使用
  • 应用缓存( cache manifest )
  • ……

第二阶段:JavaScript

JavaScript 基础语法

1、JS中的变量

1.1、变量的创建

1.2、动态类型

2、基本数据类型

2.1、 number数字类型

2.2、string字符串类型

2.3、boolean布尔类型

2.4、undefined未定义数据类型

2.5、null空值类型

3、运算符

3.1、比较运算符

3.2、逻辑运算符

4、条件语句和循环语句

5、数组

5.1创建数组

5.2获取数组元素

5.3新增数组元素

5.4删除数组元素

6、函数

6.1 语法格式

6.2函数表达式

6.3作用域

7、对象

7.1创建对象

 JavaScript 高级(WebAPI/Dom Bom)

  1. Web API介绍
2.API的概念API的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())
  1. Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)此处的Web API特指浏览器提供的API(一组方法),Web API在后面的课程中有其它含义

4.掌握常见的浏览器提供的API的调用方式

5.ECMAScript - JavaScript的核心定义了javascript的语法规范

JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

  1. BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

  1. DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

  1. BOM的概念

一套操作页面元素的API

DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

  1. BOM的顶级对象window

window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window

注意:window下一个特殊的属性 window.name

10.页面加载事件
11.定时器
12.location对象

location对象是window对象下的一个属性,时候的时候可以省略window对象

这篇关于给想学前端的小白整理了一下学习路线的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/671482

相关文章

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python自动化批量重命名与整理文件系统

《Python自动化批量重命名与整理文件系统》这篇文章主要为大家详细介绍了如何使用Python实现一个强大的文件批量重命名与整理工具,帮助开发者自动化这一繁琐过程,有需要的小伙伴可以了解下... 目录简介环境准备项目功能概述代码详细解析1. 导入必要的库2. 配置参数设置3. 创建日志系统4. 安全文件名处

MySQL 迁移至 Doris 最佳实践方案(最新整理)

《MySQL迁移至Doris最佳实践方案(最新整理)》本文将深入剖析三种经过实践验证的MySQL迁移至Doris的最佳方案,涵盖全量迁移、增量同步、混合迁移以及基于CDC(ChangeData... 目录一、China编程JDBC Catalog 联邦查询方案(适合跨库实时查询)1. 方案概述2. 环境要求3.

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)