初学前端,学习路线图必不可少,更有【95页】初级前端模块笔记!

2023-11-13

前言

在初学前端的时候,我们总会遇到一些问题,我们可以在网上看到很多关于前端的这些问题:

你们都是怎么学web前端的?
零基础,怎么自学好前端?
前端需要学多久,都学哪些知识?
想成为一名合格的前端工程师,需要掌握哪些技能?

下面是给初学前端的小伙伴分享的学习路线

学习路线

第一阶段:网页制作

HTML:常用标签,锚点,列表标签,表单标签,表格标签,标签分类,标签语义化,注释,字符实体

CSS:CSS介绍,全局样式,行内样式,内联样式,选择器,字体样式值,文本样式值,颜色样式值,盒模型,控制台使用,清除默认样式,盒模型居中,外部距塌陷,标准文档流,块元素,行内元素,行内块元素,多种伪类元素,浮动,定位

第二阶段:JavaScript动态交互

JavaScript初阶:变量与运算符,逻辑控制,Math类,函数,Object类,定时器,Array类,String类,Date类

JavaScript进阶:JavaScript DOM基础,this,事件,事件流,JavaScriptBOM基础,call&apply&bind,自定义属性,面向对象编程

ES6/7/8/9:ECMAScript6简介,let和const,ES6+的作用域,对象的扩展,函数的扩展,字符串的扩展,Symbol,Set&Map,Promise对象,async&awiat,箭头函数,模板字符串,rest参数,Class,Module模块

JavaScript高阶:闭包,立即执行函数,惰性函数,插件开发,多人协作,深复制与浅复制,数组扁平化,递归,正则表达式全解,函数防抖,函数节流

第三阶段:移动端开发技术实战

HTML5:HTML5简介,HTML5新语法,HTML5新语义化标签,HTML5新表单元素属性,HTML5新手机端新事件处理,HTML5新增多媒体实战,本地存储,Canvas,HTML5地理组件GeoLocation

CSS3:CSS3新增属性,圆角制作企业级方案,CSS3背景属性,过渡动画 transition,变化属性 transform,特效轮播图实战,企业级flex布局实战,grid布局实战

Bootstrap:响应式,媒体查询,栅格系统,栅格参数,组合模式,列偏移/列排序/自动列,列对齐/列嵌套,文本与颜色,按钮,导航,图文混排,模态框,轮播图

移动端开发:移动端简介,移动端视口约束,移动端flex移动端实践,rem,vw,flexible企业级实战

第四阶段:前后端分离技术及常用库类

Ajax:AJAX简介,AJAX作用,封装AJAX,创建XMLhttpRquest对象,同步和异步,AJAX分页

jQuery:jQuery介绍,jQuery链式语法,jQuery选择器,jQuery核心,jQuery工具,jQuery事件,jQuery事件对象,jQuery特效,jQuery回调函数,jQuery文档处理,jQuery筛选,jQuery属性,jQueryCSS

Echarts:Echarts概述,Echarts使用,坐标系,雷达图/饼状图/折线图

第五阶段:企业级高级WEB架构开发

Webpack:Webpack的安装和使用,项目模块打包,静态打包模块器,Webpack入口,Webpack输出,Webpack插件,webpack模块

Vue:Vue使用,Vue响应式,Vue双向数据绑定,Vue相关指令,vue-resource,axios,template选项,Vue生命周期,Vue组件,自定义指令,过滤器,computed属性,Vue-cli 2.x和3.x 脚手架配置,Vue-router,Vuex,Element UI

微信小程序:uni-app,mpvue,微信小程序注册,APPID申请,生命周期,小程序调试,微信小程序框架组件,微信小程序布局框架,微信小程序条件渲染和列表渲染,媒体组件audio,视图容器,网络api,相机api,地图api


【95页】初级前端模块笔记

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。需要可以 点击此处 领取完整版【95页】初级前端模块笔记和前端学习路线图

html/css

  • html基本结构
  • 标签属性
  • 事件属性
  • 文本标签
  • 多媒体标签
  • 列表 / 表格 / 表单标签
  • 其他语义化标签
  • 网页结构
  • 模块划分
  • CSS代码语法
  • CSS 放置位置
  • CSS的继承
  • 选择器的种类/优先级
  • 背景样式
  • 字体样式
  • 文本属性
  • 基本样式
  • 样式重置
  • 盒模型样式
  • 浮动float
  • 定位position
  • 浏览器默认样式

