Home > Article > Web Front-end > What are the interactive elements of html5 pages?
What are the interactive elements of html5 pages?
- 青灯夜游Original
- 2021-12-16 16:58:314247browse
html5 page interactive elements include: 1. details, used to represent a specific piece of content; 2. summary; 3. datagrid, used to control client data and display; 4. menu, used for interactive menus; 5 , command, used to process command buttons; 6. progress; 7. meter.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
HTML5 interactive elements: Functional content expression, there will be a certain relationship between content and data, and it is the basis of various events.
details: Used to represent a specific piece of content, but the content may not be displayed by default. It will be displayed only by interacting with the legend through some means (such as clicking) come out.summary: The tag contains the title of the details element, and the "details" element is used to describe detailed information about the document or document fragment.datagrid: Used to control client data and display, which can be updated in time by dynamic scripts.menu: Mainly used for interactive menus (elements that were abandoned and then re-enabled).command: Used to handle command buttons.progress: Used to indicate the completion progress of a task. This progress can be uncertain, which just means that the progress is ongoing, but it is not clear how much work remains to be completed. You can also use a number between 0 and a maximum number (such as 100) to represent the exact progress completion status (such as progress percentage). There are two attribute values: value: the amount of work that has been completed. max: How much work is there in total. Note that the value of the value and max attributes must be greater than 0, and the value of value must be less than or equal to the value of the max attribute.#meter: Tag defines a scalar measurement within a known range or fractional value. Also known as gauge.
Example:
<!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="What are the interactive elements of html5 pages?" >
<span>Chrome浏览器</span>
</li>
<li>
<img src="360.png" alt="What are the interactive elements of html5 pages?" >
<span>360浏览器</span>
</li>
<li>
<img src="IE.png" alt="What are the interactive elements of html5 pages?" >
<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>
Recommended tutorial: "html video tutorial"
The above is the detailed content of What are the interactive elements of html5 pages?. For more information, please follow other related articles on the PHP Chinese website!