Web前端现状IDE环境介绍安装配置WebStorm的使用HTML文档结构及基础标签 市场缺口

 

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

 

　　2.  发展前景

 

　　现在市场上的前端程序员鱼龙混杂，很多自称是前端的人实际上只会页面制作，他们搭着“前端”的顺风车，和企业要着高薪，却应付不了更复杂的工作。这是导致企业对前端需求大的原因，不是缺少前端，而是缺优秀的前端。

 

　　3.  职业发展路线

 

　　前端页面制作、前端开发、前端架构师

 

　　我们的课程体系是每一名前端开发人员都要牢牢掌握的，这些知识如果由页面制作人员摸索学习成为开发人员，可能需要若干年的时间。在这里需要你4个月学完，所以压力可想而知，代码量可想而知！

 

　　前端页面制作：利用html+css完成页面的搭建

 

　　前端开发：更多的要求javascript技术

 

　　前端架构师：要求知识面、实际项目经验、对技术的整体把控。

 

　　4.  前端工程师具体在做什么?

 

　　Web前端开发工程师，主要职责是利用HTML/CSS/JavaScript等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，同时结合后台技术模拟整体效果，致力于通过技术改善用户体验。

 

　　5.  前端工程师在和谁打交道?

 

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

 

　　一.  IDE环境介绍

 

　　它是”集成开发环境”的英文缩写。

 

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

 

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

 

　　二.  IDE集成开发环境

 

　　用于提供程序开发环境的应用软件，一般包括代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

 

　　它和单纯的编码工具不同，它不仅包含了编辑器，还有分析、编译等功能。它集成了一系列软件开发所需的功能，所以称为“集成开发环境”。

 

　　这里我们是不推荐使用Dreamweaver，它更多的是针对前端设计人员来用，而不是我们编程人员.我们推荐使用WebStorm10或者国产HBuilder

 

　　其它语言的常见IDE有：eclipse、visio studio等

 

　　推荐使用浏览器:chrome  火狐,原因:

 

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

 

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

 

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

 

　　当用户第一次运行WebStorm或者没有打开项目，在WebStorm显示的欢迎屏幕上，可以快速访问的主要入口点。包括“新建项目”、“打开项目”、最近项目列表、注册等。

 

　　当打开了一个项目的时候，WebStorm会显示主窗口，包含有六个部分，分别是菜单栏 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色标示

 

　　常用操作

 

　　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键，回车）

 

　　菜单栏常用

 

　　FILE下（通常操作关于文件、工程）

 

　　New Project创建工程

 

　　New  会弹出一个列表供选择要创建的类型

 

　　Open  打开一个项目

 

　　Save As  将当前页面另存为

 

　　Reopen Project  近几次打开的项目列表

 

　　Close Project  点击后回到欢迎页面上

 

　　Rename Project  它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。

 

　　settings  常用设置

 

　　Exit   退出Webstorm

 

　　鼠标滑到编辑区的右上角，会显示出一排浏览器的图标，如果你电脑中安装了相应浏览器，webstorm会自动关联它，在你想看当前文档的效果时，点击浏览器按钮即会打开

 

　　右击编辑区的左边栏，点击show Line Number，可以显示出行号，帮助我们快速定位代码

 

　　点击状态栏右下角的click to go to line 可以快速跳到你要找到行，当代码量过千时，这个功能非常有用

 

　　WebStorm常用配置

 

　　1.如何更改主题（字体&配色）

 

　　file->setting->editor->colors&fonts->scheme选择你的主题（darcula）

 

　　2.如何让webstorm启动的时候不打开工程文件

 

　　file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）

 

　　3.如何完美显示中文

 

　　file->settings->appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12

 

　　(appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。

 

　　4.如何显示行号

 

　　在代码显示区的左边右击选择“show line number”。

 

　　5.如何代码自动换行

 

　　file-settings-editor->general-> "use soft wraps in editor" 打上钩，代码就自动换行了。

 

　　你先试下，在一行中写很长的句子，看会不会换行。