HTML5简单入门系列（一）

前言

随着HTML5的流行，LZ作为一个web开发者，也决定学习一下前端前沿技术。

HTML5 是下一代的HTML，它将成为 HTML、XHTML 以及 HTML DOM 的新标准。它是W3C（ World Wide Web Consortium）和WHATWG（Web Hypertext Application Technology Working Group）合作的结果，在2014年10月29日宣布完成。
他们为 HTML5 建立的一些规则：
1、新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
2、减少对外部插件的需求（比如 Flash）
3、更优秀的错误处理
4、更多取代脚本的标记
5、HTML5 应该独立于设备
6、开发进程应对公众透明

HTML5新增的标签

视频标签VIDEO

Web上的视频播放大多都是通过插件来显示的，而HTML5规定了，通过一种新加的标签video实现视频播放的标准方法。请看下边的代码

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4
 5 <div style="text-align:center;">
 6   <button onclick="playPause()">播放/暂停</button>
 7   <button onclick="makeBig()">大</button>
 8   <button onclick="makeNormal()">中</button>
 9   <button onclick="makeSmall()">小</button>
10   <br />
11   <video id="video1" width="420" style="margin-top:15px;">
12     <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
13     <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
14     Your browser does not support HTML5 video.
15   </video>
16 </div>
17
18 <script type="text/javascript">
19 var myVideo=document.getElementById("video1");
20
21 function playPause()
22 {
23 if (myVideo.paused)
24   myVideo.play();
25 else
26   myVideo.pause();
27 }
28
29 function makeBig()
30 {
31 myVideo.width=560;
32 }
33
34 function makeSmall()
35 {
36 myVideo.width=320;
37 }
38
39 function makeNormal()
40 {
41 myVideo.width=420;
42 }
43 </script>
44
45 </body>
46 </html>

<video>标签有几个常用属性：

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。video中（source元素下）插入的文本内容是供不支持 video 元素的浏览器显示的。

video 元素支持三种视频格式：

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

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

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

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

如下脚本是简单验证当前浏览器是否知否支持video标签的一段js代码：

 1 function checkVideo()
 2 {
 3 if(!!document.createElement(‘video‘).canPlayType)
 4   {
 5   var vidTest=document.createElement("video");
 6   oggTest=vidTest.canPlayType(‘video/ogg; codecs="theora, vorbis"‘);
 7   if (!oggTest)
 8     {
 9     h264Test=vidTest.canPlayType(‘video/mp4; codecs="avc1.42E01E, mp4a.40.2"‘);
10     if (!h264Test)
11       {
12       document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
13       }
14     else
15       {
16       if (h264Test=="probably")
17         {
18         document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
19         }
20       else
21         {
22         document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
23         }
24       }
25     }
26   else
27     {
28     if (oggTest=="probably")
29       {
30       document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
31       }
32     else
33       {
34       document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
35       }
36     }
37   }
38 else
39   {
40   document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
41   }
42 }

video作为DOM元素，拥有如下有方法、属性和事件

方法 play() pause()　 load() canPlayType                  
属性 currentSrc currentTime videoWidth videoHeight duration ended error paused muted seeking volume height width
事件 play pause progress error timeupdate ended abort empty emptied waiting loadedmetadata    

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

音频标签AUDIO

audio 元素能够播放声音文件或者音频流。

audio 元素支持三种音频格式：

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √   √

audio标签的使用和video基本一致。

1 <audio controls="controls">
2   <source src="song.ogg" type="audio/ogg">
3   <source src="song.mp3" type="audio/mpeg">
4 Your browser does not support the audio tag.
5 </audio>

拖放-draggable

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

如下示例说明拖动的使用：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 #div1, #div2
 6 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
 7 </style>
 8 <script type="text/javascript">
 9 function allowDrop(ev)
10 {
11 ev.preventDefault();
12 }
13
14 function drag(ev)
15 {
16 ev.dataTransfer.setData("Text",ev.target.id);
17 }
18
19 function drop(ev)
20 {
21 ev.preventDefault();
22 var data=ev.dataTransfer.getData("Text");
23 ev.target.appendChild(document.getElementById(data));
24 }
25 </script>
26 </head>
27 <body>
28
29 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
30   <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
31 </div>
32 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
33
34 </body>
35 </html>

1、为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

2、当该img元素被拖动时，会触发一个ondragstart 事件，示例中该事件调用了一个方法drag(event)。

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

ev.dataTransfer.setData() 方法设置被拖数据的数据类型（Text）和值（被拖元素id），该方法将被拖动元素的id存储到事件的dataTransfer对象内，ev.dataTransfer.getData()可将该元素取出。

注意：此处ev.target是被拖动元素

3、虽然已经设定了img元素可被拖动，但是浏览器默认地，无法将数据/元素放置到其他元素中。如果有需要设置某些元素可接受被拖动元素，则要阻止它的默认行为，这要通过设置该接收元素的ondragover 事件，调用event.preventDefault() 方法：

function allowDrop(ev)
{
ev.preventDefault();
}

如果这里我们不设置阻止默认行为，图片则会默认打开一个浏览器标签展示该图片，同时也不会实现拖放效果。（Firefox会打开标签，而chrome不会打开标签，但他们均不能实现拖放效果）

注意：此处ev.target是接收元素，通过事件被绑定在哪个元素即可区分，下同。

4、进行放置 - ondrop

当被拖元素移动到接收元素，松开鼠标时（即被拖元素放置在接收元素内时）会出发ondrop事件：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

这里也需要调用ev.preventDefault()来阻止默认行为。

如果ondragover 没有阻止默认行为，则这里设置或不设置，效果和上边是一样的。

