解讀 HTML5：建議、技巧和技術(shù)_第1頁(yè)
解讀 HTML5：建議、技巧和技術(shù)_第2頁(yè)
解讀 HTML5：建議、技巧和技術(shù)_第3頁(yè)
解讀 HTML5：建議、技巧和技術(shù)_第4頁(yè)
解讀 HTML5：建議、技巧和技術(shù)_第5頁(yè)
已閱讀5頁(yè)，還剩12頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、HTML5中國(guó)：解讀 HTML5：建議、技巧和技術(shù)現(xiàn)今我們能用 HTML5 嗎，能用它做些什么呢，是否真的是 Flash 殺手？想必你也注意到了這些日漸增長(zhǎng)且常被問(wèn)起的類似問(wèn)題，被討論著，甚至被回答過(guò)。在我看來(lái)，你必須自己回答這些基本的問(wèn)題。這篇文章的本意是想幫你通過(guò)一些基本指南的學(xué)習(xí)，以輕松學(xué)習(xí)代碼模板。一旦你熟悉了這些基本，并想更進(jìn)一學(xué)習(xí)，你還將會(huì)找到更多提供了建議、技巧和技術(shù)的有用資源。HTML 5 特性官方詳細(xì)的文檔是尋找 HTML5 特性的最好地方，當(dāng)然你還可以輕松通過(guò) W3Schools 來(lái)學(xué)習(xí)HTML5 標(biāo)簽。我們將會(huì)在文章中涉及到以下的

2、特性：· 語(yǔ)義化標(biāo)記· Form 表單增強(qiáng)功能· 視頻 / 音頻· 畫(huà)布（Canvas）· 可編輯內(nèi)容· 拖放· 穩(wěn)健的數(shù)據(jù)存儲(chǔ)檢測(cè)瀏覽器支持在你開(kāi)始嘗試 HTML5之前，需要知道各主流瀏覽器的支持狀況。這些有用的資源，將可以幫助你向著正軌走：· 何時(shí)能用· 網(wǎng)頁(yè)設(shè)計(jì)師的瀏覽器支持列表· HTML5 測(cè)試· 布局引擎對(duì)比你還可以運(yùn)行 Javascript（用Javascript 檢測(cè)瀏覽器特性）來(lái)檢測(cè) HTML5 特性的支持。你還應(yīng)該用用Modernizr： 一個(gè)非常不錯(cuò)的檢測(cè) HTM

3、L5/CSS3 本地支持的 Javascript 庫(kù)。如果你選擇用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。你可能也會(huì)想留意不斷變化的"瀏覽器市場(chǎng)份額分享" 這些信息對(duì)于你決定用何種解決或折衷的方法將會(huì)是非常必要的。值得注意的變更點(diǎn)除了新的特征，你還應(yīng)該記下這些重要的變更點(diǎn)：· 簡(jiǎn)潔的 DOCTYPE HTML5 只需一個(gè)簡(jiǎn)潔的文檔類型：。它有意不使用版本，因此文檔將會(huì)適用所有版本的HTML。· 簡(jiǎn)單易記的語(yǔ)言標(biāo)簽 你并不需要在 中使用 xmlns 或 xml:lang 標(biāo)記。 將對(duì) H

4、TML5 有效。· 簡(jiǎn)單易記的編碼類型 你現(xiàn)在可以在 meta 標(biāo)簽中使用 "charset"：<head>    <meta charset="utf-8" />    <title>HTML5 Document</title></head><body></body></html>你可以使用HTML5 Validator 或 W3C Markup Validation Service 來(lái)測(cè)

5、試你的 HTML5 文檔。語(yǔ)義化標(biāo)記HTML5 新增的一些新標(biāo)簽除了不僅僅是更具語(yǔ)義的 標(biāo)簽的替代品，并不提供額外的功能。這些都是新增的標(biāo)簽：<articl>、<section>、<aside>、<hgroup>、<header>, <footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>。這些標(biāo)簽被除了IE 外的所有現(xiàn)代瀏覽器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.

6、6+）支持。Javascript 提供了document.createElement(tagName) 的方法，讓你可以用來(lái)創(chuàng)建新的 HTML5 標(biāo)簽。代替自己創(chuàng)建這些元素，你還可以用HTML5 Enabling Script 或 IE Print Protector 這些腳本將幫助 IE 正常處理 HTML5 元素的渲染。你可能會(huì)想到添加 CSS Reset 到這些新元素上。這里是一些可以用在你以 HTML5 為基礎(chǔ)的項(xiàng)目的CSS Reset：o HTML5 Reset CSSo Reset5簡(jiǎn)單代碼示例: 兼容 IE 的 HTML5 頁(yè)面布局<!doctype html><

7、;html lang="en"><head>    <meta charset="utf-8" />    <title>HTML5 Semantic Markup Demo: Cross Browser</title>    <link rel="stylesheet" href="html5reset.css" type="text/css"

8、/>    <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />    <!-if lt IE 9>        <script src="html5.js"></script>    <!endif-&g

9、t;</head><body>    <header>        <hgroup>            <h1>Page Header</h1>            <h2>Page Su

10、b Heading</h2>        </hgroup>    </header>    <nav>        <ul>            <li><a href="#">

11、Home</a></li>            <li><a href="#">Projects</a></li>            <li><a href="#">Portfolio</a></li> 

12、           <li><a href="#">Profile</a></li>            <li><a href="#">Contact</a></li>      

13、0; </ul>    </nav>    <article>        <header>            <h1>Article Heading</h1>          &

14、#160; <time datetime="2010-05-05" pubdate>May 5th, 2010</time>        </header>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>      

15、0; <section>            <header>                <h1>Section Heading</h1>            </he

16、ader>            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>            <footer>           

17、;     <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>            </footer>        </section>        <sectio

18、n>            <header>                <h1>Section Heading</h1>            </header> 

19、;           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>            <figure>             

20、0;  <img src="item-1.png" alt="Club">                <img src="item-2.png" alt="Heart">             

21、60;  <img src="item-3.png" alt="Spade">                <img src="item-4.png" alt="Diamond">             

22、;   <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>            </figure>            <p>Ut sapien enim, porttitor id feugiat non, ultrice

23、s non odio</p>            <footer>                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>    

24、;        </footer>        </section>        <footer>            Article Footer        &

25、lt;/footer>    </article>    <aside>        <header>            <h1>Siderbar Heading</h1>        </header>

26、        <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>    </aside>    <footer>        Page Footer    </footer></body></html&g

27、t;注意：沒(méi)有一個(gè) div 標(biāo)簽，id 或 class 屬性被使用到 簡(jiǎn)潔、小巧和更語(yǔ)義化的標(biāo)記 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 來(lái)檢測(cè)你的 HTML5 文檔。注意：這個(gè)示例在 IE6 下并未正常顯示。這只是因?yàn)槲沂褂?CSS child combinators 來(lái)避免使用額外的 class。你可以在 IE6 下用自己的 CSS ，像其他瀏覽器一樣處理 HTML5 標(biāo)記。o 不用腳本實(shí)現(xiàn) IE 對(duì) HTML5 樣式控制表單增強(qiáng)HTML5 為表單提供了幾個(gè)新的屬性、input 類型和標(biāo)簽。到目前為

28、止，只有 Opera 對(duì)HTML5 有比較好的支持。你因此應(yīng)該下載 Opera 來(lái)查看大部分新特性如何工作。o 新的INPUT類型 color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, 和 urlo 新屬性 required, autofocus, pattern, list, autocomplete 和 placeholdero 新元素 <keygen>, <datalist>, <output>, <meter>

29、; 和 <progress>值得高興的是盡管支持有限，使用這些特性也是個(gè)不錯(cuò)的選擇。因?yàn)樾碌?INPUT 類型會(huì)漂亮地降級(jí)為 TEXT 類 INPUT（譯注：INPUT 的默認(rèn) type 為 text）。且記住現(xiàn)今你仍可以折衷使用 Javascript 控制表單（這個(gè)技巧是指首先檢測(cè)瀏覽器自身支持，然后才是使用折衷方法）。簡(jiǎn)單代碼示例：列出一些今天你可以拿來(lái)測(cè)試的新特性<form>    <fieldset>        <legend>New

30、Attributes</legend>        <p>            <label>Required:</label>            <input type="text" name="html5requi

31、ed" required="true">            <small>Works in Opera & Chrome</small>        </p>        <p>      

32、      <label>AutoFocus:</label>            <input type="text" name="html5autofocus" autofocus="true">            <

33、small>Works in Opera, Chrome & Safari</small>        </p>        <p>            <label>PlaceHolder:</label>     &

34、#160;      <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">            <small>Works in Chrome & Safari</small>    

35、    </p>        <p>            <label>Input Pattern:</label>            <input type="text" pattern=&quo

36、t;0-9A-Z3" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>            <small>Works in Opera & Chrome</small>        </p>

37、;        <p>            <label>Multiple Files:</label>            <input type="file" name="html5multiplefileupload"

38、; multiple>            <small>Works in Chrome, Safari & Firefox</small>        </p>        <p>        &#

