整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一章 Web前端技术简介
本章学习目标
互联网中的网页大多数都是使用HTML格式展示到浏览者面前，因此，HTML是目前最流行的网页制作语言。为了使网页具有更好的扩展性和用户体验，CSS样式表在网页设计中有着重要的地位。在学习HTML和CSS之前，需要了解一些基本的互联网相关知识，本章将从Web前端概述、Web前端开发工具和HTML入门基本知识开始，带领读者进行Web开发之旅。
1.1 Web前端概述
Web前端即指大家平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面将对Web前端的相关概念进行详细讲解。
1.1.1 初识Web前端
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http: //info. cern. ch/），从此人类宣布了互联网时代的到来。随着互联网的飞速发展，网站开发人员也变得炽手可热，供不应求。据不完全统计截止2016年底，网站开发人员超过2000万+。
Web前端开发是从网页演变而来，名称上有明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Table布局，后来发展到DIV+CSS网站重构，再到JS逐渐成为web前端开发的语言及web2.0的出现，涌现出相应的产品，如SNS、博客、微博等。人们对网页的需求不断增大，Web前端技术也正加速发展。
Web开发职位可分为网页设计师（UI设计师）、Web前端开发工程师、Web后端工程师、数据库工程师。下面来了解一下这四大职位的分工：
Web前端工程师能充分理解项目需求和设计需求，并与UI设计师、Web后端工程师紧密合作，产出高质量的网站展示层，为用户呈现最好的界面交互体验。
图1.1网站开发模式
有一句话非常形象的形容了Web前端工程师的特点，“它是游走在二次元与二进制之间的魔法师!”。
1.1.1 Web前端三大核心技术
首先来了解下W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，所以Web前端相关技术都是基于W3C标准实现的。
下面来介绍下Web前端开发所包括的三大核心技术，即HTML语言、CSS语言、JavaScript语言。
1.HTML语言
HTML全称“Hyper Text Markup Language”，中文解释为“超文本标记语言”，它是制作网页的标准语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
2. CSS语言
CSS全称“Cascading Style Sheet”，中文解释为“层叠样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
3. JavaScript语言
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。 通常JavaScript脚本通过嵌入在HTML中来实现自身的功能。
Web前端三大核心技术就像板凳的三条腿，缺一不可。用图片来表示三者之间的联系，如图1.2所示。
图1.2 三大核心技术
W3C组织规定，web标准需要将网页的结构、样式和行为三者进行分离。HTML +CSS+Javascript本质上构成一个MVC框架，即HTML用来描述网页的结构（Model）、CSS用来描述网页的结构（View）、Javascript用来描述网页的行为即调度数据和实现某种展现逻辑（Controller）。本书主要讲解HTML+CSS。
用一个盖房子的例子来描述下三者之间的关系，首先需要把房子的地基和骨架搭建好，有一个良好的结构（HTML）。然后给房子刷上油漆和添加窗户，对房子样式进行美化（CSS）。最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScript），这样房子才算搭建完毕。下面来看一下在web前端中，三者的体现效果如图1.3、1.4和1.5所示。
图1.3 仅仅使用HTML的文字
图1.4 在HTML基础上加入CSS样式
图1.5 加入JavaScript鼠标划入效果
1.2 Web前端开发工具
俗话说得好，工欲善其事必先利其器。所以在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及到三大类工具：浏览器、网页编辑器、切图软件，本节就来介绍这三大类工具。
1.2.1 浏览器
浏览器是网页的运行平台，即可以把HTML文件展示在网页中，供用户可上网进行浏览的一种软件。目前主流的浏览器有IE、Chrome、Firefox、Safari、Opera等，如图1.6所示，由于某些因素，这些浏览器不能完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不用的解析。这就导致了同样的页面在不同的浏览器下显示效果可能不同。
图1.6 主流浏览器
不同用户使用的浏览器可能不同，因此制作网页时，需要保证该网页兼容所有的主流浏览器。关于网页制作中的兼容性问题及解决方案，会在后面的章节进行讲解。下面介绍几种主流的浏览器。
1. IE浏览器
IE是Internet Explorer简称，它是微软公司推出的一款网页浏览器，采用Trident内核实现，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直译为“网探路者，但在IE7以后官方便直接俗称"IE浏览器"。由于一些用户仍然在使用低版本的浏览器，所以在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器都是基于IE内核的，如360安全浏览器、搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。
2. Chrome浏览器
Chrome浏览器一般指Google Chrome，Google Chrome是一款由Google公司开发的一款设计简单、高效的Web浏览器，采用V8引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webkit、Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。本书运行环境采用Chrome浏览器，版本为 54.0.2840.5，如图1.7所示。
图1.7 Chrome浏览器首页
3. Firefox浏览器
Firefox浏览器一般指Mozilla Firefox，中文俗称“火狐”，是Mozilla公司出品的一款自由及开放源代码Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。
4. Safari浏览器
Safari是苹果公司出品用于苹果计算机的操作系统Mac OS X中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论在 Mac、PC 或 iPod touch 上运行，Safari 都可提供极致愉悦的网络体验方式，更不断地改写浏览器的定义。
5. Opera浏览器
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的Web浏览器，采用Presto内核实现，它是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
注：浏览器内核负责对网页语法进行解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
1.2.2 网页编辑器
网页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如图1.8所示为常用的网页编辑器的图标。本教材采用Dreamweaver网页编辑器 版本为CS6。Dreamweaver简称“DW”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。
图1.8 常用网页编辑器
接下来讲解如何使用Dreamweaver网页编辑器进行网页编程，软件的安装不再介绍，直接讲解软件安装后如何使用。
运行DW软件，进入软件界面， 选择菜单栏中【文件】→【新建】，打开新建文档窗口，在【文档类型】下拉列表中选择HTML5，单击【创建】按钮，如图1.9所示，即可创建一个空白的HTML文档，如图1.10所示。
图1.9 新建文档窗口
图1.10 空白HTML文档
为了让初学者更好的使用DW工具，需要对DW进行一些初始化的设置，具体如下：
a) 工作区布局设置
运行DW软件，进入软件界面，将布局设置成统一的模式，选择菜单栏中选择【窗口】→【工作区布局(w)】→【经典】，如图1.11。
图1.11 初始化工作区布局
2. 必备面板
设置经典模式后，需要调出三个常用的面板，分别选择菜单栏【窗口】菜单下的【插入】、【属性】、【文件】3个命令，如图1.12所示。
图1.12 初始化必备面板
3. 新建默认文档设置
选择菜单栏中【编辑】→【首选参数】（Ctrl+U），选中左侧【分类】中的【新建文档】，右边就会出现相应的设置，选择最常用的HTML文档类型和编码类型，本书设置为HTML5，如图1.13所示。
图1.13 默认文档设置
新建文档的首选参数设置后，新建HTML文档时，DW就会按照默认文档设置直接生成所需的代码。
4. 浏览器设置
初学者计算机必备IE浏览器和Chrome浏览器，建议讲DW的默认预览浏览器设置为“Chrome浏览器”，快捷键F12是使用主浏览器预览网页，一般把IE浏览器设为次浏览器，快捷键Ctrl+F12，如图1.14所示。
图1.14 默认浏览器设置
5. 代码提示
为了加快写代码的速度，会用到代码提示，DW中就有强大的代码提示的功能，只需在【首选参数】对话框中设置代码提示，选择【代码提示】选项，然后选中【结束标签】选项中的第二项，单击【确定】按钮即可，如图1.15所示。
图1.15 代码提示设置
1.2.3 切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中涉及到的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。如图1.16为常用切图软件的图标，本教材采用Photoshop进行切图，版本为CS5。Photoshop简称“PS”，它是一款专业性很强的图片处理软件，在第九章中将详细的来学习如何利用Photoshop进行网页的切图操作。
图1.16 常用切图软件
1.3 HTML入门
1.3.1 什么是HTML
HTML的英语意思是：Hypertext Markup Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。接下来将带领读者从语言、超文本、标记三部分进行理解HTML。
1．语言
HTML一种编程语言，有指定的语法规则。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。
2. 超文本
所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。
HTML的普遍应用就是通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示：
通过HTML可以通过图片格式和文字格式的设计实现出丰富多彩的风格：
<IMG SRC="文件名"> <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>
通过HTML可以实现页面之间的跳转：
〈A HREF="文件路径/文件名"></A>
通过HTML可以展现多媒体的效果：
<EMBED SRC="音乐地址" AUTOSTART=true> <EMBED SRC="视频地址" AUTOSTART=true>
从上面我们可以看到HTML超文本文件时需要用到的一些标签。
3. 标记
对于刚刚接触超文本的读者，可能不能理解一些用“<”和 “>”括起来的句子，它们称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。
在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。如<head>、 <body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。标签分为单标签和双标签两大类，具体介绍如下：
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和WEB浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。
1.3.2 HTML基本结构
HTML文档是由一系列的元素和标签组成。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构如例1-1所示。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>标题</title> 6 </head> 7 <body> 8 内容 9 </body> 10 </html>
运行结果如图1.17所示。
图1.17 HTML基本结构
一个HTML文档基本结构主要由文档声明（<!DOCTYPE HTML>）、HTML文档（<html>）、文档头部（<head>）和文档主体（<body>）四部分组成。接下来具体介绍这四个部分的内容。
1. 文档声明
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签，它用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。必须在开头处使用<!DOCTYPE>为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的XHTML文档，并按照指定文档类型进行解析。
<!DOCTYPE>声明与浏览器的兼容性相关，如果没有<!DOCTYPE>，就由浏览器决定如何展示HTML页面，这时，不同的浏览器可能有多种显示效果，这样是不允许的。
2. HTML文档
<html>标签位于<!DOCTYPE>声明之后，作用相当于在告知浏览器这是一个HTML文档，<html></html>标签限定了文档的开始点和结束点，其中<html>表示网页的开始，</html>表示网页结束，网页需要展示的所有内容都应该写到<html></html>标签的内部，<html>标签也被称为根标签，指最外层的意思。
3. 文档的头部
<head></head>用于定义HTML文档头部信息，如图1.17中的标题，也称头部标签，在<html>标签之后，用来封装其他位于文档头部的标签，如表1.1中的标签。一个HTML文档只能有一对<head></head>标签，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
表1.1 文档头部内的标签
上例中<meta charset="utf-8">指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以统一页面显示中文简体繁体及其他语言（如英文，日文，韩文），这样网页就不会出现乱码的情况。它属于国际通用编码方式。
4. 文档的主体
<body></body>包含文档要展示的所有内容，也称主体标签，网页中显示的文本、超链接、图像、表格和列表等信息都必须在<body>内，如图1.17中的内容，就是<body>内的信息，<body>中的内容是最终展示给用户的。
HTML语言是不区分大小写的，但建议文档声明采用大写方式，其他部分都采用小写方式。
1.3.3 运行第一个HTML程序
（1）新建一个空白HTML文档，点击“代码”按钮，默认为HTML基本结构。如图1.18所示。
图1.18 代码试图
（2）修改<title>和<body>中的内容，按下Ctrl + S快捷键，进行文件的保存，文件后缀名为.html格式。如图1.19所示。
图1.19 保存成.html文件
（3）点击“在浏览器中预览/调试”按钮，选择chrome.exe浏览器进行预览。或者通过双击.html文件进行预览。如图1.20所示。
图1.20 在Chrome浏览器中预览效果
到此本教材的第一个网页就运行成功了，可以试着改变<title>和<body>中的内容。然后重新保存页面并刷新浏览器进行预览。
1.3.4 HTML注释
在编写HTML代码时，经常要在一些关键代码旁做一下注释，这样做的好处很多，如：方便理解代码、方便查找相关代码或是方便项目组里的其他程序员来了解你所写的代码，还可以方便自己以后对代码的理解和修改。语法格式如下：
<!--注释的内容-->
“<!--”表示注释的开始，“-->”表示注释的结束。DW中自带添加注释功能，如图1.21所示，也可手动添加注释。
图1.21 HTML注释
1.3.5 HTML属性
使用HTML制作网页时，如果想让网页的内容更丰富，如设置显示文字的颜色为彩色，大小为30。此时如果仅仅使用HTML标签默认显示样式已经不能满足需求，就需要对HTML标签的属性加以设置，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，可以省略而采用默认值;其语法格式如下：
<标签名字 属性1 属性2 属性3 … >内容</标签名字>
在语法格式中，标签可以有多个属性，必须写在开始标签中，位于标签名之后。属性与标签之前需要一个空格隔开，多个属性之间也用空格隔开。
作为一般的原则，大多数属性值不用加双引号。但是包括空格、“％”，“＃”等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：
<font color="#ff00ff" face="宋体" size="30">字体设置</font>
注意：一定不要在“<”与标签名之间输入多余的空格，也不能在中文状态下输入这些标签及属性，否则浏览器不能正确的识别括号中的标志命令，从而无法正确的显示信息。后面还会学习到更多其他的HTML属性，这里读者只要记住HTML属性的基本格式就好。
1.4 本章小结
通过本章的学习，初步了解了Web前端技术和相关行业信息。学习到Web前端开发工具的使用，而且还运行了第一个HTML语言的网页程序。本章中需要理解什么是HTML语言，HTML语言的基本格式，HTML语言的属性设置等相关知识点。在下一章节中，将进一步来学习HTML这门语言。
1.5 习题
a) 填空题
(1) Web前端开发所包括的三大核心技术包含 、 、JavaScript语言。
(2) 超文本标记语言指的是 。
(3) HTML文档包括 和 两部分。
(4) HTML多个属性之间分隔用 。
(5) 用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。
b) 选择题
(1) 下列选项中，不属于网站开发四大职位的是（ ）。
A．web前端开发工程师 B．数据库开发工程师
C．测试开发工程师D．web后端开发工程师
(2) 下面哪个不属于HTML基本结构（ ）。
A．<meta>B．<head>
C．<body>D．<html>
(3) 下面哪个不属于五大浏览器（ ）。
A．Firefox浏览器B．Chrome浏览器
C．Safari浏览器D．360浏览器
(4) 下面哪个标签限定了文档的开始点和结束点（ ）。
A．<! DOCTYPE >B．<html>
C．<head>D．<body>
(5) 下面用来定义文档标题的标签是（ ）。
A．<style>B．<link>
C．<script>D．<title>
c) 思考题
(1) 请简述什么是超文本标记语言？
(2) 请简述HTML、CSS、JS三者的关系及职能划分？
观看视频+：782542147
内容来源书籍：《HTML5从入门到精通》，一本Web前端实用性综合技术图书。
简介：《HTML5从入门到精通》倡导“快乐学习，实战就业”的理念，作为初学者高品质的入门教材之一，免费提供一站式教学服务包，附赠配套PPT、教学视频、教学大纲、考试系统、测试题等资源。且书本内容覆盖全面、讲解详细，其中包括标签语义化、标签使用规范、选择器类型、盒模型、标签分类、样式重置、CSS优化、Photoshop切图处理、整页制作、CSS3新样式、HTML5新功能等。与此同时，本教材通过总结、归纳HTML、CSS、CSS3动画与3D及移动端布局与响应式开发等核心知识点，并从项目开发的实际需求入手，将理论知识与实际应用相结合，以此帮助初学者全面、系统、深入、透彻地理解HTML5的基础知识和技术，使他们快速地成长为初级程序员，并拥有一定的项目开发经验，从而在职场中拥有一个较高的起点。
TML 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据微学院</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析：
DOCTYPE------声明了文档的类型
<html>------ 标签是HTML页面的根元素，该标签的结束标签为 </html>
<head>------标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>------标签定义文档的标题
<body>------ 标签定义文档的主体，即网页可见的页面内容，该标签的结束标签为 </body>
<h1>------ 标签作为一个标题使用，该标签的结束标签为 </h1>
<p>------ 标签作为一个段落显示，该标签的结束标签为 </p>
<!DOCTYPE html>------ 在 HTML5 中也是描述了文档类型。
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释：
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
【小提示】tips:本文由数据微学院作者原创，转载请注明来源或联系作者。更多优秀参考好文请关注【数据微学院】个人图书馆。
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化
代码并保持良好兼容性
Web前端表现层及与前后端交互的架构设计和开发
配合后台开发人员实现产品界面和功能
利用各种Web技术模拟开发产品原型
Web新技术调研和资讯整理
精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技术，掌握面向对象编程思想
对常用的一些JS框架了解，如jQuery、YUI等。
掌握最基本的JavaScript计算方法编写。
对目前互联网流行的网页制作方法(Web2.0)HTML+CSS，以及各大浏览器兼容性有很大的了解。
对前沿技术(HTML5+CSS3)的基本掌握。
还要对IT其他编程语言有所了解如:PHP，Java，.net!有一些公司还要求懂一点SEO优化!
发展趋势
随着“互联网+”概念的普及，和移动互联网技术的成熟，越来越多的公司，需要更加智能、高效、合理、人性化的交互，对web前端的需求也会越来越大，同时由于web前端的技术框架种类繁多，更新也非常快，这样也需要大量的前端人员进行自己的技能提升。
值得注意的是，在招聘网站上发现，大部分公司所招的web前端开发的人才中，超过50%的岗位需要1-3年的工作经验。
许多企业的HR都认为“公司毕竟不是IBM，培养技术人才还是交给其他公司吧，我们就算建立移动中心，也会招有几年工作经验的。”
他们还强调，“我们宁可高薪招人，也不会想自己培养相关的技术人才。”
HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
简介：
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1 正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。
支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
特性：
语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性（Class: OFFLINE STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性（Class: Performance Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
发展趋势
HTML5规范开发完成时，将成为主流。
据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。
据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整 合HTML5技术。
12月，万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定，这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用 HTML5，并大力宣传它的的好处。此前，站长之家曾经做过一期调查，调查显示只有36.16%的站长正在学习中，另外的63.76%表示正在观望中。作为站长，你是否准备开始学习HTML5？
从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。第一，从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东 西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。
未来趋势
1、移动优先
从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。
2、游戏开发者领衔“主演”
许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。
原文来自微信公众号【小白涨知识】，希望大家多多支持。
*请认真填写需求信息，我们会在24小时内与您取得联系。
