自学Web前端—学习前的准备

什么是Web前端？

      学习之前我们首先得知道Web前端是什么？是干什么的？Web前端的前身是网页设计，也就是HTML，即超文本标记语言。随着Web前端的不断发展，随着2015年ES6的发布，正式形成了如今的Web前端。

      如今的Web前端有三要素，即HTML5，CSS3和JavaScript。HTML5也称超文本标记语言，它是整个网页的骨架，换句话来说，没有它的存在，就没有网页的存在，它主要包括文字、图片、表单、音视频等等；CSS3也称层叠样式表，它主要用于对网页的美化，相当于血肉，刻画网页的细节，如：文字的大小、颜色、间距，图片的大小，动画等等；JavaScript（简称JS）是Web开发领域中的一种功能强大的编程语言，我称其为网页的灵魂，它可以使网页更加丰富起来，主要展现在特效和交互上，可以让页面“动起来”。

      HTML5,CSS3与JavaScript相辅相成，有不同，也有重复的地方，如：背景图片的设置，HTML中可以使用img标签，CSS中可以使用background-image属性；动画的设置，CSS和JavaScript也都有相应的方法；按钮的设置，HTML中可以为input标签设置对应的属性，JS中也有对应的事件方法。这些以后都会一一解答。

支持性

      如今的主流浏览器对于Web页面的支持性都比较好，PC端有五个主流浏览器：IE（Windows自带）、火狐（Firefox）、谷歌（Chrome）、Safari（苹果自带）、欧朋（Opera）。目前，对Web页面支持最好的是谷歌浏览器，个人推荐使用这个浏览器进行页面的预览。当然，如果要调用地图API，推荐使用其他浏览器，这个后面再说。

开发环境

      不管是哪种编程语言，编写的时候都需要编辑器。我使用的Windows系统，由于Windows系统自带的记事本存在Bug（漏洞），所以不推荐使用记事本进行编辑。我推荐使用Visual Studio（vs code），下面是官网地址：https://code.visualstudio.com/

根据系统选择对应的版本下载安装即可。官网有对应的安装教程，我就不再赘述了。

安装完成之后的页面如下图：

打开扩展，搜索Chinese，安装中文简体，再次重启，就可以方便我们使用了

为了方便后期的使用，让开发更加简便，我提供了以下的扩展推荐：

点击设置，也可以根据喜好选择主题风格，个人建议颜色主题选择高对比度，相对来说比较方便。编辑器的其他功能可以对照官方开发文档，配合使用。

      清楚了这几点之后就可以进行前端的开发了。