39、160;   <label>List:</label>            <input type="text" name="html5textwithdatalist" list="colors">            <datalist id=&qu

40、ot;colors">                <option value="Red">                <option value="Green">    &

41、#160;           <option value="Blue">            </datalist>            <small>Works in Opera</small> 

42、;       </p>    </fieldset>    <fieldset>        <legend>New Input Types</legend>        <p>       

43、     <label>Email:</label>            <input type="email" name="html5email">            <small>Works in Opera</small>

44、60;       </p>        <p>            <label>URL:</label>            <input type="url" na

45、me="html5url">            <small>Works in Opera</small>        </p>        <p>          

46、  <label>Number:</label>            <input type="number" name="html5number" min="1" max="10" step="1" value="1">        &#

47、160;   <small>Works in Opera</small>        </p>        <p>            <label>Range:</label>      &

48、#160;     <input type="range" name="html5range" min="-100" max="100" value="0" step="10">            <small>Works in Opera, Chrome & Safari</small

49、>        </p>        <p>            <label>Time:</label>            <input type="time

50、" step="900" name="html5time">            <small>Works in Opera</small>        </p>        <p>     

51、;       <label>Date:</label>            <input type="date" name="html5date">            <small>Works in Opera</sm

52、all>        </p>        <p>            <label>Month:</label>            <input type="

53、month" name="html5month">            <small>Works in Opera</small>        </p>        <p>       &#

54、160;    <label>Week:</label>            <input type="week" name="html5week">            <small>Works in Opera</small> &#

55、160;      </p>        <p>            <label>DateTime:</label>            <input type="datetime&quo

56、t; name="html5datetime">            <small>Works in Opera</small>        </p>    </fieldset>    <div><button>Submit</button>&

57、lt;/div>在我們的 DEMO 中的出現(xiàn)的特性，都順利地運(yùn)行在 Opera 上，但你仍需要使用 Chrome 或 Safari 來(lái)看其他小部分功能的實(shí)際運(yùn)行狀態(tài)（View Demo）。不需要插件的視頻和音頻HTML5 對(duì)視頻和音頻特性規(guī)范文檔的制定是被討論最多的。除瀏覽器自帶支持的明顯好處外，評(píng)論點(diǎn)集中在瀏覽器提供商對(duì)音頻/視頻格式的不同選擇。如果你準(zhǔn)備使用HTML5的 和 ，使你熟悉下面這些視頻/音頻的解碼器和瀏覽器支持是非常重要的：o 音頻: ogg (ogg, oga), mp3, wav, AACo 視頻: ogg (ogv), H.264 (mp4)另外你還需要留意一下 G

58、oogle 的 VP8 視頻解碼，這個(gè)將被作為一個(gè)開(kāi)源格式來(lái)結(jié)束（格式選擇的）紛爭(zhēng)。HTML5 提供的一個(gè)解決方案是，讓你可以指定多個(gè)不同格式的源文件，以便于用戶瀏覽器選擇它認(rèn)識(shí)的文件。對(duì)于 < IE9 和舊瀏覽器，你將需要一個(gè)折衷的解決方案。當(dāng)你第一次嘗試 HTML5 的音頻/視頻，你可能會(huì)想知道這些可能對(duì)你有幫助的東東：o 你的服務(wù)器必須支持你打算提供的音頻/視頻的 MIME 格式。你將需要檢查一下其在本地服務(wù)器上是否被支持。o 如果你使用 Safari 來(lái)檢測(cè) HTML5 的音頻/視頻支持，需要安裝 QuickTime Player，沒(méi)有QuickTime Player 的 Saf

59、ari 什么都不能播放。簡(jiǎn)單代碼示例：音頻標(biāo)記 (View Demo)<audio controls>        <source src="demo-audio.ogg" />        <source src="demo-audio.mp3" /></audio>簡(jiǎn)單代碼示例：視頻標(biāo)記 (View Demo)<video width="320&

60、quot; height="240" controls preload="none" poster="videoframe.jpg">    <source src="demo-video.mp4" type="video/mp4" />    <source src="demo-video.ogv" type="video/ogg" /></video>

61、記得加上type，不然，即使格式對(duì)了，也可能播放不了盡管相對(duì)于要依賴第三方插件已經(jīng)邁了一大步，但上面提供的示例，只是一個(gè)開(kāi)始。由于各個(gè)瀏覽都提供了不同外觀的控制欄，你可能會(huì)希望改變他們以適應(yīng)你的設(shè)計(jì)?？纯聪旅胬尤绾卫?DOM API 來(lái)創(chuàng)造一個(gè)屬于你自己的自定義控制欄。簡(jiǎn)單代碼示例：擁有自定義控制欄的視頻 (View Demo)<video width="320" height="240" preload="none" poster="videoframe.jpg">  

