html5入門(mén)設(shè)計(jì)原理

時(shí)間：2024-09-10 16:47:48 HTML5 我要投稿

相關(guān)推薦

　　淘寶網(wǎng)首頁(yè)已全部使用HTML5，擁抱變化才是王道。HTML5設(shè)計(jì)原理是什么？下面yjbys小編為大家分享HTML5設(shè)計(jì)幾個(gè)原理，希望對(duì)大家學(xué)習(xí)HTML5有幫助！

　　HTML5

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

　　2、W3C在2007年組建了HTML5工作組，在WHATWG工作成果的基礎(chǔ)上繼續(xù)開(kāi)展工作。

　　HTML5設(shè)計(jì)原理一：避免不必要的復(fù)雜性

　　代碼如下

　　一、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ā)瀏覽器的標(biāo)準(zhǔn)模式。備注：doctype它不是寫(xiě)給瀏覽器看的,Doctype是寫(xiě)給驗(yàn)證器看的。讓驗(yàn)證器按照該doctype來(lái)驗(yàn)證我的文檔。

　　二、指定文檔的字符編碼的寫(xiě)法：

　　代碼如下

　　//HTML 4.01：

　　//XHTML 1.0:

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

　　//HTML5:

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

　　HTML5其他簡(jiǎn)潔寫(xiě)法：

　　代碼如下

　　//無(wú)需再寫(xiě)type="text/css"，否則那就是重復(fù)自己了

　　//無(wú)需再寫(xiě)使用的腳本語(yǔ)言 type="text/javascript"

　　HTML5設(shè)計(jì)原理二：支持已有的內(nèi)容

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

　　<p class="foo">Hello world

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

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

　　備注：HTML5支持已存在的各種不嚴(yán)謹(jǐn)?shù)膶?xiě)法。

　　在JavaScript，你可以在每條語(yǔ)句末尾加上分號(hào)，但不是必需的'，因?yàn)镴avaScript會(huì)自動(dòng)插入分號(hào)……JSlint確實(shí)是個(gè)非常棒的工具,規(guī)范統(tǒng)一JavaScript編碼風(fēng)格，在團(tuán)隊(duì)項(xiàng)目非常有用。

　　HTML5設(shè)計(jì)原理三：解決現(xiàn)實(shí)的問(wèn)題

　　給整塊內(nèi)容(含多個(gè)塊級(jí)元素)加個(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:

　　<h2>Headline text</h2>

　　<p>Paragraph text.</p>

　　備注：這種寫(xiě)法其實(shí)早就已經(jīng)存在于瀏覽器中了，但以前這樣寫(xiě)是不合乎規(guī)范的，現(xiàn)在我們把標(biāo)準(zhǔn)改了，允許你這樣寫(xiě)了。

　　HTML5設(shè)計(jì)原理四：求真務(wù)實(shí)

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

　　代碼如下

　　//HTML 4.01 XHTML 1.0:

　　</body>

　　//HTML5:

　　<body>

　　</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:

　　...

　　</p>

　　</p>

　　//HTML5:

　　...

　　</p>

　　備注：在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)題。