- 相關(guān)推薦
html5入門(mén)設計原理
淘寶網(wǎng)首頁(yè)已全部使用HTML5，擁抱變化才是王道。HTML5設計原理是什么？下面yjbys小編為大家分享HTML5設計幾個(gè)原理，希望對大家學(xué)習HTML5有幫助！
HTML5
1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本應用技術(shù)工作組，WHATWG)，完全脫離W3C。
2、W3C在2007年組建了HTML5工作組，在WHATWG工作成果的基礎上繼續開(kāi)展工作。
HTML5設計原理一：避免不必要的復雜性
代碼如下
一、DOCTYPE的寫(xiě)法：
//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>//
這種寫(xiě)法會(huì )觸發(fā)瀏覽器的標準模式。備注：doctype它不是寫(xiě)給瀏覽器看的,Doctype是寫(xiě)給驗證器看的。讓驗證器按照該doctype來(lái)驗證我的文檔。
二、指定文檔的字符編碼的寫(xiě)法：
代碼如下
//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"/>
備注：此簡(jiǎn)短寫(xiě)法，它不僅適用于最新版本的`瀏覽器，只要是今天還有人在用的瀏覽器都同樣有效。
HTML5其他簡(jiǎn)潔寫(xiě)法：
代碼如下
<link href="#" rel="stylesheet"/>
//無(wú)需再寫(xiě)type="text/css"，否則那就是重復自己了
<script></script>
//無(wú)需再寫(xiě)使用的腳本語(yǔ)言 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支持已存在的各種不嚴謹的寫(xiě)法。
在JavaScript，你可以在每條語(yǔ)句末尾加上分號，但不是必需的'，因為JavaScript會(huì )自動(dòng)插入分號……JSlint確實(shí)是個(gè)非常棒的工具,規范統一JavaScript編碼風(fēng)格，在團隊項目非常有用。
HTML5設計原理三：解決現實(shí)的問(wèn)題
給整塊內容(含多個(gè)塊級元素)加個(gè)鏈接
代碼如下
//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>
備注：這種寫(xiě)法其實(shí)早就已經(jīng)存在于瀏覽器中了，但以前這樣寫(xiě)是不合乎規范的，現在我們把標準改了，允許你這樣寫(xiě)了。
HTML5設計原理四：求真務(wù)實(shí)
新增語(yǔ)義元素涉及頭部(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中前所未有的內容模型——給內容分區。
將新元素作為類(lèi)的替代品更有價(jià)值，因為這些元素在一個(gè)頁(yè)面中不止可以使用一次，而是可以使用多次，可嵌套使用。
其中最為通用的section，可以說(shuō)是與內容最相關(guān)的一個(gè)。而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中，只要你建立一個(gè)新的內容塊，不管用section、article、aside、nav，還是別的元素，都可以在其中使用H1，而不必擔心這個(gè)塊里的標題在整個(gè)頁(yè)面中應該排在什么級別;H2、H3，都沒(méi)有問(wèn)題。
HTML5設計原理五：平穩退化
漸進(jìn)增強的另一面就是平穩退化。
使用type屬性增強表單：
代碼如下
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
備注：
現有的瀏覽器無(wú)法理解這些新type值的，但在它們看到自己不理解的type值時(shí)，會(huì )將type的`值解釋為text。
HTML5還為輸入元素增加了新的屬性，比如placeholder(占位符)，就是用于在文本框中預先放一些文本。無(wú)需JavaScript去實(shí)現，太完美了。
HTML5視頻對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è)設計原理，即梅特卡夫定律(Metcalfe’s Law)：
【html5入門(mén)設計原理】相關(guān)文章：
電子電路原理圖入門(mén)知識積累08-10
FPGA的原理和設計09-23
臥室裝修設計原理10-18
平面設計入門(mén)知識08-07
服裝設計基礎入門(mén)05-11
室內設計的原理09-22
HTML5的發(fā)展08-15
戶(hù)外家具設計入門(mén)知識10-14
平面設計新手入門(mén)技巧10-21