HTML5新特性总结

最新推荐文章于 2021-06-18 10:58:55 发布
最新推荐文章于 2021-06-18 10:58:55 发布
阅读量138 收藏
点赞数
文章标签： javascript xhtml python ViewUI
原文链接：https://my.oschina.net/m2gIGj8g1iU/blog/809916
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、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）

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>视频</title>
 6 </head>
 7 
 8 <body>
 9     <video src="2. HTML5音频视频-编解码工具.mp4" controls="controls" width="500px" height="500px"></video>
10 </body>
11 </html>

复制代码

　　效果：

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

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

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>视频</title>
 6 
 7 </head>
 8 
 9 <body>
10     <video id="video" src="2. HTML5音频视频-编解码工具.mp4" width="300px" height="300px"></video>
11     <button οnclick="clickA()">播放/暂停</button>
12     <button οnclick="clickBig()">放大</button>
13     <button οnclick="clickSmall()">缩小</button>
14     
15     <script><!--若此JS部分写在<head></head>中，视频将播放错误-->
16     var a = document.getElementById("video");
17     function clickA() {
18         if(a.paused) a.play();
19         else a.pause();
20     }
21     function clickBig() {
22         a.width = 400;
23         a.height = 400;
24     }
25     function clickSmall() {
26         a.width = 150;    <!--此处不能写150px，否则会出错,可以写成a.width = 400+"px";-->
27         a.height = 150;
28     }
29 </script>
30 
31 </body>
32 </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）把鼠标悬停在矩形上可以看到坐标

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>画布</title>
 6 <script type="text/javascript"> 
 7         function cnvs_getCoordinates(e)
 8         {
 9         x=e.clientX;  <!--clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标-->
10         y=e.clientY;
11         document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
12         }
13          
14         function cnvs_clearCoordinates()
15         {
16         document.getElementById("xycoordinates").innerHTML="";
17         }
18 </script>
19 </head>
20 
21 <body style="margin:0px;">
22 
23     <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
24     
25     <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" 
26     οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="cnvs_clearCoordinates()"></div>
27     <br />
28     <br />
29     <br />
30     <div id="xycoordinates"></div>
31 
32 </body>
33 </html>

复制代码

　　知识点：

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

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

　　效果：

（2）绘制线条

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>画布</title>
 6 
 7 
 8 </head>
 9 
10 <body>
11     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
12     Your browser does not support the canvas element.
13     </canvas>
14     <script type="text/javascript">
15         var c=document.getElementById("myCanvas");
16         var cxt=c.getContext("2d");
17         cxt.moveTo(10,10);
18         cxt.lineTo(150,50);
19         cxt.lineTo(10,50);
20         cxt.stroke();
21     </script>
22 </body>
23 </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(）：关闭一条路径。

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>画布</title>
 6 
 7 </head>
 8 
 9 <body>
10     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>  <!--不能放在JS代码之后，否则效果出不来-->
11     <script type="text/javascript">
12         var c=document.getElementById("myCanvas");
13         var cxt=c.getContext("2d");
14         cxt.fillStyle="#FF0000";
15         cxt.beginPath();
16         cxt.arc(70,18,15,0,Math.PI*2,true);
17         cxt.closePath();
18         cxt.fill();
19     </script>
20     
21 </body>
22 </html>

复制代码

　　效果：

　　

（4）颜色渐变

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

　　

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

　　

 

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>画布</title>
 6 
 7 </head>
 8 
 9 <body>
10     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas> 
11     <script type="text/javascript">
12         var c=document.getElementById("myCanvas");
13         var cxt=c.getContext("2d");
14         var grd=cxt.createLinearGradient(0,0,175,50);
15         grd.addColorStop(0,"#FF0000");
16         grd.addColorStop(1,"#00FF00");
17         cxt.fillStyle=grd;
18         cxt.fillRect(0,0,175,50);
19     </script>
20 
21     
22 </body>
23 </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);

　　　　　　

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>画布</title>
 6 
 7 </head>
 8 
 9 <body>
10     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas> 
11     <script type="text/javascript">
12         var c=document.getElementById("myCanvas");
13         var cxt=c.getContext("2d");
14         var img=new Image();
15         img.src="11.png";
16         cxt.drawImage(img,0,0);
17     </script>
18 </body>
19 </html>

转载于:https://my.oschina.net/m2gIGj8g1iU/blog/809916

