認(rèn)識 HTML5

念：

HTML5 是HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)（推薦標(biāo)準(zhǔn)）。

語法：

根據(jù)HTML5設(shè)計化繁為簡的準(zhǔn)則，文檔類型和字符說明都進(jìn)行了簡化：

<!DOCTYPE html>
<meta charset='UTF-8'>
.......

HTML5元素

HTML5定義了一組新的語義化標(biāo)記來描述元素的內(nèi)容。

header 標(biāo)記頭部區(qū)域的內(nèi)容。
footer 標(biāo)記腳部區(qū)域的內(nèi)容
section 頁面中的一塊區(qū)域
article 獨(dú)立的文章內(nèi)容
aside 相關(guān)內(nèi)容或者引文
nav 導(dǎo)航類
video：定義視頻，比如 電影片段或其他視頻流
<video src='movie.ogg' controls='controls'>video元素</video>
audio：定義音頻，比如音樂或其他音頻流 
<audio src='audio.wav'>audio元素</audio>
...........

HTML5其他功能

HTML5引入了一種用于用于查找頁面DOM元素的selectors API。

document.querySelector("#demo")--->返回文檔中匹配指定 CSS 選擇器的第一個元素。
document.querySelectorAll("#demo")--->返回文檔中匹配指定 CSS 選擇器的所有元素。

html5文檔結(jié)構(gòu)代碼

html5 有什么神奇？就是進(jìn)化的一套標(biāo)準(zhǔn)。

我是不是整理的都好初級，不過整理即鞏固加回憶，只要是好好學(xué)習(xí)，那么時間就不是浪費(fèi)，那么道路就一定是正確的！！加油啊小果凍de邁阿密！！

TML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在網(wǎng)際網(wǎng)路應(yīng)用迅速發(fā)展的時候，使網(wǎng)路標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁瀏覽器對于需要外掛程式的豐富性網(wǎng)路應(yīng)用服務(wù)（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)路應(yīng)用的標(biāo)準(zhǔn)集。

HTML5添加了許多新的語法特征，其中包括<video>、<audio>和<canvas>元素，同時整合了SVG內(nèi)容。這些元素是為了更容易的在網(wǎng)頁中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標(biāo)準(zhǔn)化了。同時APIs和DOM已經(jīng)成為HTML5中的基礎(chǔ)部分了。HTML5還定義了處理非法文檔的具體細(xì)節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯誤。

發(fā)展歷史

網(wǎng)頁超文本技術(shù)工作小組（WHATWG）于2004年開始制定新標(biāo)準(zhǔn)。在當(dāng)時，HTML 4.01自2000年來沒有更新，以及全球資訊網(wǎng)協(xié)會（W3C）正在將未來的發(fā)展重點(diǎn)放在XHTML 2.0。2009年，W3C允許XHTML 2.0工作組章程結(jié)束過期并且決定不再續(xù)訂。W3C與WHATWG合作共同為發(fā)展HTML5而努力。

2004年6月，Mozilla基金會和Opera軟體公司在全球資訊網(wǎng)協(xié)會（W3C）所主辦的研討會上提出了一份立場文件，其重點(diǎn)是開發(fā)與現(xiàn)有瀏覽器向后相容的技術(shù)，包括Web Forms 2.0最初草案規(guī)范。研討會最后以——8票贊成，14票反對——否決繼續(xù)對HTML的開發(fā)工作。這引起一些人的不滿，在研討會之后，網(wǎng)頁超文本技術(shù)工作小組（WHATWG）立即根據(jù)該立場文件成立，第二個草案，Web Applications 1.0也公布了。后來這兩種規(guī)范合并形成HTML5。2007年，獲得W3C接納，并成立了新的HTML工作團(tuán)隊。2008年1月22日，第一份公開工作草案發(fā)布。

盡管HTML5已經(jīng)在網(wǎng)絡(luò)開發(fā)人員中非常出名了，但是它成為主流媒體的一個話題是在2010年的4月，當(dāng)時蘋果公司的CEO喬布斯發(fā)表一篇題為“對Flash的思考”的文章，指出隨著HTML5的發(fā)展，觀看影片或其它內(nèi)容時，Adobe Flash將不再是必須的。這引發(fā)了開發(fā)人員間的爭論，包括HTML5雖然提供了加強(qiáng)的功能，但開發(fā)人員必須考慮到不同瀏覽器對標(biāo)準(zhǔn)不同部分的支持程度的不同，以及HTML5和Flash間的功能差異。

特點(diǎn)

標(biāo)記

HTML5提供了一些新的元素和屬性，反映典型的現(xiàn)代用法網(wǎng)站。其中有些是技術(shù)上類似<div>和<span>標(biāo)簽，但有一定含義，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小螢?zāi)谎b置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標(biāo)準(zhǔn)接口，如<audio>和<video>標(biāo)記。一些過時的HTML 4.01標(biāo)記將取消，其中包括純粹用作顯示效果的標(biāo)記，如<font>和<center>，因為它們已經(jīng)被CSS取代。還有一些透過DOM的網(wǎng)絡(luò)行為。

