HTML5 페이지의 대화형 요소는 무엇입니까?-프런트엔드 Q&A-php.cn

HTML5 페이지의 대화형 요소는 무엇입니까?

青灯夜游

풀어 주다： 2021-12-16 16:58:31

원래의

4244명이 탐색했습니다.

HTML5 페이지 대화형 요소에는 다음이 포함됩니다. 1. 특정 콘텐츠를 나타내는 데 사용되는 세부 정보 2. 요약 3. 클라이언트 데이터 및 표시를 제어하는 데 사용되는 메뉴 5. 명령 6. 진행률 7. 미터를 처리하는 데 사용됩니다.

HTML5 페이지의 대화형 요소는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 인터랙티브 요소: 기능적인 콘텐츠 표현, 콘텐츠와 데이터 사이에는 일정한 관계가 있으며, 이는 다양한 이벤트의 기초가 됩니다.

세부정보: 특정 콘텐츠를 나타내는 데 사용되지만 기본적으로 콘텐츠가 표시되지 않을 수 있습니다. 일부 수단(예: 클릭)을 통해 범례와 상호작용해야만 표시됩니다. . details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如单击)与legend交互才会显示出来。
summary：标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单(曾被废弃又被重新启用的元素)。
command：用来处理命令按钮。
progress：用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）属性值有两个： value：已经完成的工作量。 max：总共有多少工作量。注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。
meter

summary

datagrid: 클라이언트 데이터 및 디스플레이를 제어하는 데 사용되며 동적 스크립트에 의해 적시에 업데이트될 수 있습니다. HTML5 페이지의 대화형 요소는 무엇입니까?

메뉴: 주로 대화형 메뉴(폐기되었다가 다시 활성화된 요소)에 사용됩니다.

🎜🎜명령: 명령 버튼을 처리하는 데 사용됩니다. 🎜🎜🎜🎜progress: 작업 완료 진행 상황을 나타내는 데 사용됩니다. 이 진행 상황은 불확실할 수 있습니다. 이는 진행이 진행 중임을 의미하지만 완료해야 할 작업이 얼마나 남아 있는지는 확실하지 않습니다. 또한 0과 최대 숫자(예: 100)를 사용하여 정확한 진행 완료 상태(예: 진행률)를 나타낼 수 있습니다. 두 가지 속성 값이 있습니다. value: 완료된 작업량. max: 총 작업량이 얼마나 됩니까? value 및 max 속성의 값은 0보다 커야 하며 value의 값은 max 속성의 값보다 작거나 같아야 합니다. 🎜🎜🎜🎜미터: 태그는 알려진 범위 또는 분수 값 내에서 스칼라 측정값을 정의합니다. 게이지라고도 합니다. 🎜🎜🎜🎜🎜예: 🎜

 <!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>

로그인 후 복사

🎜🎜🎜🎜추천 튜토리얼: "🎜html 비디오 튜토리얼🎜"🎜

위 내용은 HTML5 페이지의 대화형 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!