前言
小时候总会被问到:你长到后想做什么?但我总是支支吾吾回答不出。其实当时自己对计算机充满好奇与未知,就想长大后能做一个自己设计的网站,那将是一件很酷的事情。可惜成长的路线和设想总是有偏差的,但我依然没有放弃这个想法。只要梦想还在,就有实现的可能。哈哈~~废话不多说,跟着小伊从小白通往进阶之路吧!如有错处,还望各位大神批评指正!
![](https://i-blog.csdnimg.cn/blog_migrate/cd5f80313f410fb32b6f1bca1fa19c2b.jpeg)
一、环境搭建
首先来看什么是前端开发,小伊在此献上百度百科的给出的定义:
前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大[1]。
接下来在本地电脑上安装前端开发所需的软件。
1、编辑器
可以用记事本、vscode(推荐)、sublime、atom、webstorm等编写代码,但小伊推荐使用vscode,它是微软于2015年发布的一款免费开源的现代化轻量级代码编辑器。
- Vscode :Visual Studio Code 是一个跨平台的代码编辑器,直接在百度搜索vscode,进入官网即可下载.
可以安装一些相关插件 :
- open in browser或者view in browser(帮助开启页面的)
- image preview(编辑图片)
- vscode-icons(为每个源代码添加图标)
vscode一些基础的快捷键
- ctrl+x : 剪切
- ctrl+c : 复制
- Alt+向上/下箭头: 移动当前行
- Ctrl+/ :加注释
- shift+alt+a :添加或者删除块注释,来回切换
- shift++alt+上下箭头: 向上或者向下复制当前行
其他编辑器
- Sublime Text
- Atom
- Webstorm
- Notepad++
- UE
- Editplus
- DW
2、浏览器
- Chrome(好用,可以看一下浏览器市场份额排行)
- IE(如果是mac系统,可能没那么好用)
- Firefox
二、基本常识
开发岗位 :
- 前端(主要负责界面与交互,比如动画、交互) html+css+js
- 后端(处理数据的,给前端提供接口)java,python,php…node
学习路线:
html5(html4)------->css3(css2)------>js
第一阶段:html4/5+css2/3 可以做PC页面+移动端页面
第二阶段:javascript
- 原生客户端js(es5/6/7…+dom+bom)
- jQuery
- bootstrap(响应式)
- 服务器相关技术,node(原生、框架express/koa)+数据库(mongodb/mysql/redis)+…
- 流行框架vue/react/angular
- 高级知识ts+…
三、HTML概述与基本结构
参考资料
[1] 百度百科https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/10009024?fr=aladdin