njit_peiyuan
关注
html5新特性总结
11-07
HTML5是HTML的最新主要修订版本，旨在取代HTML ...HTML5的这些新特性极大地提高了网页的可访问性、可读性和跨平台兼容性。随着浏览器对HTML5支持的不断加强，开发者可以利用这些新特性创建更强大、更丰富的网络应用。
html5-----显示鼠标位置
zhouyanldh的专栏
11-20 9594
body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates:
画布canvas的使用1
jihn_kevin的博客
04-25 570
画布Canvas--1示例1：了解HTML中的坐标代码实现效果结构分析代码块分析示例2：创建画布并在上面画线代码实现效果结构分析代码块分析 示例1：了解HTML中的坐标 代码 <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { ...
html5画板的使用方法和功能,HTML5 画布canvas使用方法
weixin_32016817的博客
06-18 241
canvas 元素使用 JavaScript 在网页上绘制图像，本身是没有绘图能力。canvas 是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面来做几个示例：1、填充画布JavaScript Code复制内容到剪贴板varc=document.getElementById("myCanvas");varcxt=c.getContex...
HTML5笔记整合
华夏天骄
04-28 186
HTML5 简介 HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search HTML5 新元素 语
HTML5的新特性及技巧分享总结
02-01
新的Doctype尽管使用<!DOCTYPEhtml>，即使浏览器不懂这句话也会按照标准模式去渲染2.Figure元素用和来语义化地表示带标题的图片3.重新定义的<small><small>已经被重新定义了，现在被用来表示小的排版，如网站底部...
新手小白HTML5阶段总结
最新发布
12-02
HTML5 是最新的 HTML 标准，提供了许多新的功能和特性，使得网页开发更加方便和强大。本文将对 HTML5 的基本概念、文本控制标签、图像标签、超链接标签、表格标签、列表标签、表单标签等进行总结。 一、HTML5 简介 ...
html5新特性与用法大全
01-19
有好多小伙伴私聊我问我html5新特性 和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，下面我给大家总结一下。 1)新的语义标签 footer header 等等 2）增强型表单 表单2.0 3）音频和视频 4）canvas 绘图 5...
HTML5学习心得总结(推荐)
09-28
HTML5作为Web开发领域的重要标准，自2014年正式定稿以来，已被广泛应用于网站和应用程序的开发中。...随着Web标准的不断发展，持续学习和实践新的HTML5特性和最佳实践，是保持竞争力和创新能力的关键。
js event对象获取鼠标坐标
66
12-12 3702
function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinat
html矩形坐标理解,理解Canvas坐标系
weixin_42347486的博客
06-04 526
如下图所示，`canvas`元素的坐标系统 是一个二维网格，它的坐标系是以左上角为原点，向右延伸是横坐标 `x` 的正方向，向下延伸 是纵坐标 `y` 的正方向，所以原点的坐标是 `(x,y) = (0,0) `。![](https://img.kancloud.cn/9a/5c/9a5cdba6475802c57f1d5cfdb76a91f5_329x266.png)弄清楚以后使用 `canva...
鼠标悬浮显示区域坐标
kfzx8888的专栏
03-21 1014
function cnvs_getCoordinates(e) {             x = e.clientX;             y = e.clientY;             document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";      
Canvas容器绘制直线
kfzx8888的专栏
03-21 572
onmouseout="cnvs_clearCoordinates()">         function cnvs_getCoordinates(e) {         x = e.clientX;         y = e.clientY;         document.getElementById("xycoordinates").innerHTML
获取点坐标
weixin_30386713的博客
07-01 207
<!--<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script...
html5的学习笔记
weixin_33824363的博客
12-14 115
写在前面：该笔记是基于W3Cschool的HTML5课程完成。因为类似读书笔记，所以很多内容不全。有兴趣的童靴可以访问该网站学习：点击打开链接 第一节 HTML5 1.HTML5是下一代的HTML。 2.下面是一段HTML5的代码： <!DOCTYPE HTML> <html> <body> <video width="320" height...
html画布Canvas的使用
哈哈哈哈哈哈哈哈的博客
02-19 972
html画布Canvas的使用 canvas是html5中新增加的元素，用于图形的绘制，通过脚本 (通常是JavaScript)来完成. < canvas> 标签只是图形容器，必须使用脚本来绘制图形。 可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 使用步骤： 1.创建画布： 注意: 标签通常需要指定一个id属性 (脚本中经常引用), wid...
Html5 中的新特性，及每种标签的使用
行者
12-30 1117
$(function () { // canvas 绘图 var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); //getContext("2d") 对象是内建的 HTML 5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像
绘图应用详解（<canvas>标记）第一篇
03-10 201
<canvas>标记是HTML5中新增的一个HTML元素。 注解： 1.在向html5中添加<canvas>元素时，需要设置元素的id、宽度值和高度值。 1 <canvas id="myCanvas" width="100px" heigth="100"></canvas> 2.canvas 本身没有绘图能力，需要在j...
HTML5新特性解析：从Doctype到LocalStorage
以下是一些主要的HTML5新特性及技巧： 1. **新的Doctype声明**：HTML5采用简洁的<!DOCTYPE html>声明，不再需要长长的DTD（文档类型定义），这使得文档更易读且浏览器会自动进入标准模式。 2. **Figure元素与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值