零基础学习web前端开发需要哪些工具和需学习什哪些内容？

刚开始学习的话开发工具建议是下载VScode，当然主要的还是看自己比较喜欢和习惯用那个下面是一些常用的开发工具，在学习前端之前，先把工具准备好，没有金刚钻怎么揽瓷器活？所以准备了如下的一些开发工具，这里推荐使用VSCode。1. WebStorm2. Dreamweaver3. HbuilderX4. Sublime Text5. Vim（高手使用较多）6. VSCode 思维导图前端开发工具二、HTML+CSS 部分HTML掌握 HTML 是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好 HTML 是成为 Web 开发人员的基本条件。HTML 是一种标记语言，能够实现 Web 页面并在浏览器中显示。HTML 需要掌握的知识点如下所示：属性事件标签字符集CSS学好 CSS 是网页外观的重要一点，CSS 可以帮助把网页外观做得更加美观。CSS 需要我们学习如下部分：1. CSS基础教程2. CSS样式背景文本字体链接列表表格轮廓3. CSS框模型内边距边框外边距4. CSS定位相对定位绝对定位浮动5. CSS选择器元素选择器选择器分组类选择器ID选择器属性选择器后代选择器子元素选择器相邻兄弟选择器伪类伪元素6. CSS高级对齐尺寸分类导航栏图片库图片透明盒子模型媒体布局思维导图 HTML+CSS三、HTML5+CSS3HTML5HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。HTML5视频HTML5音频HTML5拖放HTML5画布HTML5 SVGHTML5地理定位HTML5 Web存储HTML5 应用缓存HTML5表单HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。CSS3CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。CSS3边框CSS3背景CSS3文本效果CSS3字体CSS3 2D转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS3 多列思维导图 HTML5+CSS3四、JavaScriptJavaScript 是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示：认识JavaScript基本语法变量数据类型字符串数字布尔数组对象NullUndefined5. 函数内置函数自定义哈数6. 运算符7. 流程控制8. DOM对象StringArrayDateBooleanMathNumber9. BOM对象WIndowNavigatorScreenHistoryLocation10. 综合实例思维导图 javascriptWeb前端开发特辑Web前端技术特辑：BFC讲解_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com 阶段二一、JavaScript进阶JS 进阶主要学习构造函数，原型对象，继承的多种实现方式，原型链，函数的本质，闭包，沙箱等。二、DOM+BOM综合演练三、网页特效四、 Jquery学习1. 基础语法2. 选择器基本选择器层次选择器过滤选择器表单选择器3. DOM操作查找节点创建节点插入节点删除节点复制节点替换节点包裹节点属性操作样式操作4. 事件事件绑定事件冒泡5. 动画show、hidefadeIn、fadeOutslideUp、slideDown自定义动画animate动画回调以及停止动画6. 常用工具浏览器及特性检测数组和对象操作Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等7. Ajax8. Jquery插件编写思维导图 Jquery五、ES6进阶六、Bootstrap七、其他animate.css学习（扩展）PS切图学习思维导图 JS 相关和其他扩展部分阶段三一、VueVue基础模版语法计算属性侦听器Class与Style绑定条件/列表渲染事件处理表单输入绑定组件基础、注册Prop自定义事件2. VuexStateGetterMutationActionModule3. Vue-router认识路由动态路由嵌套路由编程式导航路由组件传参4. axios认识axios全局配置发送POST、GET请求等思维导图 VUE二、React认识ReactReact元素渲染JSX组件StateProps事件处理条件渲染列表组件API组件声明周期思维导图 React三、Node基础console（控制台）crypto（加密）debugger（调试器）fs（文件系统）http（网络）os（操作系统）path（路径）2. 高级NPM介绍及使用MVC模式简介Express框架学习链接Mysql链接Redis项目实战思维导图 Node四、webpack概念主要讲什么是入口，出口，loader，插件等2. 入口单个入口语法对象语法常见场景3. 输出用法多个入口起点高级进阶4. 模式developmentproduction5. loader实例配置6. 插件剖析用法配置7. 配置基本配置多个Target使用其他语言配置8. 模块思维导图 webpack阶段四（扩展部分，了解即可）一、Mysql阶段一认识mysql安装mysql创建数据库、数据表学习常用的SQL命令，完成增删查改2. 阶段二学习Mysql关联查询，子查询等学习Mysql常用函数学习Mysql分组、分页、排序等3. 阶段三学习Mysql高级查询了解存储过程，自定义函数等了解Mysql配置文件二、Redis认识Redis学习redis的数据类型redis常用操作redis事务思维导图 数据库阶段五一、项目管理篇SVN使用认识svn安装生命周期启动模式创建版本库检出操作解决冲突提交操作版本回退查看历史分支标签2. GIT使用认识git安装配置工作流程工作区、暂存区和版本库创建仓库基本操作分支管理查看历史等标签github二、扩展部分小程序1. 了解小程序开发流程2. 视图容器viewscroll-viewmovable-viewcover-viewcover-image3. 基础内容icontextrich-textprogress4. 表单组件buttoncheckboxforminputlabelpickerpicker-viewradiosliderswitchtextarea5. 导航navigatorfunction-page-navigator6. 媒体组件audioimagevideocameralive-playerlive-pusher7. 地图（map）8. 画布（canvas）9. 开放能力open-dataweb-viewadofficial-accountapicloud（移动app开发）认识apicloud开发工具讲解端APIAPI对象设备访问功能扩展界面布局导航菜单小程序模块云服务对接4. 云API数据云API统计云API推送云API云API SDK5. 小程序模块使用三、常用框架使用篇iview （vue框架）element ui （vue框架）echarts (百度图标库)阿里巴巴开源图标使用Sass学习Swiper学习zoom.js 学习四、综合项目实战教务管理系统（node+express+mysql）实现思维导图 扩展学习部分零基础小白如何快速入门前端前端学习视频链接：https://pan.baidu.com/s/1G8YIUnFNFGXQoMbmxilZlw提取码：4zdh

本文章由javascript技术分享原创和收集