如果ondragover设置了阻止默认行为，如果这里不设置，则Firefox和chrome均能实现拖放效果，只是Firefox会同时打开一个页面展示图片。

var data=ev.dataTransfer.getData("Text");

这句代码将被拖动元素id取出，然后将该元素添加到接收元素尾部，完成拖放操作。


mozilla这样描述dataTransfer对象：

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types.

看这段解释，我以为是存储的元素被序列化之后的流数据，通过调试，发现获取到的值仅仅是存入的值。

其实通过后边

ev.target.appendChild(document.getElementById(data));

这句代码，也可以看出来，data就是元素id。

HTML5 画布-vanvas

画布（canvas元素）是一个矩形区域，用于在网页上绘制图形。元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript内部完成。

看下边的示例代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4
 5 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
 6 Your browser does not support the canvas element.
 7 </canvas>
 8
 9 <script type="text/javascript">
10
11 var c=document.getElementById("myCanvas");
12 var cxt=c.getContext("2d");
13 function line()
14 {
15 cxt.moveTo(10,10);
16 cxt.lineTo(100,50);
17 cxt.lineTo(10,50);
18 cxt.stroke();
19 }
20
21 function arc()
22 {
23 cxt.fillStyle="#FF0000";
24 cxt.beginPath();
25 cxt.arc(120,20,15,Math.PI,Math.PI*2,true);
26 cxt.closePath();
27 cxt.fill();
28 }
29
30 function LinearGradient()
31 {
32 var grd=cxt.createLinearGradient(0,0,175,50);
33 grd.addColorStop(0,"#FF0000");
34 grd.addColorStop(1,"#00FF00");
35 cxt.fillStyle=grd;
36 cxt.fillRect(0,55,175,50);
37 }
38
39 function drawImg()
40 {
41 var img=new Image()
42 img.src="http://w3school.com.cn/i/ct_html5_canvas_image.gif"
43 cxt.drawImage(img,0,110);
44 }
45
46 </script>
47
48 <input type="button" value="直线" onclick="line()"/>
49 <input type="button" value="弧" onclick="arc()"/>
50 <input type="button" value="渐变" onclick="LinearGradient()"/>
51 <input type="button" value="图" onclick="drawImg()"/>
52 </body>
53 </html>

说明：

canvas标签内的内容是对于不支持该元素的浏览器进行展示的

大多数Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

通过canvas标签的id得到该元素，然后获取一个作图上下文对象，关于参数‘2d‘，目前只支持二维作图，将来或许还会有‘3d‘。

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

Canvas API使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如画弧方法中调用 beginPath() 和 arc() 方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。

实例中调用的函数原型

cxt.arc(x,y,radius,start,end,direct) ---- 圆心坐标（x,y），半径，弧度起始点，结束点，画弧方向（true-顺时针，false-逆时针）

cxt.createLinearGradient(x1,y1,x2,y2) ----渐变路径的起始坐标和结束坐标（简单理解就是画了一条直线）

addColorStop(p,c) ---- 函数名字面意思是增加颜色停止点，就是把刚画的渐变路径定义为1，p是所在路径的位置（0-1之间），c则是渐变到p时候的颜色值。

cxt.drawImage(img,x,y); ---- 图片及起始坐标

运行效果：

小结

本来想把HTML5相关的内容简单罗列一下的，但是写着写着，内容就原来越多，只好先告一段落，一点点增加了。

LZ也是刚刚自学HTML5，很多内容没接触过，有错误请各位大牛园友指导校正。

注：内容来源基于w3school网站，自学并整理成文。更详细内容请查看这里。

时间： 2024-10-31 19:30:23

HTML5简单入门系列（一）的相关文章

HTML5简单入门系列（五）

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

HTML5简单入门系列（六）

前言 之前几篇已经将HTML5的主要新增元素和特性简单介绍完毕,LZ一直在犹豫还要不要把其他元素也写出来,因为其实没什么东西可以写,就是自己用到时看一下就行.不过为了入门系列的完整,犹豫再三,还是决定简单写一下其他元素(看到其他深入的HTML5,LZ就不写到这里了,因为LZ也没掌握,这里有篇深入剖析HTML5,各位可以看看). HTML5 新增元素介绍 input类型 新增的输入类型元素有: email url number range Date pickers (date, month, we

HTML5简单入门系列（九）

前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光加载动画(这里可下载源码).算是对之前系列的各个知识点的一个总结吧. 我们先看看最终的效果截图: 新建一个html和一个js文件 html文件引入该js,并加了一个背景黑色,大体如下这样: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <

HTML5简单入门系列（三）

前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorag

HTML5简单入门系列

前言 本篇详细介绍canvas画布的API.说是详细介绍,也只是一些常用的API及简单实例和说明.LZ本人也还没有看完全部,下篇会介绍剩余的一些内容. 本篇的示例中,LZ加入了注释,为的是只简单介绍API确实挺无聊,也不那么容易理解,看代码看效果才最直接. canvas APIs canvas 基础api 介绍 在初始化Javascript函数中,用canvas标签的id获得canvas的DOM对象,并用getContext() 方法获得这个canvas的“2d”上下文对象,之后使用上下文对象调

HTML5简单入门系列（四）

前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线程(Web Worker)的概念,工作线程允许开发人员编写能够长时间运行而不被用户所中断的后台程序, 去执行事务或者逻辑,并同时保证页面对用户的及时响应.工作线程的出现使得在 Web 页面中进行多线程编程成为可能.众所周知,传统页面中(HTML5 之前)的 JavaScript 的运行都是以单线程的

03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(section)的标题进行组合 2.figure <figure> 标签规定独立的流内容(图像.图表.照片.代码等等). figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响. Figcaption figure的标题 一般格式: <figure> <figcap

04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ? 待续.... 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html