接上一篇，我們繼續(xù)學(xué)習(xí)...

十一、IE和HTML5(Internet Explorer and HTML5)

不幸的是，討厭的IE瀏覽器需要?jiǎng)狱c(diǎn)小手術(shù)才能理解新的HTML5元素。

所有元素，默認(rèn)的，都有個(gè)inline的display

為了確保所有新的HTML5元素能以block水平的元素正確地渲染，有必要對(duì)其做如下定義：

header, footer, article, section, nav, menu, hgroup {

display: block;

}

不幸的是，IE仍舊忽略這些樣式，因?yàn)樗恢肋@些標(biāo)簽從哪里來的，好比是header元素。為了更簡(jiǎn)單將此應(yīng)用到每個(gè)新的應(yīng)用過程中，雷米夏普(Remy Sharp)創(chuàng)建了一個(gè)腳本，通常稱為HTML5 shiv。該腳本同樣修復(fù)了些顯示問題。

<!--[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

十二、文檔某一部分的信息(hgroup)

想象一下，在我的網(wǎng)站的標(biāo)題，我有我的站點(diǎn)的名稱，隨后立即由一個(gè)副標(biāo)題。雖然我們可以使用一個(gè)<h1>和<h2>標(biāo)簽，為其分別創(chuàng)造標(biāo)記，但是依舊沒有（因?yàn)镠TML4）一個(gè)簡(jiǎn)單的方法來語義上說明了兩者之間的關(guān)系。此外，一個(gè)h2標(biāo)記的使用提出了更多的問題，在層次結(jié)構(gòu)上，當(dāng)涉及到其他網(wǎng)頁上顯示的標(biāo)題時(shí)。通過使用不影響文檔的大綱流hgroup元素，我們可以將這些標(biāo)題組合在一起。

<header>

<hgroup>

<h1> Recall Fan Page </h1>

<h2> Only for people who want the memory of a lifetime. </h2>

</hgroup>

</header>

十三、必要的屬性(Required Attribute )

表單允許新的必要屬性，用來指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。

<input type="text" name="someInput" required>

或者，使用更結(jié)構(gòu)化的方法：

<input type="text" name="someInput" required="required">

兩種方法都行。

下面是一個(gè)簡(jiǎn)單的例子，我們還將添加占位符屬性，因?yàn)闆]有理由不這樣做。

<form action="" method="get">

<label for="name">姓名:</label>

<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />

<button type="submit">提交</button>

</form>

十四、Autofocus屬性

同樣，HTML5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”，或有重點(diǎn)的，默認(rèn)情況下，我們現(xiàn)在可以利用自動(dòng)獲取焦點(diǎn)屬性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>

有趣的是，雖然我個(gè)人更傾向于喜歡XHTML的方法（用引號(hào)，等等），寫作“autofocus=autofocus”讓人感到有點(diǎn)怪。因此，我們將堅(jiān)持使用單一關(guān)鍵字的方法。

十五、Audio支持

我們無需再依賴第三方插件區(qū)渲染音頻。HTML5提供了<audio>元素，嗯，至少，最終，我們將不必?fù)?dān)心這些插件。就目前，只有最近期的的瀏覽器提供HTML5音頻支持。在這個(gè)時(shí)候，它仍然是一個(gè)很好的做法提供一些向后兼容的形式。

<audio autoplay="autoplay" controls="controls">

<source src="file.ogg" />

<source src="file.mp3" />

<a href="file.mp3">Download this file.</a>

</audio>

來自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]

總結(jié)

以上是生活随笔為你收集整理的HTML5新特征、窍门和技术（11~15）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。