首頁  >  文章  >  web前端  >  html5頁面互動元素有哪些

html5頁面互動元素有哪些

青灯夜游
青灯夜游原創
2021-12-16 16:58:314252瀏覽

html5頁面互動元素有:1、details,用來表示一段具體內容;2、summary;3、datagrid,用來控制客戶端資料與顯示;4、menu,用於互動選單;5 、command,用來處理指令按鈕;6、progress;7、meter。

html5頁面互動元素有哪些

本教學操作環境: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(&#39;objpro&#39;);
	var title = document.getElementById(&#39;mytitle&#39;);
	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(&#39;command click&#39;);">
	    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頁面互動元素有哪些

#推薦教學:《html影片教學

以上是html5頁面互動元素有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn