Maison >interface Web >Questions et réponses frontales >Quels sont les éléments interactifs des pages html5 ?
Quels sont les éléments interactifs des pages html5 ?
- 青灯夜游original
- 2021-12-16 16:58:314269parcourir
Les éléments interactifs de la page HTML5 comprennent : 1. les détails, utilisés pour représenter un élément de contenu spécifique ; 2. le résumé ; 3. la grille de données, utilisée pour contrôler les données et l'affichage du client ; 4. le menu, utilisé pour les menus interactifs ; utilisé pour gérer les boutons de commande ; 6. progression ; 7. compteur.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
: Expression de contenu fonctionnel, il y aura une certaine relation entre le contenu et les données, et c'est la base de divers événements.
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如单击)与legend交互才会显示出来。summary：标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。menu：主要用于交互菜单(曾被废弃又被重新启用的元素)。command：用来处理命令按钮。progress：用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比） 属性值有两个： value：已经完成的工作量。 max：总共有多少工作量。 注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。metersummary: la balise contient le titre de l'élément de détails, et l'élément "details" est utilisé pour décrire des informations détaillées sur le document ou le fragment de document.
détails : utilisé pour représenter un élément de contenu spécifique, mais le contenu peut ne pas être affiché par défaut. Il sera affiché uniquement en interagissant avec la légende par certains moyens (comme en cliquant). . datagrid : utilisé pour contrôler les données et l'affichage du client, qui peuvent être mis à jour dans le temps par des scripts dynamiques.
menu : Principalement utilisé pour les menus interactifs (éléments qui ont été abandonnés puis réactivés).
command : Utilisé pour gérer les boutons de commande. 🎜🎜🎜🎜progress : Utilisé pour indiquer la progression de l'achèvement d'une tâche. Ces progrès peuvent être incertains, ce qui signifie simplement que les progrès sont en cours, mais on ne sait pas exactement combien de travail reste à accomplir. Vous pouvez également utiliser un nombre compris entre 0 et un nombre maximum (tel que 100) pour représenter l'état d'avancement exact (tel que le pourcentage d'avancement). Il existe deux valeurs d'attribut : valeur : la quantité de travail achevée. max : combien de travail y a-t-il au total. Notez que la valeur des attributs value et max doit être supérieure à 0 et que la valeur de value doit être inférieure ou égale à la valeur de l'attribut max. 🎜🎜🎜🎜meter : la balise définit une mesure scalaire dans une plage connue ou une valeur fractionnaire. Également connu sous le nom de jauge. 🎜🎜🎜🎜🎜Exemple : 🎜 <!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('objpro');
var title = document.getElementById('mytitle');
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="Quels sont les éléments interactifs des pages html5 ?" >
<span>Chrome浏览器</span>
</li>
<li>
<img src="360.png" alt="Quels sont les éléments interactifs des pages html5 ?" >
<span>360浏览器</span>
</li>
<li>
<img src="IE.png" alt="Quels sont les éléments interactifs des pages html5 ?" >
<span>IE浏览器</span>
</li>
</menu>
<hr><hr>
<menu>
<command
onclick="alert('command click');">
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>🎜🎜🎜🎜Tutoriel recommandé : "🎜Tutoriel vidéo HTML🎜"🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!