HTML5簡單入門系列（一）

本文轉載自查看原文 2015-03-31 10:20 2603 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>

View Code

<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 }

View Code

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>

View Code

拖放-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>

View Code

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>

View Code

說明：

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網站，自學並整理成文。更詳細內容請查看這里。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5 基礎入門 HTML5的簡單使用 HTML5系列：HTML5繪圖 Html5 學習系列（一）認識HTML5 HTML5系列：HTML5與HTML4的區別 html5 實現簡單的上傳快速入門系列--MVC--07與HTML5移動開發的結合 Html5 學習系列（二）HTML5新增結構標簽 HTML5入門：HTML5的文檔聲明和基本代碼【HTML5】HTML5 WebSocket簡介以及簡單示例