HTML5的介紹

、什么是 HTML5？

HTML5 是最新的 HTML 標(biāo)準(zhǔn)；
HTML5 是專(zhuān)門(mén)為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無(wú)需額外插件；
HTML5 擁有新的語(yǔ)義、圖形以及多媒體元素；
HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建；
HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類(lèi)型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行；

二、HTML5的一些新特性

用于繪畫(huà)的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
對(duì)本地離線(xiàn)存儲(chǔ)的更好的支持；
新的特殊內(nèi)容元素，比如article、footer、header、nav、section；
新的表單控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暫停和音量控件來(lái)控制視頻；
<video> 元素也提供了 width 和 height 屬性控制視頻的尺寸；
<video> 與</video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的；

video 元素的三種視頻格式：

Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件；
MPEG4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件；
WebM：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件；

video 元素的屬性：

src：要播放的視頻的 URL；
width：設(shè)置視頻播放器的寬度；
height：設(shè)置視頻播放器的高度；
autoplay：自動(dòng)播放；
controls：如果出現(xiàn)該屬性，則向用戶(hù)顯示控件，比如播放按鈕；
loop：循環(huán)播放；
preload：如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

pause()：暫停當(dāng)前播放的視頻；
play()：開(kāi)始播放視頻；
load()：重新加載視頻元素；
canPlayType()：檢測(cè)瀏覽器是否能播放指定的視頻類(lèi)型；
addTextTrack()：向音頻/視頻添加新的文本軌道；

四、audio元素

HTML5 規(guī)定了在網(wǎng)頁(yè)上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素；
<audio>元素能夠播放聲音文件或者音頻流；

audio元素的三種音頻格式：

MP3：適用于Internet Explorer、Chrome、Safari 等瀏覽器；
Wav：適用于Firefox、Opera等瀏覽器；
Ogg：適用于Firefox、IE9、Chrome 瀏覽器；

audio元素的屬性：

src：要播放的音頻的 URL；
autoplay：自動(dòng)播放；
controls：如果出現(xiàn)該屬性，則向用戶(hù)顯示控件；
loop：循環(huán)播放；
preload：如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

audio元素的方法：

pause()：暫停當(dāng)前播放的音頻；
play()：開(kāi)始播放音頻；
load()：重新加載音頻；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通過(guò) JavaScript 在網(wǎng)頁(yè)上繪制圖像，元素本身并沒(méi)有繪制能力，它只是圖形容器，必須使用腳本來(lái)繪制圖形；
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法；
創(chuàng)建一個(gè)畫(huà)布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新屬性有：

height：設(shè)置 canvas 的高度；
width：設(shè)置 canvas 的寬度；

六、繪制三角形

getElementById()：可返回對(duì)擁有指定 ID 的第一個(gè)對(duì)象的引用；

getContext()：返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境，2d表示二維繪圖；

beginPath()：開(kāi)始一條路徑，或重置當(dāng)前的路徑；

moveTo()：把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線(xiàn)條。

lineTo()：添加一個(gè)新點(diǎn)，然后創(chuàng)建從該點(diǎn)到畫(huà)布中最后指定點(diǎn)的線(xiàn)條（該方法并不會(huì)創(chuàng)建線(xiàn)條）；

closePath()：創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑；

strokeStyle屬性：設(shè)置或返回用于筆觸的顏色、漸變或模式；

stroke()：會(huì)實(shí)際地繪制出路徑；

fillStyle屬性：設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式；

fill()：填充當(dāng)前的圖像（路徑），默認(rèn)顏色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或閉合 需要先閉合路徑才能畫(huà)
cxt.strokeStyle="red";
cxt.stroke();
//實(shí)心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個(gè)空心圓

arc()：創(chuàng)建弧或曲線(xiàn)（用于創(chuàng)建圓或部分圓）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //創(chuàng)建context對(duì)象
 ctx.beginPath();//標(biāo)志開(kāi)始一個(gè)路徑
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
 ctx.stroke()
 </script>

演示圖

圖2

八、繪制一個(gè)實(shí)心圓

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示圖

圖3

九、繪制一個(gè)空心矩形

