[導讀] 這篇文章是來自alimama的ued的一篇關於設計理念的文章,主要是講目前開始瀏覽的html5入門之設計原理,有需要的朋友可以參考一下哦。 HTML5和CSS3的時代到來了,新版2011版淘寶網首頁已全部使用HTML5,擁抱變化才
本文章是來自alimama的ued的一篇關於設計理念的文章,主要是講目前開始瀏覽的html5入門設計原理,有需要的朋友可以參考一下喔。
HTML5和CSS3的時代到來了,新版2011版淘寶網首頁已全部使用HTML5,擁抱變化才是王道。為之漫筆翻譯的很好,看了一遍後,感覺理解了很多,強烈推薦其他做開發的童鞋尤其前端也來看看。
不只讓我摸清了html4,xhtml1.0, xhtml2.0, html5之間的關係,也了解為何會出現HTML5,同時,加緊推進在專案中應用HTML5。
-------------------------------------------- ------------------------------------
著名的阿西莫夫機器人三大法則:
機器人不得傷害人類,或袖手旁觀人類受傷害。
機器人必須服從人類命令,除非命令違反第一法則。
機器人必須自衛,只要不違反第一和第二法則。
-------------------------------------------- ------------------------------------
xhtml1.0與html4.0相同點:
兩個規範的內容是一樣的;
詞彙表是一樣的;
所有的元素是一樣;
所有的屬性也都是一樣的;
xhtml1.0與html4. 0唯一不同點:
XHTML 1.0要求使用XML語法(嚴格的編碼風格)
//所有屬性都必須使用小寫字母;
//所有元素也必須使用小寫字母;
/ /所有屬性值都必須加引號;
//你還得記著使用結束標籤,記著對img和br要使用自結束標籤。
XHTML 1.1與xhtml1.0唯一的變更:
把文件標記為XML文件
//XML的錯誤處理模型:解析器如果遇到錯誤,停止解析。
//不能理解XML的瀏覽器,使用者直接看不到這個網頁了。
XHTML 2特點(這個規範沒有完成):
仍然使用XML錯誤處理模型,你必須保證以XML文檔類型發送文檔;
有意不再向後兼容已有的HTML的各個版本,開發人員和瀏覽器廠商永遠不會支援它。
真正廣泛應用的設計原則:
發送時要保守;接收時要開放。
//身為專業人士,在發送文件的時候,我們會盡量保守一些,盡量採用最佳實踐,盡量確保文件格式良好。
//但從瀏覽器的角度說,它們必須以開放的姿態去接收任何文件。
-------------------------------------------- --------------------------------------
HTML5
1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本應用技術工作小組,WHATWG),完全脫離W3C。
2、W3C在2007年組成了HTML5工作小組,並在WHATWG工作成果的基礎上繼續開展工作。
-------------------------------------------- ------------------------------------
HTML5設計原理一:避免不必要的複雜性
程式碼如下 | 複製程式碼 |
一、DOCTYPE的寫法: //XHTML 1.0: //HTML5: |
這種寫法會觸發瀏覽器的標準模式。備註:doctype它不是寫給瀏覽器看的,Doctype是寫給驗證器看的。讓驗證器按照該doctype來驗證我的文件。
二、指定文件的字元編碼的寫入:
程式碼如下 | 複製程式碼 |
#//HTML 4.01: #//XHTML 1.0: //HTML5: |
備註:此簡短寫法,它不僅適用於最新版本的瀏覽器,只要是今天還有人在用的瀏覽器都同樣有效。
HTML5其他簡潔寫法:
程式碼如下 | 複製程式碼 |
##< link href="#" rel="stylesheet"/> //無需再寫type="text/css",否則那就是重複自己了 Hello world Hello world Hello world # Hello world |
在JavaScript,你可以在每個語句末尾加上分號,但不是必需的,因為JavaScript會自動插入分號…JSlint確實是個非常棒的工具,規範統一JavaScript編碼風格,在團隊專案非常有用。
HTML5設計原理三:解決現實的問題
為整塊內容(含多個區塊級元素)加個連結
複製程式碼 | |
#//HTML 4.01 XHTML 1.0:Headline text< < ;p>Paragraph text. //HTML5: Paragraph text. |
#備註:這種寫法其實早就已經存在於瀏覽器中了,但以前這樣寫是不合乎規範的,現在我們把標準改了,允許你這樣寫了。
-------------------------------------------- --------------------------------------
HTML5設計原理四:求真務實
新增語意元素涉及頭部(header)、腳部(footer)、分區(section)、文章(article)…
程式碼如下 | 複製程式碼 |
//HTML 4.01 XHTML 1.0: ... ... |
#//HTML5 :
備註:新元素section、article、aside和nav代表了一個新的內容模型,一個HTML中前所未有的內容模型-給內容分區。
將新元素作為類別的替代品更有價值,因為這些元素在一個頁面中不只可以使用一次,而是可以使用多次,可嵌套使用。
其中最為通用的section,可以說是與內容最相關的一個。而article則是一種特殊的section。 Aside呢,是一種特殊的section。最後,Nav也是一種特殊的section。
/
程式碼如下 | 複製程式碼 |
/HTML 4.01 XHTML 1.0: ...
... | ##。
...
header>
...
備註:在HTML5中,只要你建立一個新的內容區塊,不管用section、article、aside、nav,還是別的元素,都可以在其中使用H1,而不必擔心這個區塊裡的標題在整個頁面中應該排在什麼級別;H2 、H3,都沒有問題。 | -------------------------------------------- -------------------------------------- |
使用type屬性增強表單: 程式碼如下 |
input type=" number"
input type="search"
input type="email"
input type="date"
備註: | 現有的瀏覽器無法理解這些新type值的,但在它們看到自己不理解的type值時,會將type的值解釋為text。 | HTML5也為輸入元素增加了新的屬性,例如placeholder(佔位符),就是用來在文字方塊中預先放置一些文字。無需JavaScript去實現,太完美了。
HTML5影片對Flash影片(video元素): 程式碼如下 | 複製程式碼
以上是html5入門設計原理解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!