溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5中有哪些頁面交互元素

發(fā)布時間：2021-12-16 17:04:30 來源：億速云 閱讀：226 作者：小新 欄目：web開發(fā)

這篇文章主要介紹html5中有哪些頁面交互元素，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

html5頁面交互元素有：1、details，用來表示一段具體內(nèi)容；2、summary；3、datagrid，用來控制客戶端數(shù)據(jù)與顯示；4、menu，用于交互菜單；5、command，用來處理命令按鈕；6、progress；7、meter。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5交互性元素：功能性的內(nèi)容表達，會有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)。

  • details：用來表示一段具體的內(nèi)容，但是內(nèi)容默認可能不顯示，通過某種手段(如單擊)與legend交互才會顯示出來。

  • summary：標簽包含 details 元素的標題，"details" 元素用于描述有關(guān)文檔或文檔片段的詳細信息。

  • datagrid：用來控制客戶端數(shù)據(jù)與顯示，可以由動態(tài)腳本及時更新。

  • menu：主要用于交互菜單(曾被廢棄又被重新啟用的元素)。

  • command：用來處理命令按鈕。

  • progress：用于表示一個任務的完成進度。這個進度可以是不確定的，只是表示進度正在進行，但是不清楚還有多少工作量沒有完成。也可以用0到某個最大數(shù)字（如100）之間的數(shù)字來表示準確的進度完成情況（如進度百分比） 屬性值有兩個： value：已經(jīng)完成的工作量。 max：總共有多少工作量。 注意的是value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值。

  • meter：標簽定義已知范圍或分數(shù)值內(nèi)的標量測量。也被稱為 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>顯示內(nèi)容</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中有哪些頁面交互元素

以上是“html5中有哪些頁面交互元素”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手