HTML5的介绍

、什么是 HTML5？

HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

二、HTML5的一些新特性

用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暂停和音量控件来控制视频；
<video> 元素也提供了 width 和 height 属性控制视频的尺寸；
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；

video 元素的三种视频格式：

Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；

video 元素的属性：

src：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

video 元素的方法：

pause()：暂停当前播放的视频；
play()：开始播放视频；
load()：重新加载视频元素；
canPlayType()：检测浏览器是否能播放指定的视频类型；
addTextTrack()：向音频/视频添加新的文本轨道；

四、audio元素

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
<audio>元素能够播放声音文件或者音频流；

audio元素的三种音频格式：

MP3：适用于Internet Explorer、Chrome、Safari 等浏览器；
Wav：适用于Firefox、Opera等浏览器；
Ogg：适用于Firefox、IE9、Chrome 浏览器；

audio元素的属性：

src：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

audio元素的方法：

pause()：暂停当前播放的音频；
play()：开始播放音频；
load()：重新加载音频；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
创建一个画布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新属性有：

height：设置 canvas 的高度；
width：设置 canvas 的宽度；

六、绘制三角形

getElementById()：可返回对拥有指定 ID 的第一个对象的引用；

getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；

beginPath()：开始一条路径，或重置当前的路径；

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；

closePath()：创建从当前点到开始点的路径；

strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；

fill()：填充当前的图像（路径），默认颜色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示图

图1

七、使用Canvas绘制一个空心圆

arc()：创建弧或曲线（用于创建圆或部分圆）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //创建context对象
 ctx.beginPath();//标志开始一个路径
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
 ctx.stroke()
 </script>

演示图

图2

八、绘制一个实心圆

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示图

图3

九、绘制一个空心矩形

strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //获得画板数据
 var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.strokeRect(100,100,100,100); //线条画矩形
 </script>

演示图

图4

十、绘制一个实心的矩形

fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//线条画矩形
 </script>

演示图

图5

1.什么是HTML5开发工程师?

HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面，优化交互体验的一个职位。

2.HTML5开发工程师需要掌握哪些职业技能?

市场非常需要精通HTML、CSS、JavaScript、JQuery、Ajax等这些核心技术，具备互联网交互设计能力，熟悉后端服务器运行环境和数据通讯协议，掌握响应式布局框架，Bootstrap、Angular等框架的HTML5开发工程师。

3.HTML5开发工程师未来的就业前景好吗?

随着HTML5行业发展，国外HTML5开发和后端开发人员比例为1:1。国内目前依旧在1:3以下，HTML5开发职位目前的人才缺口达到近50万人。

4.HTML5工程师需要学习的内容，主要有哪些?

第一阶段HTML页面结构和CSS3属性

HTML语句，HTML页面结构、css语法、style属性、link和style标签、id属性、等HTML语句中的相关属性。浏览器兼容性问题处理:XHTML与CSS校验，XHTML校验器，CSS校验器。解决如：Chrome、Safari、firefox、opera 等主流浏览器的兼容问题。学习CSS3属性，结合HTML制作静态页面效果。

第二阶段 Javascript特效语句

JavaScript基础语法、数组Object、Function、String 和正则表达式、常用内置对象、JSON、错误处理、面向对象高级编程。JavaScrip的引入及插入位置、JS元素的获取及简单的函数引用、JS的页面输出及注释语句、变量及JS的数据类型、表单的简单应用及JS的操作符等。

第三阶段 jQuery与JavaScript实战课程案例

Jquery入门和实战jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

第四阶段微信小程序等混合应用开发

包括初识微信公众号，订阅号的基本功能，使用百度BAE实现代码的快速上线，使用Git完成线上代码部署，公众号开发权限及功能接入，微信JSSDK接口API，微信场景项目开发与接入等等。

好程序员HTML5大前端学科提供最新的前端IT技术，欢迎各位同事在线咨询，试听考察，从平凡到卓越，为梦想而拼搏！成就非凡人生，欢迎来到好程序员！

广网12月11日消息（记者贾斯曼）2016年HTML5产业发展进行地如火如荼。国内浏览器升级内核支持H5标准，谷歌将HTML5作为Chrome浏览器默认选项，巨头们频繁示好的动作，让HTML5春天的降临不再是一个问号。

白鹭时代创始人兼CEO陈书艺表示，2016年H5行业趋势可以概括为两大关键词：商业化、跨界。商业化方面，游戏领域已出现月流水超3000万的H5游戏，H5移动广告、移动应用则撬动了千万级企业市场;跨界方面，H5正突破游戏的边界，驱动营销、应用、动漫、教育等行业的发展与革新。

回顾HTML5游戏的发展历程，无论是从渠道、CP，用户规模、游戏产品数量，还是品类与品质、技术以及商业模式等各个层面，HTML5游戏行业正在向更深层次进化。“渠道分布多元化和研发技术实现不断突破，为整个行业的快速向前奠定了基础。自2014年来，以白鹭时代为代表的技术服务企业，解决了HTML5游戏性能、兼容和运行环境的难题，并且突破了WebGL支持等研发技术瓶颈，同时实现了HTML5游戏支付功能并提升了商业化能力。”陈书艺说。

从数据上看，截止到今年Q3，HTML5游戏已达到5787款，呈现明显的逐年增多趋势。在品类上，也从诸如《围住神经猫》、《愚公移山》等为代表的休闲益智、玩法品类单一的阶段，进入到了以《传奇世界》等为代表的重度化、精品化产品阶段。与此同时，进入HTML5游戏领域的CP已超1500家，迅速增长的背后不免出现同质化、短期变现、量多质少和雅达利危机等现象。

在产业链领域不断进化的环境下，HTML5游戏在商业模式、用户规模以及市场规模方面，得到了快速发展和进步。目前，HTML5游戏的用户规模，以及占据整个移动游戏用户47%的比例，接近一半。而在商业模式方面，道具付费超越广告付费成为主流，占比达到了68%，从整体上看，HTML5游戏已经与原生游戏一样，具备了独立的商业化盈利能力。而步入拐点阶段的2016年，HTML5游戏的市场规模也将超11亿元，其市场快速增长仍旧是主旋律。

陈书艺指出，HTML5的能力不止于游戏行业。随着互联网巨头纷纷拥抱HTML5，HTML5正在以应用、小程序、AR/VR、游戏、动漫、营销等内容形态，开启移动互联网无界时代。白鹭时代推出了Egret Wing3和青雀移动，以帮助广大中小开发者抓住微信小程序带来的机会。

最后，陈书艺预测了HTML5游戏市场的未来发展，他表示，当HTML5游戏的商业化能力得到充分释放之后，2017年HTML5游戏的市场规模，必然会突破30亿大关，甚至达到50亿规模。

在线咨询

上一篇：HTML基础知识（一）入门知识
下一篇：Web前端培训：10个轻量级CSS框架