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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

4、TML5 有效。· 簡單易記的編碼類型 你現在可以在 meta 標簽中使用 "charset"：<head>    <meta charset="utf-8" />    <title>HTML5 Document</title></head><body></body></html>你可以使用HTML5 Validator 或 W3C Markup Validation Service 來測

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

6、6+）支持。Javascript 提供了document.createElement(tagName) 的方法，讓你可以用來創(chuàng)建新的 HTML5 標簽。代替自己創(chuàng)建這些元素，你還可以用HTML5 Enabling Script 或 IE Print Protector 這些腳本將幫助 IE 正常處理 HTML5 元素的渲染。你可能會想到添加 CSS Reset 到這些新元素上。這里是一些可以用在你以 HTML5 為基礎的項目的CSS Reset：o HTML5 Reset CSSo Reset5簡單代碼示例: 兼容 IE 的 HTML5 頁面布局<!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;注意：沒有一個 div 標簽，id 或 class 屬性被使用到 簡潔、小巧和更語義化的標記 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 來檢測你的 HTML5 文檔。注意：這個示例在 IE6 下并未正常顯示。這只是因為我使用 CSS child combinators 來避免使用額外的 class。你可以在 IE6 下用自己的 CSS ，像其他瀏覽器一樣處理 HTML5 標記。o 不用腳本實現 IE 對 HTML5 樣式控制表單增強HTML5 為表單提供了幾個新的屬性、input 類型和標簽。到目前為

28、止，只有 Opera 對HTML5 有比較好的支持。你因此應該下載 Opera 來查看大部分新特性如何工作。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>值得高興的是盡管支持有限，使用這些特性也是個不錯的選擇。因為新的 INPUT 類型會漂亮地降級為 TEXT 類 INPUT（譯注：INPUT 的默認 type 為 text）。且記住現今你仍可以折衷使用 Javascript 控制表單（這個技巧是指首先檢測瀏覽器自身支持，然后才是使用折衷方法）。簡單代碼示例：列出一些今天你可以拿來測試的新特性<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 中的出現的特性，都順利地運行在 Opera 上，但你仍需要使用 Chrome 或 Safari 來看其他小部分功能的實際運行狀態(tài)（View Demo）。不需要插件的視頻和音頻HTML5 對視頻和音頻特性規(guī)范文檔的制定是被討論最多的。除瀏覽器自帶支持的明顯好處外，評論點集中在瀏覽器提供商對音頻/視頻格式的不同選擇。如果你準備使用HTML5的 和 ，使你熟悉下面這些視頻/音頻的解碼器和瀏覽器支持是非常重要的：o 音頻: ogg (ogg, oga), mp3, wav, AACo 視頻: ogg (ogv), H.264 (mp4)另外你還需要留意一下 G

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

59、ari 什么都不能播放。簡單代碼示例：音頻標記 (View Demo)<audio controls>        <source src="demo-audio.ogg" />        <source src="demo-audio.mp3" /></audio>簡單代碼示例：視頻標記 (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，不然，即使格式對了，也可能播放不了盡管相對于要依賴第三方插件已經邁了一大步，但上面提供的示例，只是一個開始。由于各個瀏覽都提供了不同外觀的控制欄，你可能會希望改變他們以適應你的設計。看看下面例子如何利用 DOM API 來創(chuàng)造一個屬于你自己的自定義控制欄。簡單代碼示例：擁有自定義控制欄的視頻 (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 來為音頻/視頻做更多。而且如果你樂意添加一些其他的東西，將會把這個帶向一個完全不同的級別。例如，你可以把視頻放到了 HTML5 canvas 元素中。這將會允許你讀取一個視頻的像素數據、控制、和幀，并做一些你想做的好玩的東東。基于 JavaScript 的 2D 繪畫HTML5 中最讓人興奮的特性是 <canvas> 那個用來作畫的東東。在你

65、的頁面中插入 canvas 就像插入其他標記一樣平常，但你將需要一些編程的經驗來繪制形狀、圖表、動畫、游戲、圖片作品等。在除 IE 外的所有現代瀏覽器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 這個 Javascript 解決方案來為 IE 添加這個新特性。簡單示例代碼: 基于指令的 HTML5 Canvas 2D 繪畫 (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>讓內容可編輯如果你想讓頁面的

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

溫馨提示

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

評論

0/150

提交評論