|
HTML5設(shè)計(jì)原理四：求真務(wù)實(shí)
新增語(yǔ)義元素涉及頭部（header）、腳部（footer）、分區(qū)（section）、文章（article）……
//HTML 4.01 XHTML 1.0:
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
//HTML5:
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
備注：新元素section、article、aside和nav代表了一種新的內(nèi)容模型，一種HTML中前所未有的內(nèi)容模型——給內(nèi)容分區(qū)。
將新元素作為類(lèi)的替代品更有價(jià)值，因?yàn)檫@些元素在一個(gè)頁(yè)面中不止可以使用一次，而是可以使用多次，可嵌套使用。
其中最為通用的section，可以說(shuō)是與內(nèi)容最相關(guān)的一個(gè)。而article則是一種特殊的section。Aside呢，是一種特殊的section。最后，Nav也是一種特殊的section。
//HTML 4.01 XHTML 1.0:
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
</div>
//HTML5:
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<nav class="links">...</nav>
</section>
備注：在HTML5中，只要你建立一個(gè)新的內(nèi)容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必?fù)?dān)心這個(gè)塊里的標(biāo)題在整個(gè)頁(yè)面中應(yīng)該排在什么級(jí)別；H2、H3，都沒(méi)有問(wèn)題。
HTML5設(shè)計(jì)原理五：平穩(wěn)退化
漸進(jìn)增強(qiáng)的另一面就是平穩(wěn)退化。
使用type屬性增強(qiáng)表單：
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
備注：
現(xiàn)有的瀏覽器無(wú)法理解這些新type值的，但在它們看到自己不理解的type值時(shí)，會(huì)將type的值解釋為text。
HTML5還為輸入元素增加了新的屬性，比如placeholder（占位符），就是用于在文本框中預(yù)先放一些文本。無(wú)需JavaScript去實(shí)現(xiàn)，太完美了。
HTML5視頻對(duì)Flash視頻（video元素）：
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
備注：兩者要兼顧，無(wú)論是HTML5，還是Flash。
- 如果瀏覽器支持video元素，也支持H264，沒(méi)什么好說(shuō)的，用第一個(gè)視頻。
- 如果瀏覽器支持video元素，支持Ogg，那么用第二個(gè)視頻。
- 如果瀏覽器不支持video元素，那么就要試試Flash影片了。
- 如果瀏覽器不支持video元素，也不支持Flash，我還給出了下載鏈接。
遵循另一個(gè)設(shè)計(jì)原理，即梅特卡夫定律(Metcalfe’s Law)：
網(wǎng)絡(luò)價(jià)值同網(wǎng)絡(luò)用戶(hù)數(shù)量的平方成正比。
HTML5設(shè)計(jì)原理六：最終用戶(hù)優(yōu)先
本質(zhì)上是一種解決沖突的機(jī)制
一旦遇到?jīng)_突，最終用戶(hù)優(yōu)先，其次是作者，其次是實(shí)現(xiàn)者，其次標(biāo)準(zhǔn)制定者，最后才是理論上的完滿(mǎn)。
Web的設(shè)計(jì)原理:
大多數(shù)人的意見(jiàn)和運(yùn)行的代碼。
本文鏈接：http://www.95time.cn/tech/web/2011/8281.asp 
出處：WEB前端開(kāi)發(fā)工程師的隨記
責(zé)任編輯：bluehearts
上一頁(yè) 《HTML5設(shè)計(jì)原理》讀后隨記 [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 《HTML5設(shè)計(jì)原理》讀后隨記 [3]
