|
|
英文原文：HTML5 fundamentals, Part 1: Getting your feet wet
HTML5是一種設(shè)計來組織web內(nèi)容的語言，其目的是通過創(chuàng)建一種標準的和直觀的UI標記語言來把web設(shè)計和開發(fā)變得容易起來。HTML5提供了各種切割和劃分頁面的手段，其允許你創(chuàng)建的切割組件不僅能用來邏輯地組織站點，而且能夠賦予網(wǎng)站聚合的能力。 HTML5可謂是“信息到網(wǎng)站設(shè)計的映射方法”，因為它體現(xiàn)了信息映射的本質(zhì)，劃分信息，并給信息加上標簽，使其變得容易使用和理解。這是HTML5富于表現(xiàn)力的語義和實用性美學(xué)的基礎(chǔ)，HTML5賦予設(shè)計者和開發(fā)者各種層面的能力來向外發(fā)布各式各樣的內(nèi)容，從簡單的文本內(nèi)容到豐富的、交互式的多媒體無不包括在內(nèi)。
HTML5提供了高效的數(shù)據(jù)管理、繪制、視頻和音頻工具，其促進了web上的和便攜式設(shè)備的跨瀏覽器應(yīng)用的開發(fā)。HTML5是驅(qū)動移動云計算服務(wù)方面的發(fā)展的技術(shù)之一，因為其允許更大的靈活性，支持開發(fā)非常精彩的交互式網(wǎng)站。其還引入了新的標簽（tag）和增強性的功能，其中包括了一個優(yōu)雅的結(jié)構(gòu)、表單的控制、API、多媒體、數(shù)據(jù)庫支持和顯著提升的處理速度等。
HTML5中的新標簽都是能高度關(guān)聯(lián)喚起的，標簽封裝了它們的作用和用法。HTML的過去版本更多的是使用非描述性的標簽，然而，HTML5擁有高度描述性的、直觀的標簽，其提供了豐富的能夠立刻讓人識別出內(nèi)容的內(nèi)容標簽。例如，被頻繁使用的< div>標簽已經(jīng)有了兩個增補進來的<section>和<article>標簽。 <video>、<audio>、<canvas>和<figure> 標簽的增加也提供了對特定類型內(nèi)容的更加精確的描述。
HTML5提供了：
1. 確切描述了其旨在要包含的內(nèi)容的標簽
2. 增強的網(wǎng)絡(luò)通信
3. 極大改善了的常用存儲
4. 運行后臺進程的Web Worker
5. 在本地應(yīng)用和服務(wù)器之間建立持續(xù)連接的WebSocket接口
6. 更好的存儲數(shù)據(jù)檢索方式
7. 加快了的頁面保存和加載速度
8. 對使用CSS3來管理GUI的支持，這意味著HTML5可以是面向內(nèi)容的
9. 改進了的瀏覽器表單處理
10. 基于SQL的數(shù)據(jù)庫API，其允許客戶端的本地存儲
11. 畫布和視頻，可在無需安裝第三方插件的情況下添加圖形和視頻
12. Geolocation API規(guī)范，其通過使用智能手機定位功能來納入移動云服務(wù)和應(yīng)用
13. 增強型的表單，其降低了下載JavaScript代碼的這種必要性，允許在移動設(shè)備和云服務(wù)之間進行更多高效的通信。
HTML5創(chuàng)建了一種更吸引用戶的體驗：使用HTML5設(shè)計的頁面能夠提供類似于桌面應(yīng)用的體驗。HTML5還通過把API功能和無處不在的瀏覽器結(jié)合起來的的方式提供了增強的多平臺開發(fā)。通過使用HTML5，開發(fā)者能夠提供一種順暢地跨越各個平臺的現(xiàn)代應(yīng)用體驗。
當(dāng)你說HTML5這個詞的時候，你使用了一個簡短的詞來表達一種持續(xù)的創(chuàng)新。新的標記、新的一套方法，以及一個基于HTML5和它的兩個與之互為補充的同仁：CSS3和JavaScript之間的相互作用的通用開發(fā)框架，這是以客戶為中心的處理現(xiàn)象的應(yīng)用的核心。除了HTML5技術(shù)的技巧和方法的許多桌面部署之外，HTML5還可以在功能豐富的web移動電話瀏覽器中實施——移動電話瀏覽器是一個正在增長的市場，Apple iPhone、Google Android和運行Palm webOS的手機的普及以至于無處不在就可以證明這一點。
HTML5的強大功能中很重要的一面是信息的映射——或說是內(nèi)容塊化（content blocking）。如果你愿意的話——這種做法會產(chǎn)生一種容易理解得多的處理過程。你可以看到，通過日益增加對web處理這一領(lǐng)域的控制，這一工具在設(shè)計和開發(fā)方面已經(jīng)變得多么的高效。
HTML5預(yù)示著這樣一些情況的出現(xiàn)，即其在文本層面上有著更高效的語義處理，以及在表單構(gòu)造和用法上有著更強大的控制。所有的這些特性和HTML5創(chuàng)新的其他許多細微之處是這一越來越占統(tǒng)治地位的范式的基礎(chǔ)。許多機構(gòu)實體，商業(yè)的和其他的——甚至許多根本不把信息的處理和通信作為他們的主要機構(gòu)活動的組織——都不同程度地被這一不斷增長的現(xiàn)象的發(fā)展所侵襲。
HTML5并不是一盞神燈，不會有精靈出現(xiàn)。然而，它的技術(shù)和方法資產(chǎn)使得其成為了一件次好的東西，僅次于擦亮一盞神燈這件事情。
規(guī)劃頁面
你將要創(chuàng)建一個簡單的web頁面。在這一過程中，我會討論幾個HTML5中引入的新標簽。為了創(chuàng)建一個高效的并且是有實效的web頁面，你必須要制定一個計劃，考慮一下想要打造的所有組件。你創(chuàng)建的網(wǎng)頁將會有如圖1所示的高層設(shè)計，頁面的設(shè)計包含了一個Header區(qū)、一個Navigation區(qū)、一個包含了三個Section區(qū)和一個Aside區(qū)的Article區(qū)，以及最后的一個Footer區(qū)。該頁面的設(shè)計目標是在Google的Chrome瀏覽器中工作，其消除了一些視覺上的混亂，這些混亂帶來的是瀏覽器兼容問題的調(diào)整，同時也妨礙到了對基礎(chǔ)結(jié)構(gòu)的理解。我們的目標是創(chuàng)建出一個清晰地描述了新的HTML5標簽的用法的頁面，展示如何使用它們來創(chuàng)建格式良好的代碼和優(yōu)雅的頁面設(shè)計。
圖1. Acme United的網(wǎng)頁的規(guī)劃
在創(chuàng)建這一頁面的過程中，我會涉及CSS3，我需要用它來正確地渲染HTML5網(wǎng)頁。CSS3對于HTML5頁面的的風(fēng)格、導(dǎo)航和一般觀感來說是必不可少的，它的一些屬性組，你可以在WsSchool的CSS3參考站點（參見參考資料一節(jié)）上找到這些屬性，其中包括了一些很有用的元素，比如說background、font、marquee和animation等。
不過，在開始構(gòu)造頁面之前，你需要學(xué)習(xí)一些新的HTML5的標簽。
Header區(qū)
Header區(qū)的例子包含了頁面標題和副標題，<header>標簽被用來創(chuàng)建頁面的Header區(qū)的內(nèi)容。除了網(wǎng)頁本身之外，<header>標簽還可以包含關(guān)于<section>和<article>的公開信息。這里創(chuàng)建的網(wǎng)頁有該頁面的一個Header區(qū)，這在高層設(shè)計中有給出，以及一個位于Article和Section區(qū)內(nèi)部的Header區(qū)。清單1提供了一個< header>標簽標記的例子。
清單1. <header>標簽的例子
<header>
<h1>標題文字</h1>
<p>文本或是圖像可放在這里</p>
<p>Logo通常也放在這個地方</p>
</header>Aside區(qū)
Acme United規(guī)劃中的Aside區(qū)可通過使用<aside>標簽來創(chuàng)建。這一標簽被看作是用來存放補充內(nèi)容的地方，這些內(nèi)容不是其所補充的一篇連續(xù)文章的組成部分。在雜志上，插入語（aside）通常被用來突出文章本身所制造的一個觀點。<aside>標簽包含的內(nèi)容可被刪除，而這不會影響到包含了該內(nèi)容的文章、章節(jié)或是頁面所要傳達的信息。
清單10提供了<aside>標簽用法的一個例子。
清單10. <aside>標簽的例子
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France< /h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
it知識庫：HTML5基礎(chǔ)，第1部分：初試鋒芒，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
