重学 HTML —— 交互元素

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

交互元素指的是 html 提供的几个方便创建用户交互效果的标签，由于浏览器支持程度不够，在考虑兼容的场景下使用受限，因此这些标签的普及程度不够，接下来看一下这部分内容。

details 和 summary

details 展示的是一个展开收起的效果，summary 是它的子元素，在收起状态展示 summary 的内容，可以直接看使用的例子：

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

details 有一个属性 open，描述当前是否为展开状态，当切换状态时会触发 toggle 事件。

实际开发中不使用这个标签也可以比较容易实现类似效果，不过考虑到 details 和 summary 的兼容性还可以，在构建类似的 UI 效果时可以直接使用这两个标签。

dialog

dialog 可以展示一个对话框，可以作为提示框或询问框使用，它的用法也很简单：

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

dialog 也有 open 属性，当 open 为 true 时展示内容，可以调用 dialog 元素的 showModal 方法打开 dialog 弹窗。

在 dialog 中添加 form 时可以设置 form 的 method 属性为 dialog，这时提交表单可以通过 dialog 的returnValue 属性获取表单值。

dialog 使用起来还是比较方便的，不过这个标签兼容性比较差，使用前需要注意。

menu

menu 是菜单元素，这是一个能用又不能用的标签，因为浏览器虽然都支持 menu 标签本身，但是对与标签相关联的一系列 API 完全不支持或者过期，因此现在 menu 无法在任何一个浏览器上正常工作。因此 MDN 上相关的 demo 也都不能正常查看效果，现在介绍这个标签的用法也没有任何实际意义，因此 menu 相关功能还是需要手动实现。

上面几个就是 html 中的用户交互相关的元素，这一部分可以记录下相关的用法，在有需要的时候适当选用。