## Web前端开发是什么？  

#### **Web前端的工作在以前称之为网页美工；**

**什么是前端开发？**

虽然网页设计是网站的外观，但前端开发是将该设计的页面通过代码的形式在网络上进行展现，并加入一些功能特效 ！使之具有一定的交互性！

**什么是前端开发人员？**

前端Web开发人员是通过HTML，CSS和JavaScript等编码语言实现Web设计的人。虽然它不再那么常见，但是前端开发人员有时被称为“客户端开发人员”，以区别于后端开发人员，后端是对数据库等幕后工作进行编程。如果您前往任何站点，您可以在导航，布局（包括此文章页面）中查看前端开发人员的工作，甚至可以看到PC页面与手机页面不同的展现方式。

![](https://upload-images.jianshu.io/upload_images/14078400-cb82339f0384096b.png!web?imageMogr2/auto-orient/strip|imageView2/2/w/483/format/webp)

。



![img](https:////upload-images.jianshu.io/upload_images/15776993-72c7de191c61f000.png?imageMogr2/auto-orient/strip|imageView2/2/w/486/format/webp)



随着Flash逐渐退出网页设计的舞台，HTML+CSS+JavaScript为核心的前端技术成功完成了技术栈的升级，Web前端工程师的名头也越叫越响；

互联网本身属于服务行业，随着互联网思维、互联网+等概念的提出，加上技术的不断提高，用户对互联网产品需求和体验也不断提高，而Web前端工程师致力于通过技术改变用户的体验，所以前端工程师的产品正是与用户接触的第一产品；

### 网页制作与Web前端开发概述

Web前端开发作为一项崭新的职业，在应用价值上，采用前端MVC为主的Web研发模式，应用AngularJS开源框架，实现前端与后端开发的完全分离，目录结构可以随意调整，特色图片及样式能方便的引入进来。在国内外的相关研究中，得到了空前的发展。前端技术作为满足用户体验的基础尝试，技术开发的难度也随之加大。基于网站制作下的网页设计开发中，更多的需要融合艺术和技术的双向发展才能及早实现。

Web前端开发设计后，网页制作的页面由静止幻化为可供浏览的动态画面，且在网站制作中，以富媒体的生动性体验和文字图片的富集，实现了制作平台开发设计下的新体验。

从掌握的软件技术如平面设计软件、DW和简单的HTML、CSS、JS来实现网站制作中，相关开发方式的掌握和技能性实践性功能的强化，在服务器J2EE+Oracle组合还和ASP+Access组合的用户直观体验中，以Web前端开发与网页设计并存的制作平台，并在应用领域获得了飞升。

。

------

## Web前端开发前景怎样？

**根据国内某知名招聘网站发布的一份报告中显示，Web前端开发工程师已成为中国互联网行业中最紧俏的职位；在各地互联网各种紧缺职位中，各类研发技术类岗位稳居前列；**

以目前的互联网企业为例，他们都十分注重前端的设计；只有先做好前端技术、让客户拥有良好的体验，一切才有可能；用户体验好，才会有人访问，访问的人数提升，才会有优化后端的可能，才能进行客户分析，公司上市后，才有大量数据做数据分析，获得更有价值的数据信息；从而一些互联网创业公司，在获得第一轮融资后第一件事是不计成本地招Web前端开发人员，就是要把前端做起来；这就是为什么前端工程师很火、工资很高的原因；



![img](https:////upload-images.jianshu.io/upload_images/15776993-50fa6d33ade22dd1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1016/format/webp)



目前Web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30~50万，很多企业对于与Web前端相关的技术职位更是求贤若渴；

不得不说，Web前端开发工程师的“黄金时代”正迎面走来；

------

## web前端有哪些技术呢？

#### **Web前端开发技术包括三个要素：HTML、CSS和JavaScript；**



![img](https:////upload-images.jianshu.io/upload_images/15776993-815748835ae4d7bc.png?imageMogr2/auto-orient/strip|imageView2/2/w/333/format/webp)



**随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的；**

前端开发技术的三要素也演变成为现的：HTML5、CSS3、JQuery；

Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多；

从知识的广度上对Web前端开发工程师提出了要求，如果要精于前端开发这一行，也许要先精十行；

前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢；所以，对于从事IT工作的人来说，前端开发是个不错的切入点；也正因为如此，前端开发领域有很多自学成"才"的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难；另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足"高可维护性"的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。



![img](https:////upload-images.jianshu.io/upload_images/15776993-76c7b498d2946d9a.png?imageMogr2/auto-orient/strip|imageView2/2/w/750/format/webp)



------

## 什么人群适合做web前端呢？

**是不是什么人都可以做Web前端开发，答案肯定是否定的；**

Web前端开发跟传统行业技术不一样，对学历和电脑操作这块都有硬性要求；

只要你符合以下这几点，在专业的老师带领下成为web前端开发工程师也只是时间的问题；

**适合做Web前端开发的人群：**

1.高中以上学历，18~30周岁，会基础的电脑操作；

2.对计算机技术感兴趣，想学一门发展前景好的技术；

3.能吃苦，有一定的逻辑思维能力；

4.意志力坚定，能够一往如既的坚持学习下去；

------

### WEB标准

什么是WEB标准？

> 它是一些规范的集合，是由 W3C 和其他的标准化组织共同制定的，以用它来创建和解释基于 Web 的内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。
>
> web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合，主要由结构（Structure） 、表现（Presentation）和表现（Behavior）三部分组成。
>
> - 结构标准：用于对网页元素进行整理和分类，主要有xml和xhtml两个部分。
>
> - 表现标准：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。
>
> - 行为标准：指网页模型的定义和交互的编写，主要有DOM和ECMASrcipt两个部分。
>
> - | 标准 | 说明                                     |
>   | ---- | ---------------------------------------- |
>   | 结构 | 对网页元素进行整理和分类                 |
>   | 表现 | 设置网页元素的版式、颜色、大小等外观样式 |
>   | 行为 | 网页模型的定义及交互的编写               |
>
> - 
>
>   
>
>   ![img](https:////upload-images.jianshu.io/upload_images/18705430-9a99a0baab043e6a.png?imageMogr2/auto-orient/strip|imageView2/2/w/715/format/webp)
>
> 。

WEB标准涉及哪些语言？

> **结构化语言**
>
> HTML （超文本置标语言） 4.01
>
> XHTML （可扩展超文本置标语言） 1.0
>
> XHTML 1.1
>
> XML （可扩展标记语言） 1.0
>
> **表现类语言**
>
> CSS （层叠式样式表） Level 1
>
> CSS Level 2 revision 1
>
> CSS Level 3 
>
> MathML （数学置标语言）
>
> SVG （可变矢量图形）
>
> **对象模型**
>
> DOM （文档对象模型） Level 1
>
> DOM Level 2
>
> DOM Level 3 Core
>
> **脚本语言**
>
> ECMAScript 262 （JavaScript的标准化版本）

WEB标准能带给我们什么？

> **更简易的开发与维护**
>
> 使用更具有语义和结构化的 HTML，将让您更加容易、快速的理解他人编写的代码。
>
> **与未来浏览器的兼容**
>
> 当您使用已定义的标准和规范的代码，那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
>
> **更快的网页下载、读取速度**
>
> 更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。
>
> **更好的可访问性**
>
> 语义化的HTML（结构和表现相分离）将让使用读屏器以及不同的浏览设备的读者都能很容易的看到内容。
>
> **更高的搜索引擎排名**
>
> 内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。
>
> **更好的适应性**
>
> 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的 CSS 文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

理解WEB标准的时候应注意：

> “能够在任何浏览器中显示”并不意味着“在任何一个浏览器中显示的效果相同”。
>
> 使一个文档在不同的浏览器和平台上都有相同的显示效果是不可能的，即便只用图片也不可能，因为发布在网上的文档将被不同的操作系统上的不同的浏览器软件所显示，并显示在不同大小与质量的显示器上（或者显示在非显示器上），浏览者也可能改变了浏览器的默认字体或者其他喜好。

校验WEB标准：

> 没有任何原因不去校验您的 HTML 和 CSS 。相反，它还会给您带来许多好处。
>
> (X)HTML: [W3C 的标记校验服务](https://link.jianshu.com?t=http://validator.w3.org/)
>
> CSS : [W3C 的 CSS 校验服务](https://link.jianshu.com?t=http://jigsaw.w3.org/css-validator/)

在**SublimeText**中安装WEB校验工具-W3CValidators：

> ctrl+shift+p 打开命令面板
>
> 输入install package（前提是你的SublimeText安装了package control工具）后回车
>
> 输入W3CValidators后点击安装
>
> 校验文件时可以通过ctrl+shift+p 打开命令面板输入“W3CValidators”调用相关命令，同时通过快捷键组合win+ctrl+v可直接校验html文件

###  浏览器：

是用来显示在[万维网](https://baike.baidu.com/item/万维网/215515)或局域网等内的文字、图像及其他信息的软件，它还可以让用户与这些文件进行交互操作。浏览器是电脑上网时经常使用到的应用软件，浏览器正是Internet时代的产物，随着电脑操作系统的普及、Internet的全球连接及人们对信息需求的爆炸式增长，为浏览器的诞生和兴起提供了强大的动力，同时它也标志着互联网时代的来临 。

浏览器窗口各部分功能如下。

1、地址栏：用于输入网站的地址，IE浏览器通过识别地址栏中的信息，正确连接用户要访问的内容。如要登录“网址之家”网，只需在地址栏中输入网址之家的网址：http://www.hao123.com，然后按[Enter]键或单击地址栏右侧的按钮即可。在地址栏中还附带了IE中常用命令的快捷按钮，如刷新(C)、停止(x)等，前进、后退按钮设置在地址栏前方 。

2、菜单栏：由“文件” “编辑” “查看” “收藏夹” “工具”和“帮助”菜单组成。每个菜单中包含了控制IE工作的相关命令选项，这些选项包含了浏览器的所有操作与设置功能 。

3、选项卡：从Internet Explorer8版本开始，IE浏览器可以使用多选项卡浏览方式，以选项卡的方式打开网站的页面 。

4、页面窗口：是IE浏览器的主窗口，访问的网页内容显示在此。页面中有些文字或对象具有超链接属性，当鼠标指针放上去之后会变成手状，单击鼠标左键，浏览器就会自动跳转到该链接指向的网址；单击鼠标右键，则会弹出快捷菜单，可以从中选择要执行的操作命令  。

5、状态栏：实时显示当前的操作和下载Web页面的进度情况。正在打开网页时，还会显示网站打开的进度。另外，通过状态栏还可以缩放网页 。

## 浏览器的内核



浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成 [3] 。

1、Trident内核

代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等 [3] 。

2、Gecko内核

代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9 [3] 。

3、WebKit内核

代表作品有Safari、Ghrome。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示 [3] 。

4、Presto内核

代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了1日版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版 [3] 。

## 主流浏览器分类



主流的浏览器分为IE、Chrome、Firefox、Safari等几大类，它们具有以下特点：

1、IE浏览器。IE浏览器是微软推出的Windows系统自带的浏览器，它的内核是由微软独立开发的，简称IE内核，该浏览器只支持Windows平台。国内大部分的浏览器，都是在IE内核基础上提供了一些插件，如360浏览器、搜狗浏览器等 [4] 。

2、Chrome浏览器。Chrome浏览器由Google在开源项目的基础上进行独立开发的一款浏览器，市场占有率第一，而且它提供了很多方便开发者使用的插件，因此该浏览器也是本书开发的主要浏览器。Chrome浏览器不仅支持Windows平台，还支持Linux、Mac系统，同时它也提供了移动端的应用（如Android和iOS平台） [4] 。

3、Firefox浏览器。Firefox浏览器是开源组织提供的一款开源的浏览器，它开源了浏览器的源码，同时也提供了很多插件，方便了用户的使用，支持Windows平台、Llnux平台和Mac平台 [4] 。

4、Safari浏览器。Safari浏览器主要是Apple公司为Mac系统量身打造的一款浏览器，主要应用在Mac和iOS系统中 [4] 。

## Web浏览器分类



这里的Web服务器不是指硬件上的服务器，而是指支持解析Web后台语言的服务器。常用的服务器有以下几种：

1、IIS服务器。IIS服务器是微软提供的一种Web服务器，它主要是解析微软提供并开发的ASP和ASP.NET等后台语言，运行在Windows平台下，对IE内核的浏览器支持良好，并且有些调用Windows接口的Web应用程序只能采用IIS服务器进行解析。IIS服务器优点很多，但是缺点也很明显，通常Windows的漏洞容易导致其安全性大为降低  。

2、Apache服务器。Apache服务器是开源基金组织Apache提供的一种Web服务器，主要是解析PHP文件，是一款功能强大的免费软件，支持多个操作系统，如Windows、Linux、MacOS等 [4] 。

3、Tomcat服务器。Tomcat服务器也是开源基金组织Apache提供的一种支持JSP组件的Web服务器，它支持Windows、Linux、Mac OS等多个操作系统，安装简便，使用也较为方便，是本书开发使用的服务器组件。

4、其他服务器。如JBoss、Weblogic、WebSphere等，这些服务器由于在商业上使用较多，也有部分需要付费，本书不进行介绍，有需要的读者可到相应的官方网站上查看  。

