http://www.inspirr.com

Web技術的發展速度太快了，如果你不與時俱進，就會被淘汰。因此，為了應對即將到來的HTML5，本文總結了22個HTML5的初級技巧，希望能對你進一步學習好HTML5會有所幫助。

1. 新的Doctype聲明

XHTML的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doctype聲明。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 
HTML5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明了。

 

<!DOCTYPE html>

HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入標準模式，你可能會奇怪IE6/7居然也可以支持HTML5 Doctype，事實上，IE是只要doctype符合 這種格式，都會進入標準模式。

2. <figure>標簽

看看下面一段簡單的代碼：

<img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>
 
遺憾的是，這里的h6標簽和img標簽好像沒有什么關系，語義不夠明確。HTML5意識到了這一點，于是就采用了<figure>標簽。當<figure>結合<figcaption>標簽的使用，可以讓h6標簽和img標簽組合起來，代碼就更具語義化了。

 

<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>

3. 重新定義<small>

不久前，我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽，使之更能表現語義化，在<small>的字號都會變小，想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。

4. 去掉了Javascript和CSS標簽的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屬性了，因為這顯得有點多余，去掉之后可以讓代碼更為簡潔。

 

<link href="path/to/stylesheet.css">
 <script src="path/to/script.js"></script>

 

 

 

arrow
arrow
    全站熱搜

    inspirr 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