隨著HTML5的流行，LZ作為一個web開發(fā)者，也決定學習一下前端前沿技術(shù)。

HTML5 是下一代的HTML，它將成為 HTML、XHTML 以及 HTML DOM 的新標準。它是W3C( World Wide Web Consortium)和WHATWG(Web Hypertext Application Technology Working Group)合作的結(jié)果，在2014年10月29日宣布完成。

他們?yōu)?HTML5 建立的一些規(guī)則：

1、新特性應該基于 HTML、CSS、DOM 以及 JavaScript。

2、減少對外部插件的需求(比如 Flash)

3、更優(yōu)秀的錯誤處理

4、更多取代腳本的標記

5、HTML5 應該獨立于設(shè)備

6、開發(fā)進程應對公眾透明

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

標簽有幾個常用屬性：

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。video中(source元素下)插入的文本內(nèi)容是供不支持 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 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。

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

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

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

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

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

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

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

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

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

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

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

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

4、進行放置 - ondrop

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

這里也需要調(diào)用ev.preventDefault()來阻止默認行為。

如果ondragover 沒有阻止默認行為，則這里設(shè)置或不設(shè)置，效果和上邊是一樣的。

如果ondragover設(shè)置了阻止默認行為，如果這里不設(shè)置，則Firefox和chrome均能實現(xiàn)拖放效果，只是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.?

看這段解釋，我以為是存儲的元素被序列化之后的流數(shù)據(jù)，通過調(diào)試，發(fā)現(xiàn)獲取到的值僅僅是存入的值。

其實通過后邊

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

這句代碼，也可以看出來，data就是元素id。

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

看下邊的示例代碼：

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

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

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

Canvas API使用了路徑的表示法。但是，路徑由一系列的方法調(diào)用來定義，而不是描述為字母和數(shù)字的字符串，比如畫弧方法中調(diào)用 beginPath() 和 arc() 方法。

一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。

實例中調(diào)用的函數(shù)原型

cxt.arc(x,y,radius,start,end,direct) ----?圓心坐標(x,y)，半徑，弧度起始點，結(jié)束點，畫弧方向(true-順時針，false-逆時針)

cxt.createLinearGradient(x1,y1,x2,y2) ----漸變路徑的起始坐標和結(jié)束坐標(簡單理解就是畫了一條直線)

addColorStop(p,c) ---- 函數(shù)名字面意思是增加顏色停止點，就是把剛畫的漸變路徑定義為1，p是所在路徑的位置(0-1之間)，c則是漸變到p時候的顏色值。

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

運行效果：

本來想把HTML5相關(guān)的內(nèi)容簡單羅列一下的，但是寫著寫著，內(nèi)容就原來越多，只好先告一段落，一點點增加了。

LZ也是剛剛自學HTML5，很多內(nèi)容沒接觸過，有錯誤請各位大牛園友指導校正。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。