web开发入门学习手册

推荐阅读

《Web开发的入门指导》

一. 前端开发

1. HTML

• html是用来写网页结构的，开发网页的第一步我们会考虑这个网页是什么样子，比如网页左边是菜单，右边是内容，内容里面有图片和文字，这种布局都是各种html标签
• 了解一下html的发展史：html发展史1、html发展史2
• 学习html—菜鸟教程html篇
  下图是菜鸟教程html篇菜单，其中红色框内是必须掌握的，如果菜鸟教程讲的不够清楚需要百度其他资料自行学习，如在MDN上搜索，黑色框内可以不用看或者说暂时不用学习，剩余的需要了解学习
  
  
• html学完后你应该知道：html常用标签和html5语义化标签；内联元素和块级元素分别有哪些，它们之间的差异；localStorage和 sessionStorage差异
• 本节学习预计耗时2个工作日

2. CSS

• html是用来写网页结构的，那css是给结构添加样式的，如字体大小、背景颜色、标签占据的尺寸和间距等都是css样式
• 了解一下css发展史：css发展史1、css发展史2
• 学习css—菜鸟教程css篇
  红色框内必知必会，黑色框内暂时不学，其他的过一遍，如果某个知识点菜鸟教程没讲清楚则自行百度
  
  
• css学完后你还应该知道：css选择器的优先级，css盒子模型，css定位，css弹性布局（flex布局）
• 本节学习预计耗时2个工作日

3. JavaScript

• html+css写出来的页面是静态网页，使用JavaScript让页面动态化，如根据从后台查询出来的数据展示在页面上
• 了解一下JavaScript发展史：JavaScript发展史1、JavaScript发展史2
• 学习JavaScript—菜鸟教程JavaScript篇
  
  
• 本节学习预计耗时3个工作日

4. ES6

• 学习ES6—菜鸟教程ES6篇
  如果菜鸟教程讲的不够明白，可以看这里：http://es6.ruanyifeng.com/
  
  
• 学完ES6需要熟练使用箭头函数和Promise
• 本节学习预计耗时2个工作日

5. Ajax

• 内容不多但是很重要，需要熟练到手写代码的水平
  https://www.runoob.com/ajax/ajax-tutorial.html
  https://www.jianshu.com/p/918c63045bc3

6. 前端发展史

• 请花5分钟阅读完
  https://www.cnblogs.com/kidney/p/6079530.html

7. 浏览器

• 既然是前端开发，前端的界面展示，调试工作都需要在浏览器环境下运行，选择一款合适的浏览器很重要
• 关于浏览器和浏览器内核点这里
• 这里推荐使用chrome浏览器，国内的360和QQ浏览器也都是在chrome内核基础上封装的，所以我一般使用的是QQ浏览器，chrome作为备用，QQ浏览器同步书签快，各种设置和快捷键更人性化

• 本节要求：熟悉浏览器的基本功能与设置；熟练使用浏览器的书签功能（ctrl+D）；安装常用浏览器插件；熟练使用开发者工具进行前端调试(重点)；熟悉浏览器的开发者工具面板如下图（F12）

  
  
• 浏览器开发者工具功能很强大也很复杂，需要长期学习，学习资源推荐：
  什么是浏览器开发者工具、
  官方文档、
  http://shouce.jb51.net/chrome/ 、
  https://www.w3cschool.cn/chromedevtools/

8. 选择IDE

• 作为开发人员选择一款IDE并能够熟练使用时非常非常必要的，它极大的影响着开发效率
• 目前流行的前端IDE有sublime text3、Visual Studio Code和WebStorm
• 我这里推荐使用WebStorm，原因如下，至于你到底选择哪个都可以

  1. webstorm默认集成的功能更丰富，缺点是没有其他两款IDE轻、快
  2. WebStorm是jetbrains公司的一款产品，该公司还有写java的IntelliJ IDEA,写python的PyCharm甚至还有写android的android studio，这些产品的风格界面、设置功能大同小异，熟悉一个上手另一个很快
     
     
     
     注：该公司产品是收费的，新安装可以免费试用30天， 推荐安装无限试用插件eval rest就可以一直用了，也可以在网上找注册码或破解方法

9. 其他

MDN web入门

10. 其他

以下内容先做了解，实际项目需要用到的时候就深入学习

1. js框架：前端三大js框架分别为Vue、React、Angular，这里推荐学习Vue

   Vue：官网，实际项目开发还需要了解Vue Router、VueX、Vue CLI
   vue3当前还不够稳定 https://v3.cn.vuejs.org/

2. ui框架：

   Element，基于vue的ui框架，官网
   Bootstrap，基于html、css、js的ui框架，推荐学习4.x版本 官网 、中文网
   LuLu UI，基于html、css、js的国产ui框架， 官网

3. 数据可视化：

   Echarts，https://echarts.apache.org/examples/zh/index.html
   DataV，http://datav.jiaminghi.com/
   高德地图js API，https://lbs.amap.com/api/javascript-api/summary/

4. 移动端开发：

   uni-app，https://uniapp.dcloud.io/

5. 实用工具：

   日期处理工具： dayjs，https://dayjs.fenxianglu.cn/
   js工具方法：lodash，https://lodash.com/docs/4.17.15
   css动画库： Animate.css，https://www.dowebok.com/demo/2014/98/
   字体图标： iconfont、 Font Awesome
   js生成二维码： qrCode，https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html
   富文本编辑器： wangeditor，https://www.wangeditor.com/

6. 前端工程化：

   nodejs
   webpack
   scss
   eslint
   prettier

二. 后端开发

1. java

学习java—菜鸟教程java篇
下图是菜鸟教程java篇菜单，黑色框内的内容可以不用看或者说暂时不用学习，剩余的需要学习并掌握
同时推荐：Java教程-廖雪峰

2. spring和springboot

慕课网免费视频（尽快观看，可能随时收费）
https://www.imooc.com/learn/1314
https://www.imooc.com/learn/956
https://www.imooc.com/learn/1058
https://blog.didispace.com/spring-boot-learning-2x/

3. mysql数据库和sql语言

菜鸟教程上的mysql教程内容都比较基础，需要全部掌握，其中红色框内是比较常用的操作
mysql数据库
sql语言
数据库管理工具推荐使用navicat-premium，navicat是收费的，破解版本点这里，提取码1234

常用中间件

• 中间件要求会使用即可
  git-代码版本管理工具：https://www.runoob.com/git/git-tutorial.html
  maven-java web项目构建打包工具：https://www.runoob.com/maven/maven-tutorial.html
  mybatis-取代jdcb直接在java代码中通过sql操作数据库
  redis-缓存（基于内存的Key-Value数据库）
  nginx-反向代理服务器/web服务器
  tomcat-web服务器
  postman-接口测试工具

常用其他技术

正则表达式 https://www.runoob.com/regexp/regexp-tutorial.html
markdown https://www.runoob.com/markdown/md-tutorial.html

程序员网站

github-基于git的软件项目的托管平台
码云-国内基于git的软件项目的托管平台
掘金-推荐使用掘金APP