HTML5簡單入門系列（一）

時間  2019-11-19
標籤 html5 html 簡單 入門 系列 欄目 HTML5 简体版
原文   原文鏈接

前言

隨着HTML5的流行，LZ做爲一個web開發者，也決定學習一下前端前沿技術。javascript

HTML5 是下一代的HTML，它將成爲 HTML、XHTML 以及 HTML DOM 的新標準。它是W3C（ World Wide Web Consortium）和WHATWG（Web Hypertext Application Technology Working Group）合做的結果，在2014年10月29日宣佈完成。
他們爲 HTML5 創建的一些規則：
一、新特性應該基於 HTML、CSS、DOM 以及 JavaScript。
二、減小對外部插件的需求（好比 Flash）
三、更優秀的錯誤處理
四、更多取代腳本的標記
五、HTML5 應該獨立於設備
六、開發進程應對公衆透明css

HTML5新增的標籤

視頻標籤VIDEO

Web上的視頻播放大多都是經過插件來顯示的，而HTML5規定了，經過一種新加的標籤video實現視頻播放的標準方法。請看下邊的代碼html

 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

若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。html5

若是使用 "autoplay"，則忽略該屬性。java
src url 要播放的視頻的 URL。
width pixels 設置視頻播放器的寬度。

video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式。video中（source元素下）插入的文本內容是供不支持 video 元素的瀏覽器顯示的。web

video 元素支持三種視頻格式：chrome

格式 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 文件canvas

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

一、爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true" />

二、當該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是被拖動元素

三、雖然已經設定了img元素可被拖動，可是瀏覽器默認地，沒法將數據/元素放置到其餘元素中。若是有須要設置某些元素可接受被拖動元素，則要阻止它的默認行爲，這要經過設置該接收元素的ondragover 事件，調用event.preventDefault() 方法：

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

若是這裏咱們不設置阻止默認行爲，圖片則會默認打開一個瀏覽器標籤展現該圖片，同時也不會實現拖放效果。（Firefox會打開標籤，而chrome不會打開標籤，但他們均不能實現拖放效果）

注意：此處ev.target是接收元素，經過事件被綁定在哪一個元素便可區分，下同。

四、進行放置 - 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網站，自學並整理成文。更詳細內容請查看這裏。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程