HTML5學(xué)習(xí)教程大全_第1頁
HTML5學(xué)習(xí)教程大全_第2頁
HTML5學(xué)習(xí)教程大全_第3頁
HTML5學(xué)習(xí)教程大全_第4頁
HTML5學(xué)習(xí)教程大全_第5頁
已閱讀5頁，還剩256頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第第76頁,總261頁05-16-2011HTML5 學(xué)習(xí)教程目錄HTML5介紹 5教程前言 14HTML5簡介 15HTML5視頻 17HTML5音頻 21HTML5Canvas 25HTML5Web存儲 36HTML5Input類型 41HTML5表單元素 51HTML5表單屬性 56HTML5參考手冊 70HTML5標(biāo)準(zhǔn)屬性 79HTML5事件屬性 79HTML5標(biāo)簽 85<!--...-->標(biāo)簽 85<!DOCTYPE>標(biāo)簽 86<abbr>標(biāo)簽 91<acronym>標(biāo)簽 92<address>標(biāo)簽 93<applet>標(biāo)簽 95<area>標(biāo)簽 95<article>標(biāo)簽 98<aside>標(biāo)簽 100<audio>標(biāo)簽 100<b>標(biāo)簽 101<base>標(biāo)簽 102<basefont>標(biāo)簽 103<bdo>標(biāo)簽 104<blockquote>標(biāo)簽 105<body>標(biāo)簽 105<br/>標(biāo)簽 106<button>標(biāo)簽 107<canvas>標(biāo)簽 109<caption>標(biāo)簽 <center>標(biāo)簽 <em><strong><dfn><code><samp><kbd><var><cite>標(biāo)簽 <col>標(biāo)簽 <colgroup>標(biāo)簽 <command>標(biāo)簽 <datalist>標(biāo)簽 120<dd>標(biāo)簽 121<del>標(biāo)簽 123<details>標(biāo)簽 124<dir>標(biāo)簽 125<div>標(biāo)簽 125<dl>標(biāo)簽 126<dt>標(biāo)簽 128<embed>標(biāo)簽 130<fieldset>標(biāo)簽 131<figcaption>標(biāo)簽 133<figure>標(biāo)簽 134<font>標(biāo)簽 135<footer>標(biāo)簽 135<form>標(biāo)簽 137<frame>標(biāo)簽 139<frameset>標(biāo)簽 139<h1>至<h6>標(biāo)簽 140<head>標(biāo)簽 141<header>標(biāo)簽 143<hgroup>標(biāo)簽 144<hr>標(biāo)簽 146<html>標(biāo)簽 147<i>標(biāo)簽 149<iframe>標(biāo)簽 150<img>標(biāo)簽 151<input>標(biāo)簽 155<ins>標(biāo)簽 162<keygen>標(biāo)簽 164<em><strong><dfn><code><samp><kbd><var><cite>標(biāo)簽 165<label>標(biāo)簽 168<legend>標(biāo)簽 170<li>標(biāo)簽 172<link>標(biāo)簽 177<map>標(biāo)簽 179<mark>標(biāo)簽 181<menu>標(biāo)簽 182<meta>標(biāo)簽 183<meter>標(biāo)簽 188<nav>標(biāo)簽 190<noframes>標(biāo)簽 191<object>標(biāo)簽 196<ol>標(biāo)簽 197<optgroup>標(biāo)簽 200<option>標(biāo)簽 201<output>標(biāo)簽 204<p>標(biāo)簽 205<param>標(biāo)簽 209<pre>標(biāo)簽 210<progress>標(biāo)簽 212<q>標(biāo)簽 213<rp>標(biāo)簽 214<rt>標(biāo)簽 216<ruby>標(biāo)簽 217<s>標(biāo)簽 218<script>標(biāo)簽 219<section>標(biāo)簽 221<select>標(biāo)簽 222<small>標(biāo)簽 225<source>標(biāo)簽 225<span>標(biāo)簽 226<strike>標(biāo)簽 227<style>標(biāo)簽 227<sub>和<sup>標(biāo)簽 230<summary>標(biāo)簽 231<table>標(biāo)簽 232<tbody>標(biāo)簽 242<td>標(biāo)簽 244<textarea>標(biāo)簽 246<tfoot>標(biāo)簽 248<th>標(biāo)簽 250<thead>標(biāo)簽 253<time>標(biāo)簽 254<title>標(biāo)簽 256<tr>標(biāo)簽 257<tt>標(biāo)簽 258<u>標(biāo)簽 258<ul>標(biāo)簽 259<video>標(biāo)簽 260聲明：相關(guān)測試代碼僅用于學(xué)習(xí)參考。筆者不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而聲明：相關(guān)測試代碼僅用于學(xué)習(xí)參考。筆者不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險與筆者無關(guān)。當(dāng)使用資料時，代表您已接受了本站的使用條款和隱私條款。本資料的所有內(nèi)容僅供測試，對任何法律問題及風(fēng)險不承擔(dān)任何責(zé)任。HTML5介紹新標(biāo)記HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記。一些過時的HTML4標(biāo)記將被取消。其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS取代。<video>標(biāo)記定義和用法：<video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。實(shí)例：一段簡單的HTML5視頻<videosrc="movie.ogg"controls="controls">您的瀏覽器不支持video標(biāo)簽。</video>各系統(tǒng)與瀏覽器支持的視頻格式：<th>HTML5 </th>HTML5草案的前身名為WebApplications1.0。於2004新標(biāo)記HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記。一些過時的HTML4標(biāo)記將被取消。其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS取代。<video>標(biāo)記定義和用法：<video>標(biāo)簽定義視頻，比如電影片段或其他視頻流。實(shí)例：一段簡單的HTML5視頻<videosrc="movie.ogg"controls="controls">您的瀏覽器不支持video標(biāo)簽。</video>各系統(tǒng)與瀏覽器支持的視頻格式：<th>HTML5 </th>操作系統(tǒng)瀏覽器支持度WindowsInternetExplorer6不支持如果安裝了GoogleChromeFrame，支持HTML5InternetExplorer7不支持如果安裝了GoogleChromeFrame，支持HTML5InternetExplorer8不支持如果安裝了GoogleChromeFrame，支持HTML5InternetExplorer9支持(mp4,webm*)*如果安裝了VP8解碼器Firefox<3.5不支持Firefox3.5,3.6支持（ogg）Firefox4支持（webm,ogg）Chrome<3不支持Chrome3,4,5支持（mp4,ogg）Chrome6支持（mp4,webm,ogg）Opera<10.5不支持Opera10.5支持（ogg）Opera10.6支持（webm,ogg）Opera11支持（webm,ogg）Safari3.1,4,5支持（mp4）MacSafari<3.1不支持Safari3.1,4,5支持（mp4）Firefox<3.5不支持Firefox3.5,3.6支持（ogg）Firefox4支持（webm,ogg）Chrome<3不支持Chrome3,4,5支持（mp4,ogg）Chrome6支持（mp4,webm,ogg）Opera<10.5不支持Opera10.5支持（ogg）Opera10.6支持（webm,ogg）Opera11支持（webm,ogg）LinuxFirefox<3.5不支持Firefox3.5,3.6支持（ogg）Firefox4支持（webm,ogg）Chrome<3不支持Chrome3,4,5支持（mp4,ogg）Chrom支持（mp4,webm,ogg）Opera<10.5不支持Opera10.5支持（ogg）Opera10.6支持（webm,ogg）Opera11支持（webm,ogg）Konqueror<4.4不支持Konqueror4.4+支持（ogg）iOS(iPhone,iOS3,4)Safari支持（mp4）早期版本（iOS1,2）不支持HTML5視頻(iPad,iOS3.2)Safari支持（mp4）AndroidAndroid2.1,2.2支持（mp4）Android2.3支持（mp4）ogg=帶有Thedora視頻編碼和Vorbis音頻編碼的Ogg文件。mp4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件。<audio>標(biāo)記定義和用法<audio>標(biāo)簽定義聲音，比如音樂或其他音頻流。實(shí)例：一段簡單的HTML5音頻<audiosrc="someaudio.wav">您的瀏覽器不支持audio標(biāo)簽。</audio>音頻格式：當(dāng)前，audio元素支持三種音頻格式：IE8Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis√√√MP4√√Wav√√√<canvas>標(biāo)記定義和用法：<canvas>標(biāo)簽定義圖形，比如圖表和其他圖像。實(shí)例：如何通過canvas元素來顯示一個紅色的矩形：<canvasid="myCanvas"></canvas><scripttype="text/javascript">varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>什么是Canvas？HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。編輯本段HTML5:標(biāo)簽的改變HTML5吸取了XHTML2一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的HTML標(biāo)簽header,footer,dialog,aside,figure等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在這些場合是一律使用div的。HTML5還包含了一些將內(nèi)容和展示分離的努力，開發(fā)者們也許會驚訝，b和i標(biāo)簽依然存在，但它們的意義已經(jīng)和之前有所不同，這些標(biāo)簽的意義只是為了將一段文字標(biāo)識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike這些標(biāo)簽則被完全去掉了。新標(biāo)準(zhǔn)適用了一些全新的表單輸入對象，包括日期，URL，Email地址，其它的對象則增加了對非拉丁字符的支持。HTML5還引入了微數(shù)據(jù)，一種使用機(jī)器可以識別的標(biāo)簽標(biāo)注內(nèi)容的方法，使語義Web的處理更為簡單?？偟膩碚f，這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁，這樣的網(wǎng)頁對搜索引擎，對讀屏軟件等更為友好。編輯本段新應(yīng)用程序接口（API）除了原先的DOM接口，HTML5增加了更多API,如：1.用于即時2D繪圖的Canvas標(biāo)簽2.定時媒體回放3.離線數(shù)據(jù)庫存儲4.文檔編輯5.拖拽控制6.瀏覽歷史管理編輯本段與HTML4的不同之處新的解析順序新的元素：section,video,progress,nav,meter,time,aside,canvasinput元素的新屬性：日期和時間，email,url。新的通用屬性：ping,charset,async全域?qū)傩裕篿d,tabindex,repeat。移除元素：center,font,strike。HTML5有兩大特點(diǎn):首先，強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能。除了可描繪二維圖形外，還準(zhǔn)備了用于播放視頻和音頻的標(biāo)簽。其次，追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。編輯本段異常處理HTML5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設(shè)計時保證舊的瀏覽器能夠安全的忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的詳細(xì)規(guī)則，力圖讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回相同的結(jié)果。編輯本段html5標(biāo)簽按字母順序排列的標(biāo)簽列表?4:指示在HTML4.01中定義了該元素?5:指示在HTML5中定義了該元素標(biāo)簽描述45<!--...-->定義注釋。45<!DOCTYPE>定義文檔類型。45<a>定義超鏈接。45<abbr>定義縮寫。45<acronym>HTML5中不支持。定義首字母縮寫。4<address>定義地址元素。45<applet>HTML5中不支持。定義applet。4<area>定義圖像映射中的區(qū)域。45<article>定義article。5<aside>定義頁面內(nèi)容之外的內(nèi)容。5<audio>定義聲音內(nèi)容。5<b>定義粗體文本。45<base>定義頁面中所有鏈接的基準(zhǔn)URL。45<basefont>HTML5中不支持。請使用CSS代替。4<bdo>定義文本顯示的方向。45<big>HTML5中不支持。定義大號文本。4<blockquote>定義長的引用。45<body>定義body元素。45<br>插入換行符。45<button>定義按鈕。45<canvas>定義圖形。5<caption>定義表格標(biāo)題。45<center>HTML5中不支持。定義居中的文本。4<cite>定義引用。45<code>定義計算機(jī)代碼文本。45<col>定義表格列的屬性。45<colgroup>定義表格列的分組。45<command>定義命令按鈕。5<datalist>定義下拉列表。5<dd>定義定義的描述。45<del>定義刪除文本。45<details>定義元素的細(xì)節(jié)。5<dfn>定義定義項(xiàng)目。45<dir>HTML5中不支持。定義目錄列表。4<div>定義文檔中的一個部分。45<dl>定義定義列表。45<dt>定義定義的項(xiàng)目。45<em>定義強(qiáng)調(diào)文本。45<embed>定義外部交互內(nèi)容或插件。5<fieldset>定義fieldset。45<figcaption>定義figure元素的標(biāo)題。5<figure>定義媒介內(nèi)容的分組，以及它們的標(biāo)題。5<font>HTML5中不支持。4<footer>定義section或page的頁腳。5<form>定義表單。45<frame>HTML5中不支持。定義子窗口（框架。4<frameset>HTML5中不支持。定義框架的集。4<h1>to<h6>定義標(biāo)題1到標(biāo)題6。45<head>定義關(guān)于文檔的信息。45<header>定義section或page的頁眉。5<hgroup>定義有關(guān)文檔中的section的信息。5<hr>定義水平線。45<html>定義html文檔。45<i>定義斜體文本。45<iframe>定義行內(nèi)的子窗口（框架。45<img>定義圖像。45<input>定義輸入域。45<ins>定義插入文本。45<keygen>定義生成密鑰。5<isindex>HTML5中不支持。定義單行的輸入域。4<kbd>定義鍵盤文本。45<label>定義表單控件的標(biāo)注。45<legend>定義fieldset中的標(biāo)題。45<li>定義列表的項(xiàng)目。45<link>定義資源引用。45<map>定義圖像映射。45<mark>定義有記號的文本。5<menu>定義菜單列表。45<meta>定義元信息。45<meter>定義預(yù)定義范圍內(nèi)的度量。5<nav>定義導(dǎo)航鏈接。5<noframes>HTML5中不支持。定義noframe部分。4<noscript>定義noscript部分。45<object>定義嵌入對象。45<ol>定義有序列表。45<optgroup>定義選項(xiàng)組。45<option>定義下拉列表中的選項(xiàng)。45<output>定義輸出的一些類型。5<p>定義段落。45<param>為對象定義參數(shù)。45<pre>定義預(yù)格式化文本。45<progress>定義任何類型的任務(wù)的進(jìn)度。5<q>定義短的引用。45<rp>定義若瀏覽器不支持ruby元素顯示的內(nèi)容。5<rt>定義ruby注釋的解釋。5<ruby>定義ruby注釋。5<s>HTML5中不支持。定義加刪除線的文本。4<samp>定義樣本計算機(jī)代碼。45<script>定義腳本。45<section>定義section。5<select>定義可選列表。45<small>定義小號文本。45<source>定義媒介源。5<span>定義文檔中的section。45<strike>HTML5中不支持。定義加刪除線的文本。4<strong>定義強(qiáng)調(diào)文本。45<style>定義樣式定義。45<sub>定義下標(biāo)文本。45<summary>定義details元素的標(biāo)題。5<sup>定義上標(biāo)文本。45<table>定義表格。45<tbody>定義表格的主體。45<td>定義表格單元。45<textarea>定義textarea。45<tfoot>定義表格的腳注。45<th>定義表頭。45<thead>定義表頭。45<time>定義日期/時間。5<title>定義文檔的標(biāo)題。45<tr>定義表格行。45<tt>HTML5中不支持。定義打字機(jī)文本。4<u>HTML5中不支持。定義下劃線文本。4<ul>定義無序列表。45<var>定義變量。45<video>定義視頻。5<xmp>HTML5中不支持。定義預(yù)格式文本。4HTML5正在改變WebHTML5是近十年來Web標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個成熟的應(yīng)用平臺，在這個平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管HTML5的實(shí)現(xiàn)還有很長的路要走，但HTML5正在改變Web。HTML最近的一次升級是1999年12月發(fā)布的HTML4.01。自那以后，發(fā)生了很多事。最初的瀏覽器戰(zhàn)爭已經(jīng)結(jié)束Netscape灰飛煙滅IE5作為贏家后來又發(fā)展到IE6,IE7,IE8到IE9MozillaFirefox從Netscape的死灰中誕生，并躍居第二位。蘋果和Google各自推出自己的瀏覽器，而小家碧玉的Opera仍然嚶嚶嗡嗡地活著，并以推動Web標(biāo)準(zhǔn)為己命。我們甚至在手機(jī)和游戲機(jī)上有了真正的Web體驗(yàn)，感謝Opera，iPhone以及Google已經(jīng)推出的Android。然而這一切，僅僅讓W(xué)eb標(biāo)準(zhǔn)運(yùn)動變得更加混亂，HTML5和其它標(biāo)準(zhǔn)被束之高閣，結(jié)果，HTML5一直以來都是以草案的面目示人。于是，一些公司聯(lián)合起來，成立了一個叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本應(yīng)用技術(shù)工作組-WHATWG）的組織，他們將重新揀起HTML5。這個組織獨(dú)立于W3C，成員來自Mozilla，KHTML/Webkit項(xiàng)目組，Google，Apple，Opera以及微軟。盡管HTML5草案不會在短期內(nèi)獲得認(rèn)可，但HTML5總算得以延續(xù)。HTML5將帶來什么？以下是HTML5草案中最激動人心的部分：全新的，更合理的Tag，多媒體對象將不再全部綁定在object或embedTag中，而是視頻有視頻的Tag，音頻有音頻的Tag。本地數(shù)據(jù)庫。這個功能將內(nèi)嵌一個本地的SQL數(shù)據(jù)庫，以加速交互式搜索，緩存以及索引功能。同時，那些離線Web程序也將因此獲益匪淺。不需要插件的富動畫。Canvas對象將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著我們可以脫離Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。一些最新的瀏覽器，除了IE，已經(jīng)開始支持Canvas。瀏覽器中的真正程序。將提供API實(shí)現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種圖形用戶界面的能力。內(nèi)容修飾Tag將被剔除，而使用CSS。理論上講，HTML5是培育新Web標(biāo)準(zhǔn)的土壤，讓各種設(shè)想在他的組織者之間分享，但HTML5目前仍處于試驗(yàn)階段。Mozilla的技術(shù)副總裁MikeShaver說HTML5是一個被寄予厚望的概念它既是WHTWG組織的實(shí)驗(yàn)田，又是W3C的標(biāo)準(zhǔn)之路。Shaver認(rèn)為，Mozilla的興趣和WHATWG實(shí)驗(yàn)相吻合，Mozilla在HTML5工作組中非常活躍，我們對一些早期的細(xì)則進(jìn)行實(shí)驗(yàn)并將成熟的結(jié)果提交W3C。在過去的幾年，Mozilla隨著各種出現(xiàn)的新標(biāo)準(zhǔn)，推出多個富有前瞻性的項(xiàng)目，包括Prism，一個用于離線運(yùn)行Web程序的系統(tǒng)，以及Weave，一個數(shù)據(jù)存儲框架。Shaver說，HTML5運(yùn)動肇始于對W3C的不耐煩，Web標(biāo)準(zhǔn)中的很多進(jìn)展都因W3C將重點(diǎn)從HTML轉(zhuǎn)移到XML而停滯不前。很多基于XML架構(gòu)的新技術(shù)被設(shè)計出來替代HTML，Shaver說，這不是一條正確的道路，人們不應(yīng)象黑瞎子掰玉米把樣一邊掰一邊丟。HTML5的新實(shí)驗(yàn)在Firefox以及基于Webkit的Safari和Chrome瀏覽器中逐漸得到強(qiáng)化，但仍有不少問題。Chrome的開發(fā)者DarinFisher說，Chrome仍在襁褓中時，就不得不面臨幾個問題，盡管使用的是最新的Webkit，HTML5的本地數(shù)據(jù)庫功能在Chrome的初期版本中并沒有實(shí)現(xiàn)。因?yàn)镃hrome的沙箱機(jī)制和Webkit的數(shù)據(jù)庫功能有沖突。而由于Chrome屬于秘密開發(fā)，Chrome的開發(fā)人員也不便參與Webkit的開發(fā)。我們要想保守Chrome的秘密，就無法參與Webkit社區(qū)。Fisher說，我們很希望可以在某些方面給Webkit以幫助，我們擁有眾多經(jīng)驗(yàn)豐富的開發(fā)者，我們很想知道人們目前遇到的挑戰(zhàn)并樂意提供幫助。隨著Chrome的發(fā)布，F(xiàn)isher說他的團(tuán)隊成員有時會和Webkit的人一起吃飯，有些人私下里還成了好朋友。Fisher稱，他們迫切地想同其他Webkit開發(fā)組一起工作解決離線數(shù)據(jù)庫的問題。Chrome里面還包含Google的開源Gears技術(shù)，用來實(shí)現(xiàn)與HTML5類似的離線功能。Gears可以看作已有API的替代品，F(xiàn)isher說，HTML5對新瀏覽器來說是非常好的東西，但絕大多數(shù)用戶還使用舊瀏覽器。Gears可以讓那些舊瀏覽器也獲得這樣的API，我們正在為HTML5版API提供兼容。Gears兼容性非常好，它正成為將HTML5帶向人們桌面的另外一條途徑。目前，絕大多數(shù)工作由Apple，Mozilla,Opera,Google以及Trolltech展開。微軟在干什么？IE因其對Web標(biāo)準(zhǔn)的遲鈍而聞名，更不要說HTML5。但I(xiàn)E8可能會做出改變。微軟IE平臺與WHAT工作組主席ChrisWilson在郵件中稱，我們希望我們現(xiàn)在開始的工作可以在以在HTML工作組創(chuàng)建一套測試系統(tǒng)。Wilson說，IE開發(fā)組仍然對HTML5的一些提議感到擔(dān)憂。我覺得工作組的所有成員都會承認(rèn)我們還有很多事要做。目前處于Beta版的IE9，已經(jīng)包含HTML5的諸多新功能。它擁有一個跨文檔消息系統(tǒng)，本地存儲，以及一些離線事件來檢測網(wǎng)絡(luò)的中斷。但還有些功能還未提上議程，如Canvas。HTML5非常龐大，仍處在開發(fā)階段，我認(rèn)為瀏覽器廠商應(yīng)當(dāng)盡快達(dá)成一致，而每個瀏覽器的具體實(shí)現(xiàn)時間可以自己選擇。Web開發(fā)者和瀏覽器廠商會同意Wilson的下面這句話，這確切無疑是一個激動人心的時刻，我們希望看到Web成為新的應(yīng)用平臺。教程前言HTML5是下一代的HTML。本教程向您講解HTML5中的新特性，以及每種標(biāo)簽的使用。每一章中的實(shí)例通過我們的HTML編輯器，您能夠編輯HTML，然后點(diǎn)擊按鈕來查看結(jié)果。實(shí)例<!DOCTYPEHTML><html><body><videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video></body></html>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><videowidth="320"height="240"controls="controls"><sourcesrc="/i/movie.ogg"type="video/ogg"><sourcesrc="/i/movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video></body></html>實(shí)例TIY中的代碼用來查看它是如何工作的?，F(xiàn)在就開始學(xué)習(xí)HTML5！HTML5簡介HTML5是下一代的HTML。什么是HTML5？HTML5將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。HTML的上一個版本誕生于1999年。自從那以后，Web世界已經(jīng)經(jīng)歷了巨變。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。HTML5是如何起步的？HTML5是W3C與WHATWG合作的結(jié)果。編者注：W3C指WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟。編者注：WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表單和應(yīng)用程序，而W3C專注于XHTML2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個新版本的HTML。為HTML5建立的一些規(guī)則：新特性應(yīng)該基于HTML、CSS、DOM以及JavaScript。減少對外部插件的需求（比如Flash）更優(yōu)秀的錯誤處理更多取代腳本的標(biāo)記HTML5應(yīng)該獨(dú)立于設(shè)備開發(fā)進(jìn)程應(yīng)對公眾透明新特性HTML5中的一些有趣的新特性：用于繪畫的canvas元素用于媒介回放的video和audio元素對本地離線存儲的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search瀏覽器支持最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9將支持某些HTML5特性。HTML5視頻許多時髦的網(wǎng)站都提供視頻。HTML5提供了展示視頻的標(biāo)準(zhǔn)。Web上的視頻直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)。今天，大多數(shù)視頻是通過插件（比如Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過video元素來包含視頻的標(biāo)準(zhǔn)方法。視頻格式當(dāng)前，video元素支持三種視頻格式：格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg=帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件MPEG4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件WebM=帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件如何工作如需在HTML5中顯示視頻，您所有需要的是：<videosrc="movie.ogg"controls="controls"></video>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><videosrc="/i/movie.ogg" width="320"height="240"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video></body></html>control屬性供添加播放、暫停和音量控件。包含寬度和高度屬性也是不錯的主意。<video>與</video>之間插入的內(nèi)容是供不支持video元素的瀏覽器顯示的：實(shí)例<videosrc="movie.ogg"width="320"height="240"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><videowidth="320"height="240"controls="controls"><sourcesrc="/i/movie.ogg"type="video/ogg"><sourcesrc="/i/movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video></body></html>上面的例子使用一個Ogg文件，適用于Firefox、Opera以及Chrome瀏覽器。要確保適用于Safari瀏覽器，視頻文件必須是MPEG4類型。video元素允許多個source元素。source元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：實(shí)例<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><videowidth="320"height="240"controls="controls"><sourcesrc="/i/movie.ogg"type="video/ogg"><sourcesrc="/i/movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video></body></html>InternetExplorerInternetExplorer8不支持video元素。在IE9中，將提供對使用MPEG4的video元素的支持。<video>標(biāo)簽的屬性屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。heightpixels設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的視頻的URL。widthpixels設(shè)置視頻播放器的寬度。相關(guān)頁面參考手冊：HTML5<video>標(biāo)簽--/HTML5/HTML5_video.aspHTML5音頻HTML5提供了播放音頻的標(biāo)準(zhǔn)。Web上的音頻直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。今天，大多數(shù)音頻是通過插件（比如Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5規(guī)定了一種通過audio元素來包含音頻的標(biāo)準(zhǔn)方法。audio元素能夠播放聲音文件或者音頻流。音頻格式當(dāng)前，audio元素支持三種音頻格式：IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis√√√MP3√√√Wav√√√如何工作如需在HTML5中播放音頻，您所有需要的是：<audiosrc="song.ogg"controls="controls"></audio>control屬性供添加播放、暫停和音量控件。<audio>與</audio>之間插入的內(nèi)容是供不支持audio元素的瀏覽器顯示的：實(shí)例<audiosrc="song.ogg"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><audiosrc="/i/song.ogg"controls="controls">Yourbrowserdoesnotsupporttheaudioelement.</audio></body></html>上面的例子使用一個Ogg文件，適用于Firefox、Opera以及Chrome瀏覽器。要確保適用于Safari瀏覽器，音頻文件必須是MP3或Wav類型。audio元素允許多個source元素。source元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：實(shí)例<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.</audio>TIY親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><audiocontrols="controls"><sourcesrc="/i/song.ogg"type="audio/ogg"><sourcesrc="/i/song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudioelement.</audio></body></html>InternetExplorerInternetExplorer8不支持audio元素。在IE9中，將提供對audio元素的支持。<audio>標(biāo)簽的屬性屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。srcurl要播放的音頻的URL。相關(guān)頁面參考手冊：HTML5<audio>標(biāo)簽--/HTML5/HTML5_audio.aspHTML5Canvascanvas元素用于在網(wǎng)頁上繪制圖形。什么是Canvas？HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域，您可以控制其每一像素。canvas擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。創(chuàng)建Canvas元素向HTML5頁面添加canvas元素。規(guī)定元素的id、寬度和高度：<canvasid="myCanvas"width="200"height="100"></canvas>通過JavaScript來繪制canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript內(nèi)部完成：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>JavaScript使用id來尋找canvas元素：varc=document.getElementById("myCanvas");然后，創(chuàng)建context對象：varcxt=c.getContext("2d");getContext("2d")對象是內(nèi)建的HTML5對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。下面的兩行代碼繪制一個紅色的矩形：cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);fillStyle方法將其染成紅色，fillRect方法規(guī)定了形狀、位置和尺寸。理解坐標(biāo)上面的fillRect方法擁有參數(shù)(0,0,150,75)。意思是：在畫布上繪制150x75的矩形，從左上角開始(0,0)。如下圖所示，畫布的X和Y坐標(biāo)用于在畫布上對繪畫進(jìn)行定位。實(shí)例：把鼠標(biāo)懸停在矩形上可以看到坐標(biāo),親自試一試吧，代碼如下：<!DOCTYPEHTML><html><head><styletype="text/css">body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;}</style><scripttype="text/javascript">functioncnvs_getCoordinates(e){x=e.clientX;y=e.clientY;document.getElementById("xycoordinates").innerHTML="Coordinates:("+x+","+y+")";}functioncnvs_clearCoordinates(){document.getElementById("xycoordinates").innerHTML="";}</script></head><bodystyle="margin:0px;"><p>把鼠標(biāo)懸停在下面的矩形上可以看到坐標(biāo)：</p><divid="coordiv"style="float:left;width:199px;height:99px;border:1pxsolid#c3c3c3"onmousemove="cnvs_getCoordinates(event)"onmouseout="cnvs_clearCoordinates()"></div><br/><br/><br/><divid="xycoordinates"></div></body></html>更多Canvas實(shí)例下面的在canvas元素上進(jìn)行繪畫的更多實(shí)例：實(shí)例-線條通過指定從何處開始，在何處結(jié)束，來繪制一條線：JavaScript代碼：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script>canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script></body></html>實(shí)例-圓形通過規(guī)定尺寸、顏色和位置，來繪制一個圓：JavaScript代碼：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script></body></html>實(shí)例-漸變使用您指定的顏色來繪制漸變背景：JavaScript代碼：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");vargrd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");vargrd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script></body></html>實(shí)例-圖像把一幅圖像放置到畫布上：JavaScript代碼：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");varimg=newImage()img.src="flower.png"cxt.drawImage(img,0,0);</script>canvas元素：<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");varimg=newImage()img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script></body>相關(guān)頁面參考手冊：HTML5<canvas>標(biāo)簽--http://www.w3schoo/HTML5/HTML5_canvas.asp參考手冊：HTMLDOMCanvas對象--http://www.w3schoo/htmldom/dom_obj_canvas.aspHTML5Web存儲在客戶端存儲數(shù)據(jù)HTML5提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage-沒有時間限制的數(shù)據(jù)存儲sessionStorage-針對一個session的數(shù)據(jù)存儲之前，這些都是由cookie完成的。但是cookie不適合大量數(shù)據(jù)的存儲，因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞，這使得cookie速度很慢而且效率也不高。在HTML5中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5使用JavaScript來存儲和訪問數(shù)據(jù)。localStorage方法localStorage方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。如何創(chuàng)建和訪問localStorage：實(shí)例<scripttype="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/javascript">localStorage.lastname="Smith";document.write("Lastname:"+localStorage.lastname);</script></body></html>下面的例子對用戶訪問頁面的次數(shù)進(jìn)行計數(shù)：實(shí)例<scripttype="text/javascript">if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1;}else{localStorage.pagecount=1;}document.write("Visits"+localStorage.pagecount+"time(s).");</script>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/javascript">localStorage.lastname="Smith";document.write("Lastname:"+localStorage.lastname);</script></body></html>sessionStorage方法sessionStorage方法針對一個session進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。如何創(chuàng)建并訪問一個sessionStorage：實(shí)例<scripttype="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/javascript">if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1;}else{localStorage.pagecount=1;}document.write("Visits:"+localStorage.pagecount+"time(s).");</script><p>刷新頁面會看到計數(shù)器在增長。</p><p>請關(guān)閉瀏覽器窗口，然后再試一次，計數(shù)器會繼續(xù)計數(shù)。</p></body></html>下面的例子對用戶在當(dāng)前session中訪問頁面的次數(shù)進(jìn)行計數(shù)：實(shí)例<scripttype="text/javascript">if(sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;}else{sessionStorage.pagecount=1;}document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");</script>親自試一試吧，代碼如下：<!DOCTYPEHTML><html><body><scripttype="text/javascript">if(sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;}else{sessionStorage.pagecount=1;}document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");</script><p>刷新頁面會看到計數(shù)器在增長。</p><p>請關(guān)閉瀏覽器窗口，然后再試一次，計數(shù)器已經(jīng)重置了。</p></body></html>HTML5Input類型HTML5新的Input類型HTML5擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。本章全面介紹這些新的輸入類型：emailurlnumberrangeDatepickers(date,month,week,time,datetime,datetime-local)searchcolor瀏覽器支持InputtypeIEFirefoxOperaChromeSafariemailNo4.09.010.0NourlNo4.09.010.0

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論