隨著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、開發進程應對公眾透明

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

標簽有幾個常用屬性：

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。video中(source元素下)插入的文本內容是供不支持 video 元素的瀏覽器顯示的。

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

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

如下腳本是簡單驗證當前瀏覽器是否知否支持video標簽的一段js代碼：

video作為DOM元素，擁有如下有方法、屬性和事件

方法play()pause()　load()canPlayType?屬性currentSrccurrentTimevideoWidth＜/td>videoHeight＜/td>durationendederrorpausedmutedseekingvolumeHeight＜/td>Width＜/td>事件playpauseprogresserrortimeupdateendedabortemptyemptiedwaitingloadedmetadata

注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。

audio 元素能夠播放聲音文件或者音頻流。

audio 元素支持三種音頻格式：

audio標簽的使用和video基本一致。

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

如下示例說明拖動的使用：

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

2、當該img元素被拖動時，會觸發一個ondragstart 事件，示例中該事件調用了一個方法drag(event)。

ev.dataTransfer.setData() 方法設置被拖數據的數據類型(Text)和值(被拖元素id)，該方法將被拖動元素的id存儲到事件的dataTransfer對象內，ev.dataTransfer.getData()可將該元素取出。

注意：此處ev.target是被拖動元素

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

如果這里我們不設置阻止默認行為，圖片則會默認打開一個瀏覽器標簽展示該圖片，同時也不會實現拖放效果。(Firefox會打開標簽，而chrome不會打開標簽，但他們均不能實現拖放效果)

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

4、進行放置 - ondrop

當被拖元素移動到接收元素，松開鼠標時(即被拖元素放置在接收元素內時)會出發ondrop事件：

這里也需要調用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。

畫布(canvas元素)是一個矩形區域，用于在網頁上繪制圖形。元素本身是沒有繪圖能力的，所有的繪制工作必須在 JavaScript內部完成。

看下邊的示例代碼：

canvas標簽內的內容是對于不支持該元素的瀏覽器進行展示的

大多數Canvas 繪圖 API 都沒有定義在 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環境”對象上。getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

通過canvas標簽的id得到該元素，然后獲取一個作圖上下文對象，關于參數'2d'，目前只支持二維作圖，將來或許還會有'3d'。

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，很多內容沒接觸過，有錯誤請各位大牛園友指導校正。

總結

以上是生活随笔為你收集整理的简单html5作品,最新HTML5简单入门系列精选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。