62、0; <source src="demo-video.mp4" type="video/mp4" />    <source src="demo-video.ogv" type="video/ogg" /></video><script>    var video = document.getElementsByTagName('video')0;    func

63、tion toggleMute()         video.muted = !video.muted;    </script><p>    <a href="JavaScript:video.play();">Play</a> |    <a href="JavaScript:video.pause();">Pause</a&

64、gt; |    <a href="JavaScript:toggleMute();">Sound On/Off</a></p>你還可以利用 DOM API 來(lái)為音頻/視頻做更多。而且如果你樂(lè)意添加一些其他的東西，將會(huì)把這個(gè)帶向一個(gè)完全不同的級(jí)別。例如，你可以把視頻放到了 HTML5 canvas 元素中。這將會(huì)允許你讀取一個(gè)視頻的像素?cái)?shù)據(jù)、控制、和幀，并做一些你想做的好玩的東東?；?JavaScript 的 2D 繪畫(huà)HTML5 中最讓人興奮的特性是 <canvas> 那個(gè)用來(lái)作畫(huà)的東東。在你

65、的頁(yè)面中插入 canvas 就像插入其他標(biāo)記一樣平常，但你將需要一些編程的經(jīng)驗(yàn)來(lái)繪制形狀、圖表、動(dòng)畫(huà)、游戲、圖片作品等。在除 IE 外的所有現(xiàn)代瀏覽器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 這個(gè) Javascript 解決方案來(lái)為 IE 添加這個(gè)新特性。簡(jiǎn)單示例代碼: 基于指令的 HTML5 Canvas 2D 繪畫(huà) (View Demo)<!doctype html><html lang="en"><head>

66、0;   <meta charset="utf-8" />    <title>HTML5 Canvas Demo</title>    <link rel="stylesheet" href="html5reset.css" type="text/css" />    <link rel="stylesheet" href=&quo

67、t;html5simple.css" type="text/css" />    <!-if lt IE 9>        <script src="html5.js"></script>        <script src="excanvas.js"></script> 

68、60;  <!endif->        <script type="text/javascript">        function draw()            var canvas = document.getElementById('mycanvas');

69、60;           if (canvas.getContext)                var ctx = canvas.getContext('2d');             

70、60;  / Draw Rectangle                ctx.fillStyle = "rgb(255,0,0)"                ctx.fillRect (10, 10, 100, 100);   &#

71、160;            / Draw Circle                ctx.fillStyle = "rgb(0,255,0)"              &

72、#160; ctx.beginPath();                ctx.arc(125,100,50,0,Math.PI*2,true);                ctx.fill();        

73、        ctx.closePath();                / Draw Custom Shape With Lines                ctx.fillStyle = "rgb(0,0

74、,255)"                ctx.beginPath();                ctx.moveTo(125,100);            

75、;    ctx.lineTo(175,50);                ctx.lineTo(225,150);                ctx.fill();        

76、        ctx.closePath();                / Draw Image From External File                var myImage = new Image();&#

77、160;               myImage.onload = function()                    ctx.drawImage(myImage, 220, 10);      &

78、#160;                         myImage.src = "sample.jpg"                     

79、60;      </script>        <style type="text/css">            canvas                 bord

80、er: 5px solid #ccc;                background: #000;                    </style></head><body onload="draw();"&

81、gt;    <header>        <h1>HTML5 Canvas Demo</h1>    </header>    <figure>        <canvas id="mycanvas" width="300" height="200

82、">Fallback content, in case the browser does not support Canvas.</canvas>        <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>    </figure></body></html>讓內(nèi)容可編輯如果你想讓頁(yè)面的

83、某個(gè)地方，允許用戶編輯頁(yè)面，所有的你需要做的事就是添加 contenteditable 屬性到父容器中。你可能曾在 WYSIWYG 編輯器中看過(guò)。這個(gè)屬性是 HTML5 的一部分，且它幾乎被所有主流瀏覽器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：值得注意的是設(shè)置 contenteditable="true" 只是允許用戶編輯、刪除、插入內(nèi)容，并不會(huì)自動(dòng)提供其他類似于 WYSIWYG 編輯器的保存或應(yīng)用樣式的功能。你將需要自己用 Javascript 來(lái)添加這些功能。簡(jiǎn)單示例代碼: 有加粗、傾斜和下劃線功能的基本編輯器 (View Demo)<!doctype html><html lang="en"><head>    <meta charset="utf-8" />    <title>HTML5 ContentEditable Demo&

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論