最新web前端零基础入门学习之编程工具的安装和介绍

　　自从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。

　　举个例子：你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频、还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。

　　这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。

　　所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多。

　　1.1市场缺口

　　前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右，在此之前，前端工作基本上都是由服务端工程师包办的，或者是由设计师来产出HTML页面。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。

　　1.2发展前景

　　近十年以来，IT行业发展火热，衍生了很多新职业，例如：UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。

　　Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。

　　“女怕嫁错郎，男怕入错行”，今天就让我这位资深的Web前端的“程序猿”来给大家分析一下Web前端开发在2019年的发展前景和就业形势吧。

　　在了解Web前端的发展前景和就业形势前，我们还是来了解一下什么是Web前端和学习Web前端应该掌握哪些知识吧！

　　1.2.1什么是web前端

　　Web前端是互联网时代软件产品研发中不可缺少的角色，从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。

　　从狭义上讲，Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，处理视觉和交互问题。

　　在Web前端这个岗位兴起之前，html+css的工作是被视觉人员所承担的，而js这部分则是由后端完成的。随着智能手机和移动互联网的普及，PC端、手机端等五花八门的应用占领着每个人的手机，随之而来各种定制化的UI风格让兼容问题变得越来越头疼。因此，有企业开始把html+css+js这部分工作独立出来，由一个新的岗位来处理，成为了一个处理视觉和交互的综合岗位，这才有了Web前端这个岗位的出现。

　　因此，Web前端开发行业是伴随Web兴起而细分出来的行业。实际上，Web前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，它存在在互联网的每个角落，我们使用的微信里面的各种功能、小程序等都离不开web前端技术。

　　1.2.2做一名web前端工程师需要哪些知识

　　与其他计算机主流技术所不同的是，Web前端所包含的知识模块很多，就目前而言，HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块，但会随着实际需求而有所改变。

　　一名优秀的Web前端工程师，需要JavaScript语言基础扎实，具有良好的规范开发习惯；熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；要熟悉MVVM、MVC开发模式；熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；熟练使用git版本管理工具。

　　此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。

　　Web发展得很快，几乎每天都在变化！如果没有快速学习的能力，就跟不上 Web发展的步伐。作为前端工程师仅仅依靠今天的知识是无法适应未来的，必须不断提升自己，不断学习新技术、新模式。因此，不仅作为新人小白要努力学习，提高自己；就连已经入职三五的前端开发工程师，也需要不断学习，了解前端技术的变化，提高自己的技术技能。

　　1.2.3web前端的前景和就业形势

　　学习Web前端的就业面很广，选择的岗位有：前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。

　　虽然近两年大数据、人工智能等很火，但Web前端开发依然是十分热门的，特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5，前端开发已经进入HTML5时代，所以，Web前端在今后十年仍有很大的发展空间。

　　据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。

　　所以总的来说， web前端在目前和未来都是稀缺的，是一个有“钱”途的职业。

　　1.3谁和前端人员打交道

　　产品经理把用户可能的需求提出来，和前端还有后端交涉，这个东西如何实现。确定可行后，由设计设计出UI图，前端把它做出来，第一步可能是静态的，纯html css，然后我们再用angularjs、js实现一些业务方面的功能，最后和后台的接口进行联调，一般会是这么一个过程。那运营呢？有时候会需要你配合他们的营销方案对产品做一些调整，比如圣诞节到了，它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。

　　2.1IDE介绍

　　我们都知道网上的页面是编程人员写出来的，用什么写的呢？用编码工具或IDE集成开发环境。

　　编码工具：

　　辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。写代码也一样，需要借助工具来开发。常见的编码工具有记事本、sublime Text、notepad++

　　集成开发环境（IDE，Integrated Development Environment ）：

　　是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。

　　这里我们是不推荐使用Dreamweaver，它更多的是针对前端设计人员来用，而不是我们编程人员。其它语言的常见IDE有：eclipse、visio studio、Visual Studio Code等。

　　2.2浏览器介绍

　　前面讲了IDE用来编码，写好的代码如何展示？通过浏览器来展示。

　　以上这些，都不要再使用，身为前端，要不论是学习还是工作都应该使用更符合业W3C规范的浏览器。推荐使用的浏览器：

　　前两者都非常的优秀，它们比其它浏览器优先之处在于

　　1.速度快，不是指打开的速度，而是指解析页面CSS、JS的速度

　　2.支持更多新的功能，比如最新的标准html5、css3的一些新功能

　　3.插件化开发，chrome和firefox提示了应用商店，你可以安装自己喜欢的插件，定制自己的浏览器

　　2.3调试工具

　　chrome自带的开发者工具、firebug、IE有HttpWatch

　　具体步骤

　　3.1安装

　　3.2常规操作

　　1.创建项目

　　file-->new project-->指定路径-->点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有。idea这样一个文件

　　2.创建文件

　　右击项目-->new-->html file-->输入文件名-->下面的下拉框可以选择h5还是h4或是xhtml类型的文档，我们选择h5，也就是默认的。写名字的时候不用加html后缀，webstrom会自动为我们添加

　　3.重命名

　　右击html文件-->refactor-->rename---改好后回车

　　4.删除文件

　　右击html文件-->delete-->ok（或者直接按电脑上的del键，回车）

　　3.3常规配置

　　4.1什么是HTML

　　HTML 是用来描述网页的一种语言。

　　HTML 指的是超文本标记语言： HyperText?Markup?Language

　　4.2什么是标签

　　4.3什么是元素

　　"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。

　　但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如下实例：

　　HTML 元素：

　　4.4web浏览器

　　Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

　　浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

　　4.5HTML版本

　　4.6HTML属性

　　属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。

　　每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。

　　4.7HTML注释

　　为代码添加适当的注释是一种良好的编程习惯，注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示，注释标签不支持任何属性。

　　语法：

　　4.8HTML基本结构

　　4.8.1doctype的作用

　　DOCTYPE是document type （文档类型）的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

　　4.8.2删除<!DOCTYPE>会发生什么

　　在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异，这种渲染方式叫做混杂模式，在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视<!DOCTYPE>

　　4.8.3严格模式和混杂模式

　　严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关。

　　严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面

　　混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

　　4.8.4HTML标签

　　定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

　　4.8.5head标签

　　Head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

　　下面这些标签可用在 head 部分：

　　<title>、<meta>、<link>、<style>、 <script>。

　　应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。

　　文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。

　　lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）

　　4.8.5title标签

　　1.可定义文档的标题。

　　2.它显示在浏览器窗口的标题栏或状态栏上。

　　3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。

　　4.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。

　　5.title写和你网页相关的关键词有利于SEO优化

　　SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。

　　网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

　　4.8.6meta标签

　　META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

　　元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

　　常见的meta有：