免費的HTML5連載來了《HTML5網頁開發例項詳解》連載（二）
最近新浪、百度、騰訊、京東、大眾點評、淘寶等流行的網站都加大了招聘HTML5的力度，HTML5開發人員成了搶手貨，本次連載的是由大眾點評前端工程師和一淘網前端工程師基情奉獻的《HTML5網頁開發例項詳解》，喜歡本書的人可以關注連載，後續會更精彩！
2.1.1 最新的互動元素——內容互動、選單互動、狀態互動
HTML 5不僅僅只帶來了一堆在語義上進行強化了的元素，同時在互動效果上也進行了極大的改變。也就是說，使用者可以在不使用JavaScript的情況下也能製作出滿足一般需求的互動效果，這在筆者看來是一個非常友善的突破，可以通過HTML結構讀出更多統一的使用規範和動態語義的互動資訊。
首先看顯示內容上的互動特性，這裡向讀者介紹的是details與summary兩個元素。details元素用來描述文件或文件片段的資訊，summary元素與details元素一同使用，用於說明文件的標題，同時，summary元素應為details元素的第一個子元素。通過一個簡單的示例展示summary與details的使用，程式碼如下：
<pre name="code" class="html"><!DOCTYPE HTML> <html> <style>details details{padding:15px}</style> <!-- 二級details樣式--> <body> <details> <summary>互動</summary> <!-- 第一級detauls標題--> <details> <summary>內容互動</summary> <!-- 第二級detauls標題--> <p>details與summary元素</p> <!-- 文件內容 --> </details> </details></body></html>
details與summary元素示例的互動效果如圖2.1所示。
圖2.1 details與summary元素示例
details同時還具備open屬性，用於表示是否展開可見，語法如下：
<details open="open">選單互動中，命運最坎坷的應屬menu元素，這個早在HTML 2時代就出現的元素，居然在HTML 4時遭到棄用，幸運的是HTML 5從語義的角度重新拾回menu元素。menu元素出現時常與li元素一同使用，用於排列表單控制元件。另外一個是command元素，按照W3C的說明，該元素有單選按鈕、複選框、按鈕3種類型，目前筆者測試了市面上主流的瀏覽器都暫時無法使用command元素特性，讀者如果有興趣可以自行嘗試。
最後一類是狀態互動型別，即可以理解為頁面上的進度條。如progress元素、meter元素。progress元素一般用於下載或者上傳時的進度顯示，當狀態產生變化時，可以通過設定progress的屬性改變元素的互動狀態。progress元素有兩個關鍵屬性：
- value：進度的當前值，可以為整數或者浮點數。
- max：完成的值，即總量，可以為整數或者浮點數。
下面通過一個簡單的示例展示progress元素的使用，程式碼如下：
<!DOCTYPE HTML>
<html>
<body>
下載進度：<progress value=30 max=100></progress> <!-- 當前進度-->
</body>
</html>
執行效果如圖2.2所示。
圖2.2 progress元素
meter元素與progress元素非常相似，主要用於定義度量衡，表示在一定範圍內的值，如投票佔比、使用量等。meter元素有6個關鍵屬性：
- value：實際度量的值，預設為0，可以為整數或者浮點數。
- high：範圍的上限值。
- low：範圍的下限值。
- max：最大值，預設值是1。
- min：最小值，預設值是0。
- optimum：最佳的值，必須在min屬性值與max屬性值之間。
下面通過一個示例說明meter元素的使用，程式碼如下：
<!DOCTYPE html>
<html>
<body>
<p>投票結果：</p>
<p>小周： <!-- 小周的投票值 -->
<meter value="20" optimum="100" high="100" low="0" max="100" min="0"></meter><span>20%</span>
</p>
<p>小王： <!-- 小王的投票值 -->
<meter value="80" optimum="100" high="100" low="0" max="100" min="0"></meter><span>80%</span>
</p>
</body>
</html>
meter元素示例的執行效果如圖2.3所示。
圖2.3 meter元素投票示例
HTML5並不難，難的是沒有那麼多的應用開發經驗，清華大學出版社推出的《HTML 5網頁開發例項詳解》是市場上唯一 一本HTML 5實用案例書，是通過應用案例的形式學習HTML5的最佳著作。關注新浪圍脖@我的圖書我做主，留下郵箱，我們免費贈送“大眾點評”工程師為本書量身定製的HTML5R視訊。
