標籤：
設計原理
不是規範裡都包含什麼，而是規範裡為什麼會包含它們，以及在設計這個規範的時候，設計者們是怎麼看待這些東西的。
發展史：HTML2.0——》HTML3.2——》HTML4.0.1——》XHTML1.0——》XHTML1.1和XHTML2.0的失敗——》HTML5
原理：
（1）避免不必要的複雜性HTML 4.01的doctype：
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0的doctype：
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5中doctype就簡化成：
<!DOCTYPE html>
什麼文檔一開頭就要寫doctype？它不是寫給瀏覽器看的。Doctype是寫給驗證器看的。也就是說，我之所以要在文檔一開頭寫那行XHTML 1.0的doctype，是為了告訴驗證器，讓驗證器按照該doctype來驗證我的文件。瀏覽器在接收的時候必須要開放。因此，它不會檢查任何格式類型，而驗證器會，驗證器才關心格式類型。HTML5的另一個設計原理，它必須向前向後相容，相容未來的HTML版本——不管是HTML6、HTML7，還是其他什麼——都要與當前的HTML版本，HTML5，相容。因此，把一個版本號碼放在doctype裡面沒有多大的意義，即使對驗器證也一樣。
註：當初微軟在引入CSS的時候，走在了標準的前頭，他們率先在瀏覽器中支援CSS，也推出了自己的盒模型——後來標準發布了，但標準中使用了不一樣的盒模型。他們想出了一個非常巧妙的主意。那就是利用doctype，利用有效doctype來觸發標準模式，而不是相容模型（quiks mode）。在我們向文檔中加入doctype時，就相當於聲明了“我想使用標準模式”，但這並不是發明doctype的本意。這隻是為了達到特殊的目的在利用doctype。
在文檔前面寫完doctype html是在Internet Explorer中觸發標準模式的最少字元數目。
還有一個例子，同樣可以說明規範是如何省略不必要的複雜性，避免不必要的複雜性的。如果前面的文檔使用的是HTML 4.01：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
在XHTML 1.0指定同樣的編碼，就得多敲一下鍵盤，因為你還得聲明meta元素位於一個開始的XML標籤中：
<?xml version="1.0" encoding="UTF-8" ?><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
在HTML5中，你要敲的字元只有：
<meta charset="utf-8">
在HTML5中，如果我使用link元素連結到一個樣式表，用rel=”stylesheet”，不用再說type=”text/css”。用了script元素，不用再說type=”text/javascript”，瀏覽器自然會假設你在使用JavaScript。避免-不必要的-複雜性。
（2）支援已有的內容元素屬性可以不區分大小寫，屬性值可以不加引號
(3) 解決現實的問題頁面中已經有了一塊內容，我想給整塊內容加個連結，怎麼辦？
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
在HTML5中，我只要簡單地把所有內容都封裝在一個連結元素中就行了。
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
它解決了一個現實的問題連結包含的都是區塊層級元素，說HTML5解決現實的問題，其本質還是“你都這樣寫了很多年了吧？現在我們把標準改了，允許你這樣寫了。
(4)求真務實
HTML5中新的語義元素就是遵循求真務實原理的反映。新增的元素不算多，談不上無限的擴充性，但卻不失為一件好事。儘管數量屈指可數，但意義卻非同一般。這些新元素涉及頭部（header）、腳部（footer）、分區（section）、文章（article）……，相
(5)平穩退化<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
上面的代碼中包含了4個不同的層次。
1、如果瀏覽器支援video元素，也支援H264，沒什麼好說的，用第一個視頻。
2、如果瀏覽器支援video元素，支援Ogg，那麼用第二個視頻。
3、如果瀏覽器不支援video元素，那麼就要試試Flash影片了。
4、如果瀏覽器不支援video元素，也不支援Flash，我還給出了下載連結。
一旦遇到衝突，終端使用者優先，其次是作者，其次是實現者，其次標準制定者，最後才是理論上的完滿。
Drupal社區曾聯絡馬克·博爾頓（Mark Boulton）和麗莎·雷賀特（Leisa Reichilt）設計Drupal的介面。他們計劃遵循一些設計原理。為此，他們並沒有紙上談兵，而是經過了一段時間的思考和醞釀，提出指導將來工作的4個設計原理：
參考： <http://kb.cnblogs.com/page/79308/>簡化最常見的任務，讓不常見的任務不至於太麻煩。
只為80%設計。
給內容建立者最大的權利。
預設設定智能化。
HTML5到底是什嗎？
一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個部分，不單單只是HTML部分而已，CSS 3和JavaScript也有許多的創新，讓整個網頁程式功能更加繽紛。
HTML5的技術組成
離線功能
HTML5透過JavaScript提供了數種不同的離線儲存功能，相對於傳統的Cookie而言有更好的彈性以及架構，並且可以儲存更多的內容。
即時通訊
以往網站由於HTTP協議以及瀏覽器的設計，即時的互動性相當的受限，只能使用一些技巧來「模擬」即時的通訊效果，但HTML5提供了完善的即時通訊支援。
檔案以及硬體支援
不知道大家有沒有發現，在Gmail等新的網頁程式當中，已經可以透過拖拉的方式將檔案作為郵件附件？這就是這部份HTML5檔案的功能中的Dragn Drop和File API。
語義化
語義化的網路是可以讓電腦能夠更加理解網頁的內容，對於像是搜尋引擎的最佳化（SEO）或是推薦系統可以有很大的協助。
多媒體
Audio、Video的卷標支援以及Canvas的功能應該是大家對於HTML5最熟悉的部份了，也是許多人認為Flash會被取代的主要原因。
CSS 3
CSS3支援了字型的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
JavaScript
在比較JavaScript的基本面也新增了DOM的API、和瀏覽器上下頁的紀錄修改。
而對於舊的瀏覽器安全色性而言，先前撰文介紹過的CSS3 Pie便是一個讓舊版瀏覽器也能支援CSS 3功能的JavaScript函數庫。
而Modernizer也是一個相當重要的JavaScript函數庫，提供開發人員輕鬆的方式判別目前使用者的瀏覽器是否有支援特定的HTML5功能。
來源： <http://kb.cnblogs.com/page/111338/>
HTML5學習摘錄
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
