整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
很多人想学html5，但又不了解，最重要的是不知道学完之后能做什么。下面千锋就与大家分享html5的就业方向与就业前景。
html5的优势在哪里？
HTML5可以提供：
1、提高可用性和改进用户的友好体验;
2、有几个新的标签，这将有助开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候，对于SEO很友好;
6、将被大量应用于移动应用程序和游戏。
学完html5可以找什么工作？
根据智联招聘的相关专家介绍，html5开发工程师工作1—2年之后会成为web前端高级软件工程师，年薪可以达到15万以上，工作3—5年之后可以成为了web前端技术主管或者是经理，年薪在15—50万之间，工作5年以上，年薪可想而知，当然职位上也会有所提升，会成为互联网公司的技术总监或者是产品经理，那学习html5开发究竟可以选择从事哪些工作呢?
学习完html5开发，你可以从事的职位有很多，例如：web前端开发工程师、html5开发工程师、web APP开发工程师、Java开发工程师等工作。
html5现在很火，就当前市场用人制度来看，我国对于高级html5开发人员的缺口有将近12万左右，尤其是北、上、广、深等一线城市中html5开发人员的薪资待遇将会更高，html5的就业选择相对来讲还是比较多的，就业压力低、行业限制少、可以选择很多热门的行业，如互联网、电子商务和教育等等专业，对自己来讲更是有机会进入到大型的网络公司，所以就业领域相对来讲还是比较多的。
TML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah
本文导航
-新标签和元素 …… 08%
-HTML5 的高级功能 …… 16%
-地理位置 …… 16%
-网络存储 …… 33%
-应用缓存（AppCache） …… 44%
-视频 …… 50%
-音频 …… 61%
-画布（Canvas） …… 71%
-HTML5 工具 …… 78%
编译自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
译者： geekpi
HTML5 是第五个且是当前的 HTML 版本，它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。
HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML，它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能，使 Web 更加动态和交互。
HTML5 的新功能是：
新标签，如 <header> 和 <section>
用于 2D 绘图的 <canvas> 元素
本地存储
新的表单控件，如日历、日期和时间
新媒体功能
地理位置
HTML5 还不是正式标准（LCTT 译注：HTML5 已于 2014 年成为“推荐标准”），因此，并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。
语义化元素： 图 1 展示了一些有用的语义化元素。
表单元素： HTML5 中的表单元素如图 2 所示。
图形元素： HTML5 中的图形元素如图 3 所示。
媒体元素： HTML5 中的新媒体元素如图 4 所示。
图 1：语义化元素
图 2：表单元素
图 3：图形元素
图 4：媒体元素
地理位置这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通网站
出租车及其他运输网站
电子商务网站计算运费
旅行社网站
房地产网站
在附近播放的电影的电影院网站
在线游戏
网站首页提供本地标题和天气
工作职位可以自动计算通勤时间
工作原理： 地理位置通过扫描位置信息的常见源进行工作，其中包括以下：
全球定位系统（GPS）是最准确的
网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址
GSM/CDMA 蜂窝 ID
用户输入
该 API 提供了非常方便的函数来检测浏览器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。
语法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定义了检索位置信息的回调方法。
ErrorHandler（可选）：定义了在处理异步调用时发生错误时调用的回调方法。
options （可选）： 定义了一组用于检索位置信息的选项。
我们可以通过两种方式向用户提供位置信息：测地和民用。
描述位置的测地方式直接指向纬度和经度。
位置信息的民用表示法是人类可读的且容易理解。
如下表 1 所示，每个属性/参数都具有测地和民用表示。
图 5 包含了一个位置对象返回的属性集。
图5：位置对象属性
网络存储在 HTML 中，为了在本机存储用户数据，我们需要使用 JavaScript cookie。为了避免这种情况，HTML5 已经引入了 Web 存储，网站利用它在本机上存储用户数据。
与 Cookie 相比，Web 存储的优点是：
更安全
更快
存储更多的数据
存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。
有两种类型的 Web 存储对象：
本地 - 存储没有到期日期的数据。
会话 - 仅存储一个会话的数据。
如何工作： localStorage 和 sessionStorage 对象创建一个 key=value 对。比如： key="Name"， value="Palak"。
这些存储为字符串，但如果需要，可以使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换。
下面给出了使用 Web 存储对象的语法：
存储一个值：
localStorage.setItem("key1", "value1");
localStorage["key1"]="value1";
得到一个值：
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
删除一个值： -removeItem("key1");
删除所有值：
localStorage.clear();
应用缓存（AppCache）使用 HTML5 AppCache，我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外，所有浏览器都可以使用 AppCache（截止至此时）。
应用缓存的优点是：
网页浏览可以脱机
页面加载速度更快
服务器负载更小
cache manifest 是一个简单的文本文件，其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中，如下所示：
<html manifest="test.appcache">...
</html>
它应该在你要缓存的所有页面上。
缓存的应用程序页面将一直保留，除非：
用户清除它们
manifest 被修改
缓存更新
视频在 HTML5 发布之前，没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。
目前，video 元素支持三种视频格式，如表 2 所示。
下面的例子展示了 video 元素的使用：
<! DOCTYPE HTML><html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>
例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作，我们必须添加一个 MPEG4 和 WebM 文件。
video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式，如下所示：
<video width="320" height="240" controls="controls"><source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>
图6：Canvas 的输出
音频对于音频，情况类似于视频。在 HTML5 发布之前，在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。
目前，HTML5 audio 元素支持三种音频格式，如表 3 所示。
audio 元素的使用如下所示：
<! DOCTYPE HTML><html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>
此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作，我们必须添加一个 MP3 和 Wav 文件。
audio 元素允许多个 source 元素，它可以链接到不同的音频文件。浏览器将使用第一个识别的格式，如下所示：
<audio controls="controls"><source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>
画布（Canvas）要在网页上创建图形，HTML5 使用 画布 API。我们可以用它绘制任何东西，并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布，我们可以绘制形状和线条、弧线和文本、渐变和图案。此外，画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle="red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>
以上脚本的输出如图 6 所示。
你可以绘制许多对象，如弧、圆、线/垂直梯度等。
为了有效操作，所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具，当需要设置工作流/网站或执行重复任务时，这些工具非常有帮助。它们提高了网页设计的可用性。
以下是一些帮助创建很棒的网站的必要工具。
HTML5 Maker： 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。
Liveweave： 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用，并为一些代码提供自动完成功能，这使得开发和测试更快更容易。
Font dragr： 在浏览器中预览定制的 Web 字体。它会直接载入该字体，以便你可以知道看起来是否正确。也提供了拖放界面，允许你拖动字形、Web 开放字体和矢量图形来马上测试。
HTML5 Please： 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能，你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表，语法，以及如何使用元素的一般建议等。
Modernizr： 这是一个开源工具，用于给访问者浏览器提供最佳体验。使用此工具，你可以检测访问者的浏览器是否支持 HTML5 功能，并加载相应的脚本。
Adobe Edge Animate： 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画，可以跨多个设备运行。
Video.js： 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站，你应该使用此工具。它使视频看起来不错，并且是网站的一部分。
The W3 Validator： W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性，你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后，你的代码将被检查，并将提供所有错误和警告。
HTML5 Reset： 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。
Palak Shah
作者是高级软件工程师。她喜欢探索新技术，学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 译者：geekpi 校对：wxy
本文由 LCTT 原创编译，Linux中国 荣誉推出
戏葡萄原创专稿，未经允许请勿转载
HTML5游戏有哪些做法？在很多人眼里，H5游戏对于他们可能还只是像《围住神经猫》那样简单的样子——产品形态简单、推广方式简单、盈利模式也很简单。
在白鹭时代（Egret）今天主办的HTML5游戏大会上，来自全国各地大大小小的厂商，给出了不同的答案。
关于推广方式（入口），现在有了QQ浏览器、QQ空间、360手机助手、百度贴吧、猎豹浏览器等；关于盈利模式，也有广告变现、游戏内购等；我们会在其他文章中盘点各路观点。
这里先介绍现在HTML5游戏研发上的一些“进化形态”。
《开心豆豆》于5月上线，墨麟旗下鱼之乐研发，已在腾讯玩吧平台上面运营了半年。基本上两周一个迭代。
《开心豆豆》针对12-65岁的女性用户，风格是日系Q版，核心玩法有三个：消除、闯关、手势效果，后者是玩法上的一个小小的创新。这个游戏看上去很像传统的三消类游戏，例如《糖果粉碎传奇》、《开心消消乐》，但实际上它是一款连线消除游戏。闯关模式有主线过关、大关套小关、三星完美闯关等设定。手势效果是新版本的设定，在同样的消除不同的连线方式可以产生不同的特效恶搞。此外游戏还设置了一些障碍物，比如巧克力奶油冰块等等。
该游戏在社交环节中也做了一些尝试。首先是好友邀请，好友之间可以互相赠送体力和道具。到5月23日为止有近400万的玩家，其中80%的活跃用户是女性玩家。未来还会加入主角系统，以美食为主题。主角可以在闯关的过程中收集食材，然后在甜品屋里制做甜品，再参加美食竞技。
墨麟鱼之乐今天展示的第二款游戏，之前的形态叫做《Q将水浒》，最早出现在QQ浏览器的游戏平台上。当时这款游戏是一款策略养成类游戏，混杂了社交、建设等元素。现在的《口袋江湖》是在《Q将水浒》基础上，把策划的数值和体系移植过来，把IP从水浒改为武侠题材，再强化了休闲策略的设定而成的。游戏里面是标准的武侠设定，玩家可以建设门派、招募弟子，称霸武林等。
游戏的界面不像传统卡牌，而是有着自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升级。游戏的战斗是回合制的，双方各出5个人，进行复杂的战斗，而不是撞卡式的。所有的英雄有自己的行军速度、攻击范围、攻击招数等。游戏还设定了资源战、擂台赛等体系，玩家之间还可以互相占领主城，而不是像《刀塔传奇》、《我叫MT》等类似于单机的设定。这样就突出了玩家之间互动，仇人和仇人之间有互动，邻居和邻居之间有互动。
《少女战机》是一款纯HTML5游戏。人设方面，游戏以机娘为中心，将少女的萌和机甲的燃相结合，让众多的宅男得以找到自己喜欢的那一款机娘。战斗模式方面，游戏保留的经典的关卡模式，通过设置出一些无尽关卡，让老玩家们得以延续他们的挑战。游戏也打造了一个斩首模式，在里面，玩家需要通过自己对关卡的了解，运用智慧挑战实力悬殊的BOSS。当玩家获得一定的成长之后，会需要更多的挑战来证明自己的实力，逃生模式就是为此而设计的。在逃生模式中，玩家将要在如潮的弹幕中生存下来。
指上缤纷研发一款三国题材的卡牌游戏。将策略游戏的玩法规则和Q版画风的幽默诙谐深度融合。
中娱在线研发，一款横版动作卡牌角色扮演类游戏。“我们精心设计了近百种不同的武器和技能，让玩家在游戏里面能非常自由的收集技能，体验组合搭建技能的乐趣。然后再围绕着这个核心创新点，我们采用情感体验式的设计理念，精心开创了一个相关的成长体系以及相关的一个玩法。然后再配上我们由顶级美术打造的一个一流的远古游戏世界，能让玩家从视角到其他游戏体验都能获得一流的游戏享受。最后我再确定以及肯定的告诉大家，这就是H5游戏。”
未来人科技研发，横版回合制战斗，九宫格策略布阵的游戏。“其实玩法上说白了没有什么太大的创新，但是我们在美术风格上确实做了很用心的一些设定。”“我们的核心的玩法，简单来说就是让玩家去积累一定的游戏内资源，然后去获取，去购买更多的武将，然后更高星别的武将。核心玩法的策略性上主要体现在九宫格布阵。”“训练场稍微给玩家开放了一点点类似于挂机类的玩法。你可以不用在线，你把它挂在上面，它就会慢慢的升级。然后这是每天会开的一个Boss战。”
梦启科技的一款放置类RPG游戏，也就是挂机游戏。核心玩法上，游戏有仇杀这种创新，也引进来类似传奇的红名机制，用这种新的交互方式来增加活跃。在挂机的过程中，玩家还可以通过PK来爆掉其他玩家的装备，游戏也会在之后增加爆装的机会和条件。爆掉别人的装备之后也会产生红名，上恶人排行榜，吸引别人PK。第二个系统是美人。不同的美人有不同的属性，有的美人适合打装备，有的美人适合PK，有的美人适合大BOSS。多个美人可以组成美人阵法，对玩家属性是一个很大的提升。最后一个核心是跨服。现有的挂机类游戏可以看到，出现了页游之前的快速开服、快速洗服的现象。这样会造成当服的用户活跃度不高，跨服就用来缓解这种问题。
山水地科技的一款重度策略类游戏，采用F2P加道具收费的模式。开发周期前后陆续加起来将近一年。这款游戏13年初已经初见成品，但当时的硬件无法支撑，因此项目停滞了一段时间。到了今年年中，游戏重新进行了一些开发，并且已经在手Q空间上线。
游戏的核心玩法与其他策略游戏类似，但也有航海题材的一些特色，包括航海、冒险、贸易、国战、占领城市等等。首先，游戏拥有一张非常巨大的地图，玩家可以在拥有180座城市的世界地图里航行，在航行的过程中还会遇到风暴等各种随机探险事件。游戏界面左下角的舵用来控制航行方向，玩家靠扔骰子的结果确定在海上航行的天数。
其次，游戏针对不同的地区设计了不同的建筑风格，如果玩家在加勒比诞生，那么建筑风格就为海盗风，此外还有英格兰、奥斯曼、华夏等风格。并且这些建筑风格还会发生变化，玩家的游戏行为会影响城市的发展度，发达的地区建筑风格也会相应的更加华丽。
再次，航海题材离不开航海贸易，每个城市都拥有自己的特色商品，这与另外两个系统相配合。第一，每个城市的商品除了可以低买高卖用来盈利以外，这些商品本身可以作为材料制造装备和恢复体力的食物。而这个制造系统又与游戏中重要的国战系统相联系，游戏中一共有四个国家，四个国家之间会因为争夺资源而产生冲突，如果城市被敌对国占领，玩家就无法购买这座城市的特色材料。
游戏的PVE基础系统为探险模式，呈现为第一人称视角的推图模式。探险过程中玩家会遇到包括战斗、好友互动、获得宝箱物品等多种事件。玩家可以在每个城市中参与到主线任务、日常任务和不同的随机委托等多种形式的任务。
PVP方面游戏提供多种战斗模式：海上劫掠遭遇战、城市切磋战、城市占领、竞技场天梯战与阵型战斗策越。
游戏中最重要的就是异步实时多人国战，每个国家的玩家不管等级高低可以随时航行到正在发生国战的城市进行战斗，每个人都可以做出自己的贡献。国战又与游戏中的选举与官职系统相结合，尤其是当玩家被选举为国王时，他会产生强烈的社交付费需求。
游戏中还包括卡牌抽取，并且进行了一定的创新。卡牌抽取分为很多类，通过人民币、红水晶、黄水晶等不同材料抽取，获得的英雄具有不同的功能，红水晶抽取的英雄善于PVE，黄水晶抽取的英雄善于贸易，每一种水晶都与玩家的游戏行为相结合，战斗时获得黄水晶，贸易获得红水晶等等。此外，每张卡牌都有自己的技能系统，并且可以互相继承，解决了传统卡牌游戏的缺陷。
山水地科技一款休闲社交游戏，包含宠物养成、牧场捕捉、战斗策略、配对交互四大系统，女性用户占60%以上。
游戏有以下核心玩法：一、配对，玩家可以为自己的小鸟向朋友的小鸟提亲、接受提亲、共同孵化新的小鸟。二、训练，玩家可以对小鸟进行训练和留学。三、入侵，玩家可以入侵猎场或帮助好友反抗。
游戏拥有很强的社交性，具有公会和结婚的功能，有利于增加收入和提高用户留存率。
游戏的盈利模式为通过群体PVP副本、群体PVE副本以及个人天梯赛等模式刺激玩家不断提升小鸟的战斗力。
有爱互动的一款放置类RPG网游，是由文字MUD游戏演化而成，具有实时RPG离线系统与离线挂机训练系统。游戏玩法包括竞技PVP、商城道具、装备强化、多人团战以及工会等，游戏中打怪、经验升级、获得金币、掉落装备都是自动的，游戏行为会在玩家离线后继续进行。
*请认真填写需求信息，我们会在24小时内与您取得联系。
