html5入門設計原理

時間：2024-09-10 16:47:48 HTML5

html5入門設計原理

　　淘寶網首頁已全部使用HTML5，擁抱變化才是王道。HTML5設計原理是什么？下面yjbys小編為大家分享HTML5設計幾個原理，希望對大家學習HTML5有幫助！

　　HTML5

　　1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本應用技術工作組，WHATWG)，完全脫離W3C。

　　2、W3C在2007年組建了HTML5工作組，在WHATWG工作成果的基礎上繼續開展工作。

　　HTML5設計原理一：避免不必要的復雜性

　　代碼如下

　　一、DOCTYPE的寫法：

　　//HTML 4.01：

　　<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "4/strict.dtd">

　　//XHTML 1.0：

　　<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "1/DTD/xhtml1-strict.dtd">

　　//HTML5：

　　<!DOCTYPE html>//

　　這種寫法會觸發瀏覽器的標準模式。備注：doctype它不是寫給瀏覽器看的,Doctype是寫給驗證器看的。讓驗證器按照該doctype來驗證我的文檔。

　　二、指定文檔的字符編碼的寫法：

　　代碼如下

　　//HTML 4.01：

　　//XHTML 1.0:

　　<?xml version="1.0" encoding="UTF-8" ?>

　　//HTML5:

　　備注：此簡短寫法，它不僅適用于最新版本的`瀏覽器，只要是今天還有人在用的瀏覽器都同樣有效。

　　HTML5其他簡潔寫法：

　　代碼如下

　　//無需再寫type="text/css"，否則那就是重復自己了

　　//無需再寫使用的腳本語言 type="text/javascript"

　　HTML5設計原理二：支持已有的內容

　　<p class="foo">Hello world</p>

　　<p class="foo">Hello world

　　<P CLASS="foo">Hello world</p>

　　<p class=foo>Hello world</p>

　　備注：HTML5支持已存在的各種不嚴謹的寫法。

　　在JavaScript，你可以在每條語句末尾加上分號，但不是必需的'，因為JavaScript會自動插入分號……JSlint確實是個非常棒的工具,規范統一JavaScript編碼風格，在團隊項目非常有用。

　　HTML5設計原理三：解決現實的問題

　　給整塊內容(含多個塊級元素)加個鏈接

　　代碼如下

　　//HTML 4.01 XHTML 1.0:

　　<h2><a href="/path/to/resource">Headline text</a></h2>

　　<p><a href="/path/to/resource">Paragraph text.</a></p>

　　//HTML5:

　　<h2>Headline text</h2>

　　<p>Paragraph text.</p>

　　備注：這種寫法其實早就已經存在于瀏覽器中了，但以前這樣寫是不合乎規范的，現在我們把標準改了，允許你這樣寫了。

　　HTML5設計原理四：求真務實

　　新增語義元素涉及頭部(header)、腳部(footer)、分區(section)、文章(article)……

　　代碼如下

　　//HTML 4.01 XHTML 1.0:

　　</body>

　　//HTML5:

　　<body>

　　</body>

　　備注：新元素section、article、aside和nav代表了一種新的內容模型，一種HTML中前所未有的內容模型——給內容分區。

　　將新元素作為類的替代品更有價值，因為這些元素在一個頁面中不止可以使用一次，而是可以使用多次，可嵌套使用。

　　其中最為通用的section，可以說是與內容最相關的一個。而article則是一種特殊的.section。Aside呢，是一種特殊的section。最后，Nav也是一種特殊的section。

　　代碼如下

　　/HTML 4.01 XHTML 1.0:

　　...

　　</p>

　　</p>

　　//HTML5:

　　...

　　</p>

　　備注：在HTML5中，只要你建立一個新的內容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必擔心這個塊里的標題在整個頁面中應該排在什么級別;H2、H3，都沒有問題。

　　HTML5設計原理五：平穩退化

　　漸進增強的另一面就是平穩退化。

　　使用type屬性增強表單：

　　代碼如下
input type="number"

　　input type="search"

　　input type="range"

　　input type="email"

　　input type="date"

　　input type="url"

　　備注：

　　現有的瀏覽器無法理解這些新type值的，但在它們看到自己不理解的type值時，會將type的`值解釋為text。

　　HTML5還為輸入元素增加了新的屬性，比如placeholder(占位符)，就是用于在文本框中預先放一些文本。無需JavaScript去實現，太完美了。

　　HTML5視頻對Flash視頻(video元素)：

　　代碼如下 <video>

　　<a href="movie.mp4">download</a>

　　</object>

　　</video>

　　備注：兩者要兼顧，無論是HTML5，還是Flash:

　　如果瀏覽器支持video元素，也支持H264，沒什么好說的，用第一個視頻。

　　如果瀏覽器支持video元素，支持Ogg，那么用第二個視頻。

　　如果瀏覽器不支持video元素，那么就要試試Flash影片了。

　　如果瀏覽器不支持video元素，也不支持Flash，我還給出了下載鏈接。

　　遵循另一個設計原理，即梅特卡夫定律(Metcalfe’s Law)：

【html5入門設計原理】相關文章：

HTML5的發展08-15