- HTML5+CSS3+jQuery Mobile APP與移動網站設計從入門到精通
- 新視角文化行
- 1908字
- 2019-10-23 16:45:08
1.2 HTML5基礎
HTML5是近10年來Web標準最巨大的飛躍。和以前的版本不同,HTML5并非僅僅用來表示Web內容,它的使命是將Web帶入一個成熟的應用平臺,在這個平臺上,視頻、音頻、圖像、動畫,以及同電腦的交互都被標準化。盡管HTML5的實現還有很長的路要走,但HTML5正在改變Web。
1.2.1 HTML5概述
W3C在2010年1月22日發布了最新的HTML5工作草案。HTML5的工作組包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera及數百個其他的開發商。制定HTML5的目的是取代1999年W3C所制定的HTML4.01和XHTML1.0標準,希望能夠在網絡應用迅速發展的同時,網頁語言能夠符合網絡發展的需求。
HTML5實際上指的是包括HTML、CSS樣式和JavaScript腳本在內的一整套技術的組合,希望通過HTML5能夠輕松地實現許多豐富的網絡應用需求,而減少瀏覽器對插件的依賴,并且提供更多能有效增強網絡應用的標準集。
在HTML5中添加了許多新的應用標簽,其中包括<video>、<audio>和<canvas>等,添加這些標簽是為了使設計者能夠更輕松地在網頁中添加或處理圖像和多媒體內容。其他新的標簽還有<section>、<article>、<header>和<nav>,這些新添加的標簽是為了能夠豐富網頁中的數據內容。除了添加了許多功能強大的新標簽和屬性,還對一些標簽進行了修改,以方便適應快速發展的網絡應用。同時,也有一些標簽和屬性在HTML5標準中被去除。
1.2.2 HTML5文檔結構
HTML5的文檔結構與前面所介紹的HTML的文檔結構非常類似,基礎的文檔結構如下。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body> 頁面主體內容部分 </body> </html>
HTML5的文檔結構非常簡潔,第一行代碼<!doctype html>聲明文檔是一個HTML文檔,接下來使用<html>標簽包含頭部內容<head>標簽和主體內容<body>標簽,從而構成HTML5文檔的基本結構。
1.2.3 HTML5的優勢
對于用戶和網站開發者而言,HTML5的出現意義非常重大。因為HTML5解決了Web頁面存在的諸多問題,HTML5的優勢主要表現在以下幾個方面。
1. 化繁為簡
為了做到盡可能簡化,HTML5避免了一些不必要的復雜設計。例如,DOCTYPE聲明的簡化處理,在過去的HTML版本中,第一行的DOCTYPE過于冗長,在實際的Web開發中也沒有什么意義,而在HTML5中DOCTYPE聲明就非常簡潔。
為了讓一切變得簡單,HTML5下了很大的功夫。為了避免造成誤解,HTML5對每一個細節都有著非常明確的規范說明,不允許有任何的歧義和模糊出現。
2. 向下兼容
HTML5有著很強的兼容能力。在這方面,HTML5沒有進行顛覆性的革新,允許存在不嚴謹的寫法,如一些標簽的屬性值沒有使用英文引號括起來,標簽屬性中包含大寫字母,有的標簽沒有閉合等。然而,這些不嚴謹的錯誤處理方案在HTML5的規范中都有著明確的規定,也希望未來在瀏覽器中有一致的支持。當然,對于Web開發者來說,還是遵循嚴謹的代碼編寫規范比較好。
對于HTML5的一些新特性,如果舊的瀏覽器不支持,也不會影響頁面的顯示。在HTML規范中,也考慮了這方面的內容,如在HTML5中<input>標簽的type屬性增加了很多新的類型,當瀏覽器不支持這些類型時,默認會將其視為text。
3. 支持合理
HTML5的設計者們花費了大量的精力來研究通用的行為。例如,Google分析了上百萬份的網頁,從中提取了<div>標簽的ID名稱,很多網頁開發人員都這樣標記導航區域。
<div id="nav"> //導航區域內容 </div>
既然該行為已經大量存在,HTML5就會想辦法去改進,所以就直接增加了一個<nav>標簽,用于網頁導航區域。
4. 實用性
對于HTML無法實現的一些功能,用戶會尋求其他方法來實現,如對于繪圖、多媒體、地理位置和實時獲取信息等應用,通常會開發一些相應的插件間接地去實現。HTML5的設計者們研究了這些需求,開發了一系列用于Web應用的接口。
HTML5規范的制定是非常開放的,所有人都可以獲取草案的內容,也可以參與進來提出寶貴的意見。因為開放,所以可以得到更加全面的發展。一切以用戶需求為最終目的,所以,當用戶在使用HTML5的新功能時,會發現這正是期待已久的功能。
5. 用戶優先
在遇到無法解決的沖突時,HTML5規范會把最終用戶的訴求放在第一位。因此,HTML5的絕大部分功能都是非常實用的。用戶與開發者的重要性遠遠高于規范和理論。例如,有很多用戶都需要實現一個新的功能,HTML5規范設計者們會研究這種需求,并納入規范;HTML5規范了一套錯誤處理機制,以便當Web開發者寫了不夠嚴謹的代碼時,接納這種不嚴謹的寫法。HTML5比以前版本的HTML更加友好。
1.2.4 HTML5精簡的頭部
HTML5避免了不必要的復雜性,DOCTYPE和字符集都極大地簡化了。
DOCTYPE聲明是HTML文件中必不可少的內容,它位于HTML文檔的第一行,聲明了HTML文件遵循的規范。HTML 4.01的DOCTYPE聲明代碼如下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
這么長的一串代碼恐怕極少有人能夠默寫出來,通常都是通過復制/粘貼的方式添加這段代碼。而在HTML5中的DOCTYPE代碼則非常簡單,如下所示。
<!DOCYPT html>
這樣就簡潔了許多,不需要再復制/粘貼代碼了。同時這種聲明也標志性地讓人感覺到這是符合HTML5規范的頁面。如果使用了HTML5的DOCTYPE聲明,則會觸發瀏覽器以標準兼容的模式來顯示頁面。
字符集的聲明也是非常重要的,它決定了頁面文件的編碼方式。在過去,都是使用如下的方式來指定字符集的,代碼如下。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5對字符集的聲明也進行了簡化處理,簡化后的聲明代碼如下。
<meta charset="utf-8">
在HTML5中,以上兩種字符集的聲明方式都可以使用,這是由HTML5向下兼容的原則決定的。
- Learning C# by Developing Games with Unity 2020
- Computer Vision for the Web
- ASP.NET MVC4框架揭秘
- Java異步編程實戰
- Effective C#:改善C#代碼的50個有效方法(原書第3版)
- Python自動化運維快速入門
- Git高手之路
- 老“碼”識途
- Kotlin Standard Library Cookbook
- Learning ELK Stack
- Protocol-Oriented Programming with Swift
- SQL 經典實例
- R數據科學實戰:工具詳解與案例分析
- JavaScript+jQuery網頁特效設計任務驅動教程
- UML2面向對象分析與設計(第2版)