html5/css3

  • HTML5 的优势
  • HTML5 废弃元素
  • HTML5 新增元素
  • HTML5 表单相关元素和属性
  • CSS3 新增选择器
  • CSS3 新增属性
  • 新增变形动画属性
  • 3D变形属性
  • CSS3 的过渡属性
  • CSS3 的动画属性
  • CSS3 新增多列属性
  • CSS3新增单位
  • 弹性盒模型

JavaScript

  • JavaScript基础
  • JavaScript数据类型
  • 算术运算
  • 强制转换
  • 赋值运算
  • 关系运算
  • 逻辑运算
  • 三元运算
  • 分支循环
  • switch
  • while
  • do-while
  • for
  • break和continue
  • 数组
  • 数组方法
  • 二维数组
  • 字符串

正则表达式

  • 创建正则表达式
  • 元字符
  • 模式修饰符
  • 正则方法
  • 支持正则的 String方法

js对象

  • 定义对象
  • 对象的数据访问
  • JSON
  • 内置对象
  • Math 方法
  • Date 方法

面向对象是一种编程思想

  • 定义对象
  • 原型和原型链
  • 原型链
  • 原型

常用的JavaScript设计模式

  • 单体模式
  • 工厂模式
  • 例模式

函数

  • 函数的定义
  • 局部变量和全局变量
  • 返回值
  • 匿名函数
  • 自运行函数
  • 闭包

BOM

  • BOM概述
  • window方法
  • frames [ ] 框架集
  • history 历史记录
  • location 定位
  • navigator 导航
  • screen 屏幕
  • document 文档

DOM

  • DOM对象方法
  • 操作DOM间的关系
  • DOM节点属性

事件

  • 事件分类
  • 事件对象
  • 事件流
  • 事件目标
  • 事件委派(delegate)
  • 事件监听

jQuery

  • jQuery 选择器
  • 属性选择器
  • 位置选择器
  • 后代选择器
  • 子代选择器
  • 选择器对象
  • 子元素
  • DOM操作
  • JQuery 事件
  • 容器适应
  • 标签样式操作
  • 滑动
  • 自定义动画

AJAX

  • 工作原理
  • XMLHttpRequest对象
  • XML和HTML的区别
  • get() 和post()

HTTP

  • HTTP消息结构
  • url请求过程

性能优化

  • JavaScript代码优化
  • 提升文件加载速度

webpack

  • webpack的特点
  • webpack的缺点
  • 安装
  • webpack基本应用
  • 配置文件入门

vue

  • MVC模式
  • MVVM模式
  • 基础语法
  • 实例属性/方法
  • 生命周期
  • 计算属性
  • 数组的更新检查
  • 事件对象
  • Vue组件
  • 路由使用
  • 路由导航
  • 嵌套路由
  • 命名视图

面试资料

PDF文档面试题资料和学习笔记的详解内容太多,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的小伙伴可以帮忙 点赞+评论666,私信【前端】即可前往免费领取!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

初学前端,学习路线图必不可少,更有【95页】初级前端模块笔记! 的相关文章

