HTML5有哪些新特征_html5教程技巧

~
一、HTML5 中的一些有趣的新特性：

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



Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件2、 标签的属性



*标签规定多媒体资源，可以是多个3、实例（1）
代码如下: 视频

效果：



（2）HTML5- 使用 DOM 进行控制（用JS来控制视频的播放/暂停以及放大、缩小）

var a = document.getElementById("video"); function clickA() { if(a.paused) a.play(); else a.pause(); } function clickBig() { a.width = ; a.height = ; } function clickSmall() { a.width = ;a.height = ; }

效果：



点击放大、缩小视频会有相应的改变。三、音频1、音频格式



2、标签属性



control 属性供添加播放、暂停和音量控件。 与 之间插入的内容是供不支持 audio 元素的浏览器显示的。（视频中也是一样）四、HTML 5 Canvas（画布）1、什么是Canvas?canvas 元素用于在网页上绘制图形。*HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。*画布是一个矩形区域，您可以控制其每一像素。*canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。2、相关的JS知识：（1）getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。（2）fillStyle 方法将其染色，fillRect 方法规定了形状、位置和尺寸。【fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)】3、实例（1）把鼠标悬停在矩形上可以看到坐标
代码如下:画布function cnvs_getCoordinates(e) { x=e.clientX;y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } 把鼠标悬停在下面的矩形上可以看到坐标：
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">

知识点：*clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。*innerText和innerHTML都可以给标签体里添加相应信息。效果：



（2）绘制线条
代码如下:画布 Your browser does not support the canvas element.var c=document.getElementById("myCanvas"); var cxt=c.getContext("d"); cxt.moveTo(,); cxt.lineTo(,); cxt.lineTo(,); cxt.stroke();

知识点：*moveto是移动到某个坐标，lineto是从当前坐标连线到某个坐标。这两个函数加起来就是画一条直线。画线要用“笔”，那么MoveToEx()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。每次与前面一个坐标相连。*stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。效果：



（3）绘制圆形*fill() 方法填充当前的图像（路径）。默认颜色是黑色。*arc() 方法创建弧/曲线（用于创建圆或部分圆）：context.arc(x,y,r,sAngle,eAngle,counterclockwise);



中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)起始角：arc(100,75,50,0,1.5*Math.PI)结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)



* Cxt. beginPath() ：开启路径，开启后可以从新设置相关属性 。 Cxt.closePath(）：关闭一条路径。
代码如下:画布var c=document.getElementById("myCanvas"); var cxt=c.getContext("d"); cxt.fillStyle="#FF"; cxt.beginPath(); cxt.arc(,,,,Math.PI*,true); cxt.closePath(); cxt.fill();

效果：



（4）颜色渐变*createLinearGradient() 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。JS语法：context.createLinearGradient(x0,y0,x1,y1)：



*addColorStop() 方法规定 gradient 对象中的颜色和位置。JS语法：gradient.addColorStop(stop,color);




代码如下:画布var c=document.getElementById("myCanvas"); var cxt=c.getContext("d"); var grd=cxt.createLinearGradient(,,,); grd.addColorStop(,"#FF"); grd.addColorStop(,"#FF"); cxt.fillStyle=grd; cxt.fillRect(,,,);

效果：



（5）把一幅图像放置到画布上*drawImage() 方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。*JS语法1：在画布上定位图像：context.drawImage(img,x,y);*JS语法2：在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);*JS语法3：剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);




代码如下:画布var c=document.getElementById("myCanvas"); var cxt=c.getContext("d"); var img=new Image(); img.src=".png"; cxt.drawImage(img,,);

---

武邑县17879708039： HTML5新增加的功能有什么?HTML5新增加的功能有什么? ？
盈申健儿： 主要是增加了关于图像,位置,存储,多任务等功能,绘画CANVAS;用于播放媒体的video和audio元素,一步步的完善,要学好,还要与时俱进,在粤嵌的程序里都有,大家好好学吧 ...

武邑县17879708039： HTML5 中的一些新特性: - ？
盈申健儿： HTML5 中的一些有趣的新特性:用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search

武邑县17879708039： HTML5都有哪些新特性? - ？
盈申健儿： accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). contenteditable 规定元素内容是否可编辑. contextmenu 规定元素的上下文菜单.上下文菜单在用户点击元素时显示. data-* 用于存储页面或应用程...

武邑县17879708039： HTML5的特点都有哪些? - ？
盈申健儿： 湖北蓝洋科技来告诉你HTML5的特点 摆脱对平台的依赖 HTML5可以让你摆脱对平台的依赖,用户打开浏览器,直接就可以访问你的应用,而不需要经过各种Store的审核.实时更新 实时更新,通常平台的审核都需要七个工作日左右的时间,如...

武邑县17879708039： html5网站的特点都有哪些?html5网站的特点都有哪些? - ？
盈申健儿： HTML5拥有更有效的服务器推送技术,ServerSentEvent和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

武邑县17879708039： HTML5最大的特点是什么? - ？
盈申健儿： h5就是html的升级版本,就像手机更智能一样,同样地功能代码少了,更方便了,你问最大的特点那他也就是支持更多插件,功能越来越丰富了

武邑县17879708039： html5有哪些新特性,移除了那些元素 - ？
盈申健儿： HTML5已形成了最终的标准,概括来讲,它主要是关于图像,位置,存储,多任务等功能的增加. 新增的元素有绘画 canvas ,用于媒介回放的 video 和 audio 元素,本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,而...

武邑县17879708039： html5中新增特性和api有哪些 - ？
盈申健儿： 多媒体:video、audio、 游戏:canvas、webgl、 存储:localstorage、sessonstorage、websql、indexedDB 网络:websocket 还有一些,但由于HTML5还没有定稿,其他大多是几个浏览器引擎自己加了私有扩展的实现.你可以下载个HBuilder,里面的每个语法提示都会声明这个语法是HTML4还是5,以及哪些浏览器实现了,哪些没有实现.

武邑县17879708039： 什么是HTML5?HTML5更新了什么标签 ？
盈申健儿： HTML 5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能. HTML5提供了一些新的元素和属性,例如(网站导航块)和.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记.

武邑县17879708039： html5 css3有哪些新特效 - ？
盈申健儿： html5:用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search css3:1. CSS3...