盡管和SGML在標(biāo)記上的相似性，HTML5的句法并不再基于它了，而是被設(shè)計成向后兼容對老版本的HTML的解析。它有一個新的開始列看起來就像SGML的文檔類型聲明，<!DOCTYPE HTML>，這會觸發(fā)和標(biāo)準(zhǔn)兼容的渲染模式。在2009年1月5日，HTML5添加了Web Form 2.0的內(nèi)容，HTML5開始發(fā)展起來。

新的API

HTML5相關(guān)APIs

除了原先的DOM接口，HTML5增加了更多樣化的應(yīng)用程序接口（API）：

Canvas

定時媒體播放

離線

可編輯內(nèi)容

拖放

歷史

MIME和協(xié)議處理程序時表頭登記

微數(shù)據(jù)

網(wǎng)路訊息

網(wǎng)路存儲

以上技術(shù)盡管是WHATWG HTML說明文檔的內(nèi)容，但并沒有全部包括在W3C HTML5的說明文檔里。一些相關(guān)的技術(shù)，像下面所列的，并沒有包括在這2份文檔中的任何一份中。W3C給這些技術(shù)單獨(dú)出版了說明文檔。

地理位置

網(wǎng)頁SQL數(shù)據(jù)庫 ─ 本地SQL數(shù)據(jù)庫（不再維護(hù)）

IndexedDB

文件─ 處理文件上傳和操縱文件

目錄和文件系統(tǒng) ─ 這個API是為了滿足客戶端在沒有好的數(shù)據(jù)庫支持情況下存儲要求

文件寫入 ─ 從網(wǎng)絡(luò)應(yīng)用程序向文件里寫內(nèi)容

網(wǎng)路音頻

ClassList

網(wǎng)路加密

WebRTC

一個普遍的誤解是HTML5能夠在網(wǎng)頁中提供動畫效果，這是不對的，動畫效果是需要配合JavaScript和CSS。然而靜態(tài)HTML5配合CSS可以表示出覆雜的排版結(jié)構(gòu)而且原生支援與影片的混合與控制（控制一般由JavaScript執(zhí)行），因此簡單可以把HTML5單位時間的狀態(tài)理解為動畫的關(guān)鍵影格。

XHTML5（XML-serialized HTML5）

XHTML5是對HTML5的XML序列化。XML文檔必須被設(shè)置為XML互聯(lián)網(wǎng)文件類型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一樣嚴(yán)格的格式化的語法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可無的。

XHTML5并非XHTML的第5版，沒有自己獨(dú)立的標(biāo)準(zhǔn)規(guī)范，而是HTML5的一種序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。

異常處理

HTML5在設(shè)計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規(guī)則，讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回完全相同的結(jié)果。

普及率

根據(jù)2011年9月30日發(fā)布的一份報告，全球排名前100的網(wǎng)站中有34個網(wǎng)站使用HTML5──主要是搜尋引擎與社群網(wǎng)站。2013年8月發(fā)布的另一份報告顯示，財富美國500強(qiáng)企業(yè)中已有多達(dá)153家采用HTML5。

HTML 4.01和XHTML 1.x的差異

以下為大略的不同之處，與例子：

文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。

新的解析順序：不再基于SGML。

新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新類型：date, email, url等等。

新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。

全域?qū)傩裕篿d, tabindex, repeat。

新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

、什么是 HTML5？

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

二、HTML5的一些新特性

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

三、video 元素

<video> 元素提供了播放、暫停和音量控件來控制視頻；
<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：自動播放；
controls：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕；
loop：循環(huán)播放；
preload：如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放，如果使用 "autoplay"，則忽略該屬性；

video 元素的方法：

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

四、audio元素

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

audio元素的三種音頻格式：

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

audio元素的屬性：

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

audio元素的方法：

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

五、canvas 元素

什么是 Canvas？

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

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

Canvas在HTML5 中的新屬性有：

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

六、繪制三角形

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

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

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

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

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

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

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

stroke()：會實際地繪制出路徑；

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

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();//填充或閉合 需要先閉合路徑才能畫
cxt.strokeStyle="red";
cxt.stroke();
//實心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示圖

圖1

七、使用Canvas繪制一個空心圓

arc()：創(chuàng)建弧或曲線（用于創(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對象
 ctx.beginPath();//標(biāo)志開始一個路徑
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
 ctx.stroke()
 </script>

演示圖

圖2

八、繪制一個實心圓

<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

九、繪制一個空心矩形

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"); //獲得畫板數(shù)據(jù)
 var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設(shè)置線條顏色
 ctx.strokeRect(100,100,100,100); //線條畫矩形
 </script>

演示圖

圖4

十、繪制一個實心的矩形

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");//獲得畫板數(shù)據(jù)
var ctx=can.getContext('2d'); //獲得筆刷
 ctx.strokeStyle="blue"; //設(shè)置線條顏色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//線條畫矩形
 </script>

演示圖

圖5

在線咨詢

上一篇：ID Selectors - 聲明式 CSS 選擇的
下一篇：為什么7-11便利店每個產(chǎn)品都能做到爆款？