站長(zhǎng)資訊網(wǎng)
html5頁(yè)面交互元素有：1、details，用來(lái)表示一段具體內(nèi)容；2、summary；3、datagrid，用來(lái)控制客戶端數(shù)據(jù)與顯示；4、menu，用于交互菜單；5、command，用來(lái)處理命令按鈕；6、progress；7、meter。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML5交互性元素：功能性的內(nèi)容表達(dá)，會(huì)有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)。
-
details：用來(lái)表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過(guò)某種手段(如單擊)與legend交互才會(huì)顯示出來(lái)。 -
summary：標(biāo)簽包含 details 元素的標(biāo)題，"details" 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息。 -
datagrid：用來(lái)控制客戶端數(shù)據(jù)與顯示，可以由動(dòng)態(tài)腳本及時(shí)更新。 -
menu：主要用于交互菜單(曾被廢棄又被重新啟用的元素)。 -
command：用來(lái)處理命令按鈕。 -
progress：用于表示一個(gè)任務(wù)的完成進(jìn)度。這個(gè)進(jìn)度可以是不確定的，只是表示進(jìn)度正在進(jìn)行，但是不清楚還有多少工作量沒有完成。也可以用0到某個(gè)最大數(shù)字（如100）之間的數(shù)字來(lái)表示準(zhǔn)確的進(jìn)度完成情況（如進(jìn)度百分比） 屬性值有兩個(gè)： value：已經(jīng)完成的工作量。 max：總共有多少工作量。 注意的是value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值。 -
meter：標(biāo)簽定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量。也被稱為 gauge（尺度）。
示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5中常用的交互元素</title> <script type="text/javascript"> function command_click(){ document.getElementById("show").innerHTML= "點(diǎn)擊了打開command·"; } var intVal = 0; var intTimer; var objpro = document.getElementById('objpro'); var title = document.getElementById('mytitle'); function interval_handler(){ intVal++; objpro.value = intVal; if(intVal >= objpro.max){ clearInterval(intTimer); title.innerHTML = "下載完成"; }else{ title.innerHTML = "正在下載"+intVal+"%"; }} function btn_click(){ intTimer = setInterval(interval_handler,100); } </script> ------------------------------------------------------------------ <menu> <command onclick="command_click();"> 打開 </command> </menu> <div id="show"></div> </head> <body> <form> <input id="myCar" list="cars" > <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </input> <hr><hr> <span>顯示內(nèi)容</span> <details id="detail" open="open"> 我被顯示出來(lái)了 </details> <hr><hr> <details> <summary>HTML 5</summary> 歡迎使用 summary 標(biāo)簽 </details> <hr><hr> </form> <menu> <li> <img src="Chrome.png"> <span>Chrome瀏覽器</span> </li> <li> <img src="360.png"> <span>360瀏覽器</span> </li> <li> <img src="IE.png"> <span>IE瀏覽器</span> </li> </menu> <hr><hr> <menu> <command onclick="alert('command click');"> Click Me! </command> </menu> <hr><hr> <p id="mytitle">開始下載</p> <progress value="0" max="100" id="objpro"> </progress> <input type="button" value="下載" onclick="btn_click();"> <hr><hr> <p>120人參與投票，明細(xì)如下：</p> <p>張三: <meter value="0.3" optimum="1" high="0.9" low="1" max="1" min="0"></meter> <span>30%</span> </p> <p>李四: <meter value="70" optimum="100" high="90" low="10" max="100" min="0"></meter> <span>70%</span> </p> <hr><hr> </body> </html>
推薦教程：《html視頻教程》
