HTML5有哪些新特征


Posted in HTML / CSS onDecember 01, 2015

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

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

HTML5有哪些新特征

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

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

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2、<video> 标签的属性

HTML5有哪些新特征

 *标签<source>规定多媒体资源,可以是多个
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视频</title>
</head>
<body>
<video src=". HTML音频视频-编解码工具.mp" controls="controls" width="px" height="px"></video>
</body>
</html>

效果:

HTML5有哪些新特征

(2)HTML5 <video> - 使用 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>视频</title>
</head>
<body>
<video id="video" src=". HTML音频视频-编解码工具.mp" width="px" height="px"></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 = ;
a.height = ;
}
function clickSmall() {
a.width = ; <!--此处不能写px,否则会出错,可以写成a.width = +"px";-->
a.height = ;
}
</script>
</body>
</html>

效果:

HTML5有哪些新特征

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

HTML5有哪些新特征

2、<audio>标签属性

HTML5有哪些新特征

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 "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<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:px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv" style="float:left;width:px;height:px;border:px solid #ccc"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>

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

知识点:

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

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

效果:

HTML5有哪些新特征

(2)绘制线条
 

复制代码
代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.moveTo(,);
cxt.lineTo(,);
cxt.lineTo(,);
cxt.stroke();
</script>
</body>
</html>

知识点:

*moveto是移动到某个坐标,lineto是从当前坐标连线到某个坐标。这两个函数加起来就是画一条直线。画线要用“笔”,那么MoveToEx()把笔要画的起始位置固定了(x,y)然后要固定终止位置要用到LineTo函数确定终止位置(xend,yend),这样一条线就画出来了。每次与前面一个坐标相连。

*stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

效果:

HTML5有哪些新特征

(3)绘制圆形

*fill() 方法填充当前的图像(路径)。默认颜色是黑色。

*arc() 方法创建弧/曲线(用于创建圆或部分圆):context.arc(x,y,r,sAngle,eAngle,counterclockwise);

HTML5有哪些新特征

中心: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)

HTML5有哪些新特征

* Cxt. beginPath()  :开启路径,开启后可以从新设置相关属性  。 Cxt.closePath():关闭一条路径。
 

复制代码
代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas> <!--不能放在JS代码之后,否则效果出不来-->
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
cxt.fillStyle="#FF";
cxt.beginPath();
cxt.arc(,,,,Math.PI*,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

效果:

HTML5有哪些新特征

(4)颜色渐变

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

HTML5有哪些新特征

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

HTML5有哪些新特征

复制代码
代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
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(,,,);
</script>
</body>
</html>

效果:

HTML5有哪些新特征

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

HTML5有哪些新特征

复制代码
代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="" height="" style="border:px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("d");
var img=new Image();
img.src=".png";
cxt.drawImage(img,,);
</script>
</body>
</html>
HTML / CSS 相关文章推荐
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 #HTML / CSS
深入浅析HTML5中的SVG
Nov 27 #HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 #HTML / CSS
HTML5标签使用方法详解
Nov 27 #HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 #HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 #HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 #HTML / CSS
You might like
php验证手机号码
2015/11/11 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jquery 笔记 事件
2011/11/02 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
旷课检讨书2000字
2014/01/14 职场文书
社会实践活动总结报告
2014/04/29 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
白岩松演讲
2014/05/21 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
80后婚前协议书范本
2014/10/24 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript