HTML5 ページのインタラクティブな要素は何ですか?-フロントエンドQ&A-php.cn

HTML5 ページのインタラクティブな要素は何ですか?

青灯夜游

リリース： 2021-12-16 16:58:31

オリジナル

4289 人が閲覧しました

html5 ページのインタラクティブ要素には、1. 詳細、コンテンツの特定の部分を表すために使用されます、2. 概要、3. データグリッド、クライアントデータと表示の制御に使用されます、4. メニュー、インタラクティブメニューに使用されます。 5、コマンド、コマンドボタンの処理に使用されます、6.進行状況、7.メーター。

HTML5 ページのインタラクティブな要素は何ですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 インタラクティブ要素 : 機能的なコンテンツ表現。コンテンツとデータの間には一定の関係があり、さまざまなイベントの基礎となります。

詳細: コンテンツの特定の部分を表すために使用されますが、コンテンツはデフォルトでは表示されない場合があります。これは、凡例を操作することによってのみ表示されます。何らかの手段（クリックなど）が出てきます。
summary: タグには詳細要素のタイトルが含まれており、「詳細」要素は文書または文書フラグメントに関する詳細情報を記述するために使用されます。
datagrid: クライアントデータと表示を制御するために使用され、動的スクリプトによって適時に更新できます。
menu: 主にインタラクティブメニュー (放棄されてから再度有効になった要素) に使用されます。
command: コマンドボタンを処理するために使用されます。
progress: タスクの完了の進行状況を示すために使用されます。この進捗状況は不確実な場合があります。これは単に進捗が進行中であることを意味しますが、完了すべき作業がどれだけ残っているかは不明です。また、0 から最大値 (100 など) までの数値を使用して、正確な進捗完了ステータス (進捗率など) を表すこともできます。属性値は 2 つあります: value: 完了した作業量。 max: 合計の作業量。 value 属性と max 属性の値は 0 より大きく、value の値は max 属性の値以下である必要があることに注意してください。
#meter: タグは、既知の範囲または分数値内のスカラー測定値を定義します。ゲージとも呼ばれます。

例:

 <!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 ページのインタラクティブな要素は何ですか?