Web技術(shù)的發(fā)展速度太快了,如果你不與時俱進(jìn),就會被淘汰。因此,為了應(yīng)對即將到來的HTML5,本文總結(jié)了22個HTML5的初級技巧,希望能對你進(jìn)一步學(xué)習(xí)好HTML5會有所幫助。
1. 新的Doctype聲明
XHTML的聲明太長了,我相信很少會有前端開發(fā)人員能手寫出這個Doctype聲明。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5的Doctype聲明很短,看到這個聲明相信你馬上就能記住,不用浪費(fèi)腦細(xì)胞去記那長的有點(diǎn)變態(tài)的XHTML的Doctype聲明了。
<!DOCTYPE html>
HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現(xiàn)代瀏覽器和IE6/7/8等瀏覽器都進(jìn)入(準(zhǔn))標(biāo)準(zhǔn)模式,你可能會奇怪IE6/7居然也可以支持HTML5 Doctype,事實(shí)上,IE是只要doctype符合 這種格式,都會進(jìn)入標(biāo)準(zhǔn)模式。
2. <figure>標(biāo)簽
看看下面一段簡單的代碼: <img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>
遺憾的是,這里的h6標(biāo)簽和img標(biāo)簽好像沒有什么關(guān)系,語義不夠明確。HTML5意識到了這一點(diǎn),于是就采用了<figure>標(biāo) 簽。當(dāng)<figure>結(jié)合<figcaption>標(biāo)簽的使用,可以讓h6標(biāo)簽和img標(biāo)簽組合起來,代碼就更具語義化了。
<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>
3. 重新定義<small>
不久前,我使用了<small>標(biāo)簽來創(chuàng)建與logo相關(guān)的副標(biāo)題。但是在HTML5中重新定義了<small>標(biāo)簽,使 之更能表現(xiàn)語義化,在<small>的字號都會變小,想想如果這個標(biāo)簽用于網(wǎng)站的底部的版權(quán)信息還是個不錯的做法。
4. 去掉了Javascript和CSS標(biāo)簽的type屬性
通常你會在<link>和<script>加上type屬性:
<link rel="stylesheet" type=text/css href="path/to/stylesheet.css">
<script type="text/javascript" src="path/to/script.js"></script>
在HTML5中,不再需要type屬性了,因?yàn)檫@顯得有點(diǎn)多余,去掉之后可以讓代碼更為簡潔。
<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>