溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹html5中有哪些頁面交互元素，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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">
<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人參與投票，明細如下：</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>
以上是“html5中有哪些頁面交互元素”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