strokeRect()：繪制矩形（不填色），筆觸的默認(rèn)顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //獲得畫(huà)板數(shù)據(jù)
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設(shè)置線(xiàn)條顏色
 ctx.strokeRect(100,100,100,100); //線(xiàn)條畫(huà)矩形
 </script>

演示圖

圖4

十、繪制一個(gè)實(shí)心的矩形

fillRect()：繪制“已填色”的矩形，默認(rèn)的填充顏色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//獲得畫(huà)板數(shù)據(jù)
var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設(shè)置線(xiàn)條顏色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//線(xiàn)條畫(huà)矩形
 </script>

演示圖

圖5

?HTML5被看做是Web前端開(kāi)發(fā)的最佳編程語(yǔ)言，具有多設(shè)備、跨平臺(tái)、即時(shí)更新等優(yōu)勢(shì)。更重要的是HTML5入門(mén)簡(jiǎn)單，就業(yè)前景廣、薪資福利高，這促使越來(lái)越多的人轉(zhuǎn)行學(xué)習(xí)HTML5。學(xué)習(xí)要一步一個(gè)腳印，下面就來(lái)給初學(xué)者介紹一下常見(jiàn)的HTML5開(kāi)發(fā)工具有哪些。

1、Sublime Text

Sublime Text 是一個(gè)跨平臺(tái)的代碼編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)，也是HTML和散文先進(jìn)的文本編輯器。Sublime Text具有漂亮的用戶(hù)界面和強(qiáng)大的功能，主要功能包括:拼寫(xiě)檢查，書(shū)簽，完整的 Python API ，Goto 功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。

2、Dreamweaver

Dreamweaver是集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，擁有可視化編輯界面，支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫(xiě)和修改網(wǎng)頁(yè)，初學(xué)HTML5的人可以無(wú)需編寫(xiě)任何代碼就能快速創(chuàng)建Web頁(yè)面。

3、Adobe Edge

Adobe Edge是一款新型網(wǎng)頁(yè)互動(dòng)工具，允許設(shè)計(jì)師通過(guò)HTML5、CSS和Java制作網(wǎng)頁(yè)動(dòng)畫(huà)。Edge的一個(gè)重要功能是Web工具包界面，方便確保頁(yè)面在不同瀏覽器中的架構(gòu)一致性。

4、WebStorm

WebStorm是一款Java 開(kāi)發(fā)工具，目前已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為"Web前端開(kāi)發(fā)神器"、"最強(qiáng)大的HTML5編輯器"、"最智能的Java IDE"等。WebStorm具有的優(yōu)勢(shì)是：智能的代碼補(bǔ)全、代碼格式化、html提示、聯(lián)想查詢(xún)、代碼重構(gòu)、代碼檢查和快速修復(fù)、代碼調(diào)試、代碼結(jié)構(gòu)瀏覽、代碼折疊、包裹或者去掉外圍代碼。

5、Sencha Touch

Sencha Touch是全球領(lǐng)先的應(yīng)用程序開(kāi)發(fā)框架，其設(shè)計(jì)旨在充分利用HTML5、CSS3 和Java 來(lái)實(shí)現(xiàn)最高級(jí)別的功能、靈活性和優(yōu)化。Sencha Touch 是針對(duì)下一代具有觸摸屏設(shè)備的跨平臺(tái)框架。

6、DevExtreme

DevExtreme是專(zhuān)為你的移動(dòng)世界精心準(zhǔn)備的，一個(gè)跨平臺(tái)開(kāi)發(fā)的HTML5/JS框架，可以構(gòu)建iOS、Android、Tizen和Windows Phone 8應(yīng)用程序，是Visual Studio開(kāi)發(fā)人員開(kāi)發(fā)跨平臺(tái)移動(dòng)產(chǎn)品的優(yōu)選工具。

7、Dojo Foundation Maqetta

Dojo Foundation Maqetta是為桌面和移動(dòng)設(shè)備開(kāi)發(fā)HTML5應(yīng)用的開(kāi)源工具，支持在瀏覽器中查看HTML5界面。用戶(hù)體驗(yàn)設(shè)計(jì)師可以通過(guò)拖放組裝UI樣板。

除此之外，還有很多優(yōu)秀的HTML5開(kāi)發(fā)工具。

你明白了嗎？????

tml5是指萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（ HTML）的第五次重大修改，2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。

HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語(yǔ)法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶(hù)與文檔的交互方式，包括新的解析規(guī)則增強(qiáng)了靈活性、新屬性、淘汰過(guò)時(shí)的或冗余的屬性等。

HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì) RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶(hù)都更有價(jià)值的數(shù)據(jù) 驅(qū)動(dòng)的Web。

本地存儲(chǔ)特性（Class: OFFLINE & STORAGE）

基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè) APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和 API說(shuō)明文檔。

設(shè)備兼容特性 (Class: DEVICE ACCESS)

從 Geolocation功能的API文檔公開(kāi)以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線(xiàn)交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶(hù)端的功能。

網(wǎng)頁(yè) 多媒體 特性(Class: MULTIMEDIA)

支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

三維、圖形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶(hù)會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。

性能與集成特性（Class: Performance & Integration）

沒(méi)有用戶(hù)會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò) XMLHttpRequest2等技術(shù)，解決以前的跨域等問(wèn)題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

CSS3特性(Class: CSS3)

在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下， CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開(kāi)放字體格式（ WOFF）也提供了更高的靈活性和控制性。

關(guān)于沿革

HTML5提供了一些新的元素和屬性，例如

（網(wǎng)站導(dǎo)航塊）和

。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如

1、取消了一些過(guò)時(shí)的 HTML4標(biāo)記

其中包括純粹顯示效果的標(biāo)記，如< font>和<center>，它們已經(jīng)被CSS取代。

HTML5 吸取了 XHTML2 一些建議，包括一些用來(lái)改善文檔結(jié)構(gòu)的功能，比如，新的HTML 標(biāo)簽 header, footer, dialog, aside, figure 等的使用，將使內(nèi)容創(chuàng)作者更加語(yǔ)義地創(chuàng)建文檔，之前的開(kāi)發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用 div。

2、將內(nèi)容和展示分離

b 和 i 標(biāo)簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識(shí)出來(lái)，而不是為了為它們?cè)O(shè)置粗體或斜體式樣。u，font，center，strike 這些標(biāo)簽則被完全去掉了。

3、一些全新的表單輸入對(duì)象

包括日期，URL，Email 地址，其它的對(duì)象則增加了對(duì)非拉丁字符的支持。HTML5 還引入了微數(shù)據(jù)，這一使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語(yǔ)義Web 的處理更為簡(jiǎn)單。總的來(lái)說(shuō)，這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁(yè)，這樣的網(wǎng)頁(yè)對(duì)搜索引擎，對(duì)讀屏軟件等更為友好。

4、全新的，更合理的Tag

多媒體對(duì)象將不再全部綁定在 object或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。

5、本地?cái)?shù)據(jù)庫(kù)

這個(gè)功能將內(nèi)嵌一個(gè)本地的SQL 數(shù)據(jù)庫(kù)，以加速交互式搜索，緩存以及索引功能。同時(shí)，那些離線(xiàn)Web 程序也將因此獲益匪淺。不需要插件的豐富動(dòng)畫(huà)。

6、Canvas 對(duì)象

將給瀏覽器帶來(lái)直接在上面繪制矢量圖的能力，這意味著用戶(hù)可以脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動(dòng)畫(huà)。

7、瀏覽器中的真正程序

將提供 API 實(shí)現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種圖形用戶(hù)界面的能力。內(nèi)容修飾Tag 將被剔除，而使用CSS。

8、Html5取代Flash在移動(dòng)設(shè)備的地位。

9、其突出的特點(diǎn)就是強(qiáng)化了web頁(yè)的表現(xiàn)性,追加了本地?cái)?shù)據(jù)庫(kù),

在線(xiàn)咨詢(xún)

上一篇：PHP實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能
下一篇：如何制作園林種植公司網(wǎng)站，園林維護(hù)企業(yè)官網(wǎng)搭建全攻略

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商