HTML5新特性总结

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

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

二、HTML5 视频<video>

1、视频格式

　　Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

　　MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

　　WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

2、<video> 标签的属性

　　*标签<source>规定多媒体资源，可以是多个

3、实例

　　（1）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>视频</title>

 </head>

 <body>

     <video src="2. HTML5音频视频-编解码工具.mp4" controls="controls" width="500px" height="500px"></video>

 </body>

 </html>

　　效果：

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

　　　<小知识：在JS函数里输入console.log("hello");表示在浏览器控制台输出hello，若控制台可以输出hello，则表示函数是可以调用的。>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>视频</title>

 </head>

 <body>

     <video id="video" src="2. HTML5音频视频-编解码工具.mp4" width="300px" height="300px"></video>

     <button onclick="clickA()">播放/暂停</button>

     <button onclick="clickBig()">放大</button>

     <button onclick="clickSmall()">缩小</button>

     <script><!--若此JS部分写在<head></head>中，视频将播放错误-->

     var a = document.getElementById("video");

     function clickA() {

         if(a.paused) a.play();

         else a.pause();

     }

     function clickBig() {

         a.width = 400;

         a.height = 400;

     }

     function clickSmall() {

         a.width = 150;    <!--此处不能写150px，否则会出错,可以写成a.width = 400+"px";-->

         a.height = 150;

     }

 </script>

 </body>

 </html>

　　效果：

　　　　点击放大、缩小视频会有相应的改变。

三、音频<audio>

1、音频格式

2、<audio>标签属性

　　control 属性供添加播放、暂停和音量控件。<audio> 与 </audio> 之间插入的内容是供不支持 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）把鼠标悬停在矩形上可以看到坐标

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>画布</title>

 <script type="text/javascript">

         function cnvs_getCoordinates(e)

         {

         x=e.clientX;  <!--clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标-->

         y=e.clientY;

         document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";

         }

         function cnvs_clearCoordinates()

         {

         document.getElementById("xycoordinates").innerHTML="";

         }

 </script>

 </head>

 <body style="margin:0px;">

     <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

     <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"

     onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>

     <br />

     <br />

     <br />

     <div id="xycoordinates"></div>

 </body>

 </html>

　　知识点：

　　*clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

　　*innerText和innerHTML都可以给标签体里添加相应信息。

　　效果：

（2）绘制线条

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>画布</title>

 </head>

 <body>

     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

     Your browser does not support the canvas element.

     </canvas>

     <script type="text/javascript">

         var c=document.getElementById("myCanvas");

         var cxt=c.getContext("2d");

         cxt.moveTo(10,10);

         cxt.lineTo(150,50);

         cxt.lineTo(10,50);

         cxt.stroke();

     </script>

 </body>

 </html>

　　知识点：

　　*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(）：关闭一条路径。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>画布</title>

 </head>

 <body>

     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>  <!--不能放在JS代码之后，否则效果出不来-->

     <script type="text/javascript">

         var c=document.getElementById("myCanvas");

         var cxt=c.getContext("2d");

         cxt.fillStyle="#FF0000";

         cxt.beginPath();

         cxt.arc(70,18,15,0,Math.PI*2,true);

         cxt.closePath();

         cxt.fill();

     </script>

 </body>

 </html>

　　效果：

（4）颜色渐变

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>画布</title>

 </head>

 <body>

     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>

     <script type="text/javascript">

         var c=document.getElementById("myCanvas");

         var cxt=c.getContext("2d");

         var grd=cxt.createLinearGradient(0,0,175,50);

         grd.addColorStop(0,"#FF0000");

         grd.addColorStop(1,"#00FF00");

         cxt.fillStyle=grd;

         cxt.fillRect(0,0,175,50);

     </script>

 </body>

 </html>

　　效果：

（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);

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>画布</title>

 </head>

 <body>

     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>

     <script type="text/javascript">

         var c=document.getElementById("myCanvas");

         var cxt=c.getContext("2d");

         var img=new Image();

         img.src="11.png";

         cxt.drawImage(img,0,0);

     </script>

 </body>

 </html>

HTML5新特性总结的更多相关文章

html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录对于初接触的人来说是一个导向对于已经接触过的人来说是一个检测你掌握程度的检 ...
转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
web全栈架构师[笔记] — 03 html5新特性
HTML5新特性一.geolocation PC端精度比较低通过IP库定位移动端通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
HTML5新特性：范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单表单2. ...
html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
HTML5新特性之文件和二进制数据的操作 Blob对象
HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象
第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量变量命名.作为函数的参数的时候要详细.调用的时候可以简单点做全局变量的两个方案 1.绑在标签上data 2.闭包视频一般都是二进 ...

随机推荐

面试题中遇到的SQL题目
1.假设有一张表示cj表 Name Subject Result 张三语文 80 张三数学 90 张三物理 85 李四语文 85 李四数学 92 李四物理 82 要求查询结果: 姓名语文 ...
使用STL库sort函数对vector进行排序
使用STL库sort函数对vector进行排序,vector的内容为对象的指针,而不是对象. 代码如下 #include <stdio.h> #include <vector> ...
Struts2 从一个Action跳至另一个Action
Struts2 从一个Action跳至另一个Action 一.注解的 @Result(name=SUCCESS,type="chain", params={"actio ...
hdu 3415
单调队列即保持队列中的元素单调递增(或递减)的这样一个队列,可以从两头删除,只能从队尾插入.单调队列的具体作用在于,由于保持队列中的元素满足单调性,对于上述问题中的每个j,可以用O(1)的时间找到对应 ...
html5文章 -- 应用HTML5 开发手机APP
因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App.但只有Android2.2以上.iOS3.2以上均支持HTML5,两大平台有 ...
IM客户端Socks 5代理协议应用
之前编写的一个基于openfire服务器的即时通讯软件,因为部署环境需要,需要增加代理登录通信的实现.整理了一下相关代理的知识分享一下. 一个基于TCP协议的客户端希望与一个只能通过特定网络节点才可以 ...
PHP Static Self 的区别
<?php class Human{ public static function whoami() { echo "来自父类的whoami"; } public stati ...
NetBeans 8.0 连接远程服务器
step: ① 新建项目 -- PHP -- 来自远程服务器的 PHP 应用程序 -- 下一步 ② 名称和位置项目名称:自己取: 源文件夹:通过 “浏览” 选择本地项目文件夹.注意文件夹内不能有 n ...
Web 在线文件管理器学习笔记与总结（5）修改文件内容
① 读出要修改的文件的内容 ② 进行修改 ③ 将修改后的内容写进文件 index.php: <?php require 'dir.func.php'; require 'file.func.ph ...
省略nslog打印
//#if #endif宏定义的意思就是如果定义了DEBUG,那么就使用NSLog输出:否则这段代码直接忽略.有人会疑问这个DEBUG和_DEBUG来自哪里,这个其实不用担心,这个来自于Xcode的默 ...

HTML5新特性总结

HTML5新特性总结的更多相关文章

随机推荐

热门专题