Was sind die interaktiven Elemente von HTML5-Seiten?-Front-End-Fragen und Antworten-php.cn

Was sind die interaktiven Elemente von HTML5-Seiten?

青灯夜游

Freigeben： 2021-12-16 16:58:31

Original

4213 Leute haben es durchsucht

Zu den interaktiven HTML5-Seitenelementen gehören: 1. Details zur Darstellung eines bestimmten Inhalts; 3. Datenraster zur Steuerung von Kundendaten und zur Anzeige; 5. Befehl; verwendet, um Befehlstasten zu bedienen; 6. Fortschritt;

Was sind die interaktiven Elemente von HTML5-Seiten?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Interaktive HTML5-Elemente: Funktioneller Inhaltsausdruck, es besteht eine bestimmte Beziehung zwischen Inhalt und Daten und ist die Grundlage für verschiedene Ereignisse.

details: Wird zur Darstellung eines bestimmten Inhalts verwendet, der Inhalt wird jedoch möglicherweise nicht standardmäßig angezeigt. Er wird nur durch Interaktion mit der Legende auf irgendeine Weise angezeigt (z. B. durch Klicken). . details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如单击)与legend交互才会显示出来。
summary：标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单(曾被废弃又被重新启用的元素)。
command：用来处理命令按钮。
progress：用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）属性值有两个： value：已经完成的工作量。 max：总共有多少工作量。注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。
meter

summary

datagrid: Wird zur Steuerung von Clientdaten und -anzeigen verwendet, die durch dynamische Skripte rechtzeitig aktualisiert werden können. Was sind die interaktiven Elemente von HTML5-Seiten?

menu: Wird hauptsächlich für interaktive Menüs verwendet (Elemente, die aufgegeben und dann wieder aktiviert wurden).

🎜🎜command: Wird zur Handhabung von Befehlsschaltflächen verwendet. 🎜🎜🎜🎜fortschritt: Wird verwendet, um den Abschlussfortschritt einer Aufgabe anzuzeigen. Dieser Fortschritt kann ungewiss sein, was lediglich bedeutet, dass der Fortschritt andauert, aber nicht klar ist, wie viel Arbeit noch erledigt werden muss. Sie können auch eine Zahl zwischen 0 und einer Höchstzahl (z. B. 100) verwenden, um den genauen Fortschrittsstatus darzustellen (z. B. Fortschrittsprozentsatz). Es gibt zwei Attributwerte: Wert: der Umfang der abgeschlossenen Arbeit. max: Wie viel Arbeit gibt es insgesamt? Beachten Sie, dass der Wert der Attribute „value“ und „max“ größer als 0 sein muss und der Wert von „value“ kleiner oder gleich dem Wert des Attributs „max“ sein muss. 🎜🎜🎜🎜meter: Tag definiert eine skalare Messung innerhalb eines bekannten Bereichs oder Bruchwerts. Auch als Messgerät bekannt. 🎜🎜🎜🎜🎜Beispiel: 🎜

 <!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="Was sind die interaktiven Elemente von HTML5-Seiten?" >
            <span>Chrome浏览器</span>
        </li>
        <li>
            <img  src="360.png" alt="Was sind die interaktiven Elemente von HTML5-Seiten?" >
            <span>360浏览器</span>
        </li>
        <li>
            <img  src="IE.png" alt="Was sind die interaktiven Elemente von HTML5-Seiten?" >
            <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>

Nach dem Login kopieren

🎜🎜🎜🎜Empfohlenes Tutorial: „🎜HTML-Video-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWas sind die interaktiven Elemente von HTML5-Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!