HTML5中有许多交互体验元素，它们最大的特点就是：不需要请求服务器资源，改变用户选择的内容与展现状态。例如：details、summary、command、key、meter、progress等。

HTML5交互元素分为三类：

内容交互元素
菜单交互元素
状态交互元素

内容交互元素

details元素

details元素用于说明文档或者某个细节信息，一般与summary元素搭配使用。默认情况下，details元素内容不显示，当点击summary元素时，展示details元素的内容。

属性	值	描述
open	open	用于控制details元素的展示
subject	sub_id	用于设置元素所对应的ID号
draggable	BOOLEAN	设置是否为可以拖动的元素，默认值为false

使用css或脚本控制元素details的使用

功能描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互元素details的使用</title>
    <style type="text/css">
        body {
            font-size: 12px;
        }
        span {
            font-weight: bold;
        }
        details {
            overflow: hidden;
            height: 0%;
            padding-left: 200px;
            position: relative;
            display: block;
        }
        details[open] {
            height: auto;
        }
    </style>
</head>

<body>
    <span onclick="span1_click()">脚注</span>
    <details id="detials2">
        本页面生成于 2022
    </details>
    <script type="text/javascript">
        function span1_click() {
            var objD = document.querySelector('#detials2');
            const attD = objD.getAttribute("open");
            // objD.setAttribute("open","open")
            if (!attD) {
                objD.setAttribute("open", "open")
            } else {
                objD.removeAttribute("open")
            }
        }
    </script>
</body>

</html>

效果预览

不展示
展示

源码分析 details元素使用时，页面会自动生成详情字样，通过单击详情可以做到控制details的展示与否。js脚本通过获取details元素，为其添加open属性做到控制details元素的展示与否。

summary元素

summary元素是用来改变详情的字样，在details元素中，第一个summary元素里的内容就是详情替换的内容，例如：

<details id="detials2">
        <summary>特别标注3</summary>
        <summary>特别标注4</summary>
        本页面生成于 2022
   </details>

command元素

只有ie能用。。。 command元素是用于定义各种类型的命令按钮，利用该标记的“url”属性可以添加图片，并且实现图片按钮的效果；另外改变标记中的“type”属性，还可以定义复选框或者单选框按钮。

属性	值	描述
checked	checkded	如果类型值为checkbox或者radio，则该属性表示能否被选中
disabled	disabled	设置按钮是否可用
icon	url	设置按钮中图片地址
label	command name	定义可以显示于页面中按钮的名称
radiogroup	radiogroup name	如果类型定义为radio时，可以通过该属性设置所属群组
type	checkbox command radio	设置按钮的类型，默认为command
command元素与menu元素结合使用可以实现弹出式的下拉框。

command 与 menu 结合使用

只有ie能用。。。

功能描述: 在新建的页面中分别添加一个menu和command元素，并将command元素包含在menu元素中；当单击其中一个command元素时，弹出一个对话框，并且显示对应操作的内容。

progress元素的使用

可以用于展示下载进度

功能描述有一个进度条，单击按钮后开始下载
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>progress元素的使用</title>
    <style type="text/css">
    </style>
</head>

<body>
    <p id="pTip"></p>
  <progress value="0" max="100" id="down"></progress>
  <button onclick="handleDown()">xiazai</button>
  <script type="text/javascript">
    let intVal = 0;
    let intTimer;
    const prog = document.getElementById("down");
    const tip = document.getElementById("pTip")
    function handler(){
        intVal++;
        prog.value= intVal;
        if(intVal >= prog.max){
            clearInterval(intTimer);
            tip.innerHTML = "finished";
        }else{
            tip.innerHTML = "downing!!!"
        }
    }
    function handleDown(){
        intTimer = setInterval(handler,100);
    }
  </script>
</body>

</html>

HTML基础（2）- HTML5中常用的交互元素