HTML5學(xué)前熱身 實(shí)用技巧及應(yīng)用詳解
雖然HTML 5標(biāo)準(zhǔn)現(xiàn)在仍然是個(gè)草案,但其重要的部分已經(jīng)被許多現(xiàn)代的瀏覽器實(shí)現(xiàn)了。本文將總結(jié)出HTML 5在功能上的主要變化及使用實(shí)例。
本文引用地址:http://cafeforensic.com/article/136724.htm一、新的Doctype
你還在使用麻煩的,不可能記得住的XHTML文檔類型嗎?
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果是,為什么還在用呢?使用新的HTML 5文檔類型代替吧。
- >
我就琢磨著,為了HTML5搞個(gè)這廝代碼,您可能會(huì)對(duì)這段代碼究竟靠不靠譜表示懷疑。不用擔(dān)心,如今這是可行的,只有老的瀏覽器需要一個(gè)特定的doctype(文檔類型)。瀏覽器如果不知道doctype,就會(huì)很簡(jiǎn)單的以標(biāo)準(zhǔn)模式對(duì)包含的標(biāo)簽進(jìn)行渲染。所以,妹妹你大膽的向前沖,把小心謹(jǐn)慎都拋到九霄云外,去擁抱新的HTML5文檔類型吧。
二、圖形元素(TheFigureElement)
看看下面給圖片添加的標(biāo)示:
- <imgsrcimgsrc="path/to/image"alt="Aboutimage"/><p>ImageofMars.p>
文字裹在P標(biāo)簽里,與IMG標(biāo)簽各行其道,很難讓人聯(lián)想到這就是標(biāo)題。HTML 5通過(guò)采用元素對(duì)此進(jìn)行了改正。當(dāng)合元素組合使用時(shí),我們就可以語(yǔ)義化地聯(lián)想到這就是圖片相對(duì)應(yīng)的標(biāo)題。
- <figure>
- <imgsrcimgsrc="path/to/image"alt="Aboutimage"/>
- <figcaption>
- <p>Thisisanimageofsomethinginteresting.p>
- figcaption>figure>
三、重新定義
還在不久前,元素被用來(lái)創(chuàng)建靠近logo且相關(guān)的副標(biāo)題。這是個(gè)很有用的表現(xiàn)元素,但是,現(xiàn)在,這種用法可能就不正確了。元素已經(jīng)被重新定義了,指小字,因而更具可用性。試想下你網(wǎng)站底部的版權(quán)狀態(tài),根據(jù)對(duì)此元素新的HTML5定義,可以正確地包裹這些信息。
四、腳本(scripts)和鏈接(links)無(wú)需type
您可能現(xiàn)在仍在給link和script標(biāo)簽增加type屬性。
- <linkrellinkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"/>
- <scripttypescripttype="text/javascript"src="path/to/script.js">script>
這意味著,這些標(biāo)簽都各自指向樣式表和腳本。因此,我們可以把type屬性一起干掉。
- <linkrellinkrel="stylesheet"href="path/to/stylesheet.css"/>
- <scriptsrcscriptsrc="path/to/script.js">script>
評(píng)論