Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah elemen interaktif halaman html5?

Apakah elemen interaktif halaman html5?

青灯夜游
Lepaskan: 2021-12-16 16:58:31
asal
4289 orang telah melayarinya

Elemen interaktif halaman HTML5 termasuk: 1. butiran, digunakan untuk mewakili sekeping kandungan tertentu 2. ringkasan 3. datagrid, digunakan untuk mengawal data dan paparan pelanggan; 5. , arahan, digunakan untuk memproses butang arahan 6. kemajuan;

Apakah elemen interaktif halaman html5?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Elemen interaktif HTML5 : Ekspresi kandungan berfungsi, akan ada hubungan tertentu antara kandungan dan data, dan ia merupakan asas kepada pelbagai acara.

  • details: Digunakan untuk mewakili bahagian kandungan tertentu, tetapi kandungan itu mungkin tidak dipaparkan secara lalai Ia akan dipaparkan hanya dengan berinteraksi dengan legenda melalui beberapa cara (seperti seperti mengklik).

  • summary: Teg mengandungi tajuk elemen butiran dan elemen "butiran" digunakan untuk menerangkan maklumat terperinci tentang dokumen atau serpihan dokumen.

  • datagrid: digunakan untuk mengawal data dan paparan pelanggan, yang boleh dikemas kini mengikut masa dengan skrip dinamik.

  • menu: Digunakan terutamanya untuk menu interaktif (elemen yang ditinggalkan dan kemudian didayakan semula).

  • command: Digunakan untuk mengendalikan butang arahan.

  • progress: Digunakan untuk menunjukkan kemajuan penyelesaian tugas. Kemajuan ini mungkin tidak pasti, yang bermakna kemajuan sedang berjalan, tetapi tidak jelas berapa banyak kerja yang perlu diselesaikan. Anda juga boleh menggunakan nombor antara 0 dan nombor maksimum (seperti 100) untuk mewakili status penyelesaian kemajuan yang tepat (seperti peratusan kemajuan Terdapat dua nilai atribut: nilai: jumlah kerja yang telah disiapkan). max: Berapakah jumlah kerja yang ada. Ambil perhatian bahawa nilai nilai dan atribut maks mestilah lebih besar daripada 0, dan nilai nilai mestilah kurang daripada atau sama dengan nilai atribut maks.

  • meter: Teg mentakrifkan ukuran skalar dalam julat yang diketahui atau nilai pecahan. Juga dikenali sebagai tolok.

Contoh:

 <!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="Apakah elemen interaktif halaman html5?" >
            <span>Chrome浏览器</span>
        </li>
        <li>
            <img  src="360.png" alt="Apakah elemen interaktif halaman html5?" >
            <span>360浏览器</span>
        </li>
        <li>
            <img  src="IE.png" alt="Apakah elemen interaktif halaman 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>
Salin selepas log masuk

Apakah elemen interaktif halaman html5?

Tutorial yang disyorkan: "tutorial video html"

Atas ialah kandungan terperinci Apakah elemen interaktif halaman html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan