html5具有很多特性,分别是,前端html5新特性
一、HTML5中一些有趣的新特性：
绘画用画布元素
用于媒体播放的视频和音频元素
更好地支持本地离线存储
新的特殊内容元素，如文章、页脚、页眉、导航、部分
新的表单控件，如日历、日期、时间、电子邮件、url和搜索
二。HTML5视频视频1、视频格式
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=采用H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件2、video 标签的属性
*标签源指定多媒体资源，可以是3、实例的倍数。
(1)复制代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML。 transitional//EN http://www . w . org/TR/XHTML/DTD/XHTML-transitional . DTD
html xmlns= http://www . w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
视频/标题
/头
身体
视频=。html音频视频-编解码器工具。MP controls= controls width= px height= px /video
/body
/html
效果：
(2)HTML5视频-使用DOM进行控制(使用JS控制视频的播放/暂停、放大和缩小)
知识：在JS函数中输入console . log( hello )；意味着浏览器控制台输出hello。如果控制台可以输出hello，说明可以调用该函数。复制代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML。 transitional//EN http://www . w . org/TR/XHTML/DTD/XHTML-transitional . DTD
html xmlns= http://www . w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
视频/标题
/头
身体
Video id= video src=。html音频视频编解码器工具. mp width= px height= px/video
按钮onclick=clickA()播放/暂停/按钮
按钮onclick=clickBig()放大/按钮
按钮onclick=clickSmall()缩小/按钮
剧本！-如果这个JS部分是用head/head写的，视频会播放不正确-
var a=document . getelementbyid( video )；
函数clickA() {
if(a .暂停)a . play()；
else a . pause()；
}
函数clickBig() {
a . width=；
a . height=；
}
功能点击小(){
a . width=；-这里不能写px，否则会出错。可以写成a.width= px-
a . height=；
}
/脚本
/body
/html
效果：
点击放大和缩小，视频会相应变化。
三。音频音频1、音频格式
2、audio标签属性
控件属性用于添加播放、暂停和音量控件。在audio和/audio之间插入的内容由不支持音频元素的浏览器显示。(视频中也是如此)
四。HTML 5画布(画布)1、什么是Canvas?
Canvas元素用于在网页上绘制图形。
*HTML5的canvas元素使用JavaScript在网页上绘制图像。画布元素本身没有绘制能力。所有的绘图工作都必须在JavaScript中完成。
* Canvas是一个矩形区域，你可以控制它的每一个像素。
*canvas有多种方式来绘制路径、矩形、圆形、字符和添加图像。00-2、相关的JS知识：(1)get context( 2d( 2D )对象是一个内置的HTML5对象，它有很多方法可以绘制路径、矩形、圆形、字符和添加图像。
(2)2)fill style方法对其进行染色，fillRect方法指定形状、位置和大小。fillRect方法有参数(0，0，150，75)。含义：在画布上画一个150x75的矩形，从左上角开始(0，0)]3、实例
(1)将鼠标悬停在矩形上以查看坐标复制代码，如下所示：
！DOCTYPE html PUBLIC -//WC//DTD XHTML。 transitional//EN http://www . w . org/TR/XHTML/DTD/XHTML-transitional . DTD
html xmlns= http://www . w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
标题画布/标题
脚本类型=文本/javascript
函数cnvs_getCoordinates(e)
{
x=e.clientX！- clientX事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区)的水平坐标-
y=客户关系；
文档。getelementbyid( xy坐标).innerHTML=Coordinates: ( x ， y )；
}
函数cnvs_clearCoordinates()
{
文档。getelementbyid( xy坐标).innerHTML=
}
/脚本
/头
body style= margin:px；
p把鼠标悬停在下面的矩形上可以看到坐标：/p
div id= coordiv style= float:left；宽度：px；高度：px；边框：px纯色#ccc
onmousemove= cnvs _ get coordinates(event) onmouseout= cnvs _ clear coordinates()/div
div id=xycoordinates/div
/body
/html
知识点：
*clientX事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区)的水平坐标。客户区指的是当前窗口。
*内部文本和innerHTML都可以给标签体里添加相应信息。
效果：
(2)绘制线条复制代码代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML .过渡//EN http://www。w . org/TR/XHTML/DTD/XHTML-transitional。 DTD
html xmlns= http://。 w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
标题画布/标题
/头
身体
canvas id= my canvas width= height= style= border:px solid # CCC；
您的浏览器不支持画布元素。
/画布
脚本类型=文本/javascript
var c=文档。getelementbyid(我的画布)；
var cxt=c . get context( d )；
cxt.moveTo(，)；
cxt.lineTo(，)；
cxt.lineTo(，)；
cxt。笔画()；
/脚本
/body
/html
知识点：
*移动到是移动到某个坐标，lineto是从当前坐标连线到某个坐标。这两个函数加起来就是画一条直线。画线要用"笔",那么MoveToEx()把笔要画的起始位置固定了(x，y)然后要固定终止位置要用到直线函数确定终止位置(xend，yend)，这样一条线就画出来了。每次与前面一个坐标相连。
*笔画()方法会实际地绘制出通过移动到()和线到()方法定义的路径。默认颜色是黑色。
效果：
(3)绘制圆形
*填充()方法填充当前的图像（路径)。默认颜色是黑色。
*弧线()方法创建弧/曲线（用于创建圆或部分圆):context.arc(x，y，r，桑乐，一个角度，逆时针);
中心：弧(100,75,50,0 *数学。圆周率，1.5 *数学.)
起始角：弧(100,75,50,0,1.5 *数学.)
结束角：弧(100,75,50,0 *数学。圆周率，1.5 *数学.)
* Cxt .beginPath():开启路径，开启后可以从新设置相关属性. Cxt.closePath():关闭一条路径。复制代码代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML .过渡//EN http://www。w . org/TR/XHTML/DTD/XHTML-transitional。 DTD
html xmlns= http://。 w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
标题画布/标题
/头
身体
canvas id= my canvas width= height= style= border:px solid # CCC；/画布！-不能放在射流研究…代码之后，否则效果出不来-
脚本类型=文本/javascript
var c=文档。getelementbyid(我的画布)；
var cxt=c . get context( d )；
cxt.fillStyle= # FF
cxt。begin path()；
cxt.arc(，数学100 . PI *，真);
cxt。关闭路径()；
cxt。fill()；
/脚本
/body
/html
效果：
(4)颜色渐变
* createLinearGradient()方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。使用addColorStop()方法规定不同的颜色，以及在梯度对象中的何处定位颜色106 .射流研究…语法：上下文。createlaneragradient(x0，y0，x1，y1):
*addColorStop()方法规定梯度对象中的颜色和位置106 .射流研究…语法：gradient.addColorStop(stop，color)；
复制代码代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML .过渡//EN http://www。w . org/TR/XHTML/DTD/XHTML-transitional。 DTD
html xmlns= http://。 w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
标题画布/标题
/头
身体
canvas id= my canvas width= height= style= border:px solid # CCC；/画布
脚本类型=文本/javascript
var c=文档。getelementbyid(我的画布)；
var cxt=c . get context( d )；
var grd=cxt。createlineargradient(，)；
grd.addColorStop(， # FF )；
grd.addColorStop(， # FF )；
cxt.fillStyle=grd
cxt.fillRect(，)；
/脚本
/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，she height，x，y，width，height)；
复制代码代码如下：
！DOCTYPE html PUBLIC -//WC//DTD XHTML .过渡//EN http://www。w . org/TR/XHTML/DTD/XHTML-transitional。 DTD
html xmlns= http://。 w . org//XHTML
头
meta http-equiv= Content-Type Content= text/html；charset=utf- /
标题画布/标题
/头
身体
canvas id= my canvas width= height= style= border:px solid # CCC；/画布
脚本类型=文本/javascript
var c=文档。getelementbyid(我的画布)；
var cxt=c . get context( d )；
var img=new Image()；
img.src= .png ；
cxt.drawImage(img，)；
/脚本
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。