随机推荐

  • C++中动态数组实现

    实现动态数组 动态数组 示例代码 运行环境 运行效果 动态数组 动态数组Vector可以动态扩展内存 其采用连续的内存空间 当内存空间不足 便以原来的容量的2倍或者1 5倍成倍的扩展 将原有的数组元素拷贝到新分配的内存空间中 释放原有的内存
  • [Unity3D]呼风唤雨:天气插件UniSky的使用教程与案例

    UniSky是Unity3D的一款模拟环境天气的插件 使用它可以简单的实现呼风唤雨的各种功能 下载地址 请点击我 使用起来也非常的方便 引入Package后 注意路径必须是英文否则会出错 Project中会多一个文件夹 下面我们来简单的创建
  • 华为OD机试 【玩牌高手】(Java )

    题目 代码 import java util Scanner public class CardScoreCalculator public static void main String
  • 关于线性回归那些事儿

    1 如何理解线性回归中的方差齐性 在两组和多组比较中 每组都有很多数据 可以求出每组的方差 然后比较就行了 很容易理解 但是在线性回归中 有的人就不理解方差齐性是什么意思了 因为线性回归中自变量x不是分类变量 x取值很多 通常情况下 每个x
  • C++使用std::thread 多线程展开for循环,for循环并行计算

    比如说有一个for循环 需要迭代100次 来累加1 2 3 100计算其结果 创建10个线程 第一个线程累加1 2 10 第二个线程计算11 12 20等 那么如何优化呢 其实OpenMP库是可以直接调用的 只需要在for循环上面加一个指令
  • 搭建Node开发环境,Node.js的集成开发环境(IDE)搭建

    搭建Node开发环境 使用文本编辑器来开发Node程序 最大的缺点是效率太低 运行Node程序还需要在命令行单独敲命令 如果还需要调试程序 就更加麻烦了 所以我们需要一个IDE集成开发环境 让我们能在一个环境里编码 运行 调试 这样就可以大
  • Springboot结合线程池的使用

    1 使用配置文件配置线程的参数 配置文件 thread pool core size 100 max size 100 keep alive seconds 60 queue capacity 1 配置类 Component Configu
  • 【华为OD机试真题c++/java/python】农场施肥【2023 Q1A卷

    2023华为OD机试 刷题指南 点这里 华为OD机试 2023真题考点分类 点这里 题目描述 某农场主管理了一大片果园 fields i 表示不同果林的面积 单位 m 2 现在要为所有的果林施肥且必须在 n 天之内完成 否则影响收成 小布是
  • 数据库SQL千万级数据规模处理概要

    我在前年遇到过过亿条的数据 以至于一个处理过程要几个小时的 后面慢慢优化 查找一些经验文章 才学到了一些基本方法 综合叙之 与君探讨之 1 数据太多 放在一个表肯定不行 比如月周期表 一个月1000万 一年就1 2亿 如此累计下去肯定不行的
  • Android Studio Button 美化

    改变按钮Button控件的边角 填充颜色 边框颜色 步骤 在 res gt drawable 中新建一个 btn all shape xml
  • Unity——新输入系统Input System

    1 安装 安装 直接到包管理器Window gt Package Manager安装即可 安装后提示需要重启 重启后即可使用 注意 在Project Settings中的Player设置里将Active Input Handling设置为I
  • 计算鬼成像学习笔记一:简介

    这里写目录标题 1 何为鬼成像 1 1 传统光学成像 所见即所得 1 2 鬼成像 又称关联成像 1 2 1 桶探测器 1 2 2 CCD 1 2 3 空间分辨率 1 2 4 光源 1 2 5 纠缠光子 1 2 6 赝热光源 1 2 7 散斑
  • springboot maven 子模块没有java文件夹 或 pom.xml灰色

    1 pom xml灰色 2 子模块 modules 没有添加到父模块 报错
  • 大学【微机原理与接口技术】参考资料、该视频笔记

    该百度网盘链接 是我学习 微机原理与接口技术 的参考资料 感觉讲的不错 有需要评论区下发qq邮箱 我看到会发给你 该视频笔记参考我的博客 https blog csdn net weixin 42214698 category 115770
  • PPPoE原理与配置方法

    一 PPPoE原理 数字用户线路DSL Digital Subscriber Line 是以电话线为传输介质的传输技术 人们通常把所有的DSL技术统称为xDSL x代表不同种类的数字用户线路技术 目前比较流行的宽带接入方式为ADSL ADS
  • 从零开始的webpack生活-0x014:CustomLoader自定义loader

    0x001 概述 上一章我们讲了eslint loader的配置 常用类型的常用loader已经都讲完了 大体上其他的都大同小异 需要去各大loader的官方查阅用户手册就可以了 接下来将loader的本质和自定义loader 0x002
  • 30行Python代码实现3D数据可视化!非常惊艳!

    回顾 2D 作图 用赛贝尔曲线作 2d 图 此图是用基于 Matplotlib 的 Path 通过赛贝尔曲线实现的 有对赛贝尔曲线感兴趣的朋友们可以深入了解一下 在 matplotlib 中 figure 为画布 axes 为绘图区 fig
  • 教你用Navicat生成E-R图

    最近在弄毕业论文 导师让我在论文中插一些图 其中设计到之前数据库中表与表的关系图 开始本来想手动画一个 然后突然想到 是不是Navicat会自带这种功能呢 仔细一看 果然有 于是乎开始倒腾一番 在此记录一下 也方便需要的人 1 打开navi
  • vue3开发技巧包括全局注册自定义指令,全局注册组件

    文章目录 一 全局注册自定义指令 1 钩子函数 2 动态指令参数 二 全局注册组件 三 v for循环中绑定不同点击事件 四 v for循环中绑定不同class属性 一 全局注册自定义指令 vue3全局定义自定义指令 与vue2版本差别不大
  • 初学前端,学习路线图必不可少,更有【95页】初级前端模块笔记!

    前言 在初学前端的时候 我们总会遇到一些问题 我们可以在网上看到很多关于前端的这些问题 你们都是怎么学web前端的 零基础 怎么自学好前端 前端需要学多久 都学哪些知识 想成为一名合格的前端工程师 需要掌握哪些技能 下面是给初学前端的小伙伴