3.2 頁面交互元素

對于網站應用來說，表現最為突出的就是客戶端與服務器端的交互。HTML5增加了交互體驗元素，本節將詳細講解這些元素。

3.2.1 <details>標簽和<summary>標簽

<details>標簽用于描述文檔或文檔某個部分的細節。<summary>標簽經常與<details>標簽配合使用，作為<details>標簽的第一個子標簽，<summary>標簽用于為<details>標簽定義標題。標題是可見的，當用戶單擊標題時，會顯示或隱藏<details>標簽中的其他內容。

【例3-7】 使用<details>標簽和<summary>標簽描述文檔。本例在瀏覽器中的顯示效果如圖3-8所示。

【說明】目前只有Chrome和Safari瀏覽器支持<details>標簽的折疊效果。本例若要實現標題的折疊效果，需要在Chrome瀏覽器中瀏覽驗證，單擊標題的展開效果圖3-9所示。

3.2.2 <progress>標簽

<progress>標簽用于表示一個任務的完成進度。這個進度可以是不確定的，只表示進度正在進行，但是不清楚還有多少工作量沒有完成。<progress>標簽的常用屬性值有兩個，具體如下。

1）value：已經完成的工作量。

2）max：總共有多少工作量。

其中，value和max的屬性值必須大于0，且value的屬性值要小于或等于max的屬性值。

【例3-8】使用<progress>標簽顯示項目開發進度。本例在瀏覽器中的顯示效果如圖3-10所示。

【說明】IE 9瀏覽器并不支持<progress>標簽，本例的顯示效果是在Chrome瀏覽器中實現的。