淘寶網首頁已全部使用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/">
//XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "1/DTD/">
//HTML5:
<!DOCTYPE html>//
這種寫法會觸發瀏覽器的標準模式。備註:doctype它不是寫給瀏覽器看的,Doctype是寫給驗證器看的。讓驗證器按照該doctype來驗證我的文件。
二、指定文件的字元編碼的寫法:
程式碼如下
//HTML 4.01:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
//XHTML 1.0:
<?xml version="1.0" encoding="UTF-8" ?>
//HTML5:
<meta charset="utf-8"/>
備註:此簡短寫法,它不僅適用於最新版本的瀏覽器,只要是今天還有人在用的瀏覽器都同樣有效。
HTML5其他簡潔寫法:
程式碼如下
<link href="#" rel="stylesheet"/>
//無需再寫type="text/css",否則那就是重複自己了
<script></script>
//無需再寫使用的指令碼語言 type="text/javascript"
HTML5設計原理二:支援已有的內容<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</p>
<img src=foo alt=bar>
<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:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
備註:這種寫法其實早就已經存在於瀏覽器中了,但以前這樣寫是不合乎規範的,現在我們把標準改了,允許你這樣寫了。
HTML5設計原理四:求真務實新增語義元素涉及頭部(header)、腳部(footer)、分割槽(section)、文章(article)……
程式碼如下
//HTML 4.01 XHTML 1.0:
<p id="header">...</p>
<p id="navigation">...</p>
<p id="main">...</p>
<p id="sidebar">...</p>
<p id="footer">...</p>
</body>
//HTML5:
<body>
<header>...</header>
<nav>...</nav>
<p id="main">...</p>
<aside>...</aside>
<footer>...</footer>
</body>
備註:新元素section、article、aside和nav代表了一種新的內容模型,一種HTML中前所未有的.內容模型——給內容分割槽。
將新元素作為類的替代品更有價值,因為這些元素在一個頁面中不止可以使用一次,而是可以使用多次,可巢狀使用。
其中最為通用的section,可以說是與內容最相關的一個。而article則是一種特殊的section。Aside呢,是一種特殊的section。最後,Nav也是一種特殊的section。
/
程式碼如下
/HTML 4.01 XHTML 1.0:
<p class="item">
<h2>...</h2>
<p class="meta">...</p>
<p class="content">
...
</p>
<p class="links">...</p>
</p>
//HTML5:
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<p class="content">
...
</p>
<nav class="links">...</nav>
備註:在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>
<source src="4">
<source src="">
<object data="">
<a href="4">download</a>
</object>
</video>
備註:兩者要兼顧,無論是HTML5,還是Flash:
如果瀏覽器支援video元素,也支援H264,沒什麼好說的,用第一個視訊。
如果瀏覽器支援video元素,支援Ogg,那麼用第二個視訊。
如果瀏覽器不支援video元素,那麼就要試試Flash影片了。
如果瀏覽器不支援video元素,也不支援Flash,我還給出了下載連結。
遵循另一個設計原理,即梅特卡夫定律(Metcalfe’s Law):