html5頁面互動元素有:1、details,用來表示一段具體內容;2、summary;3、datagrid,用來控制客戶端資料與顯示;4、menu,用於互動選單;5 、command,用來處理指令按鈕;6、progress;7、meter。
本教學操作環境:windows7系統、HTML5版、Dell G3電腦。
HTML5互動性元素:功能性的內容表達,會有一定的內容和資料的關聯,是各種事件的基礎。
details
:用來表示一段具體的內容,但是內容預設可能不會顯示,透過某種手段(如單擊)與legend互動才會顯示出來。
summary
:標籤包含 details 元素的標題,"details" 元素用於描述有關文件或文件片段的詳細資訊。
datagrid
:用來控制客戶端資料與顯示,可以由動態腳本及時更新。
menu
:主要用於互動選單(曾經被遺棄又被重新啟用的元素)。
command
:用來處理指令按鈕。
progress
:用來表示一個任務的完成進度。這個進度可以是不確定的,只是表示進度正在進行,但不清楚還有多少工作量沒有完成。也可以用0到某個最大數字(如100)之間的數字來表示準確的進度完成情況(如進度百分比) 屬性值有兩個: value:已經完成的工作量。 max:總共有多少工作量。注意的是value和max屬性的值必須大於0,且value的值要小於或等於max屬性的值。
meter
:標籤定義已知範圍或分數值內的標量測量。也被稱為 gauge(尺度)。
範例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5中常用的交互元素</title> <script type="text/javascript"> function command_click(){ document.getElementById("show").innerHTML= "点击了打开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>显示内容</span> <details id="detail" open="open"> 我被显示出来了 </details> <hr><hr> <details> <summary>HTML 5</summary> 欢迎使用 summary 标签 </details> <hr><hr> </form> <menu> <li> <img src="Chrome.png" alt="html5頁面互動元素有哪些" > <span>Chrome浏览器</span> </li> <li> <img src="360.png" alt="html5頁面互動元素有哪些" > <span>360浏览器</span> </li> <li> <img src="IE.png" alt="html5頁面互動元素有哪些" > <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人参与投票,明细如下:</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影片教學》
以上是html5頁面互動元素有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!