html并不简单读书笔记-5

自带交互特效的那些html

非常实用的details元素

黄金搭档summary元素

这里，details元素通常会与summary元素以前出现。要是缺少summary元素，浏览器会自动补上

对于样式的自定义，可以使用::marker.
这样在很多的时候，无需使用js，就可以实现一个展开收起的效果。点击查看详情

dialog元素

dialog元素里面可以是任意的元素，甚至可以是dialog。点击打开对话框的时候，补上居中显示在屏幕。而是在dialog元素的dom树附近。
dialog的不可替代性
1.form元素与对话框的自动关闭
在对话框里，总有一个按钮就只有关闭的特性，而没有其他任何的逻辑，这时候，只要在form元素上设置成method=“dialog”。这样，在表单触发提交的操作的时候，会关闭弹窗，而不是触发刷新等其他操作。
2.关闭来源的判断
dialog元素的dom对象上，有一个retuirnValue属性，可以自动或者手动设置对话框关闭行为的来源。

    <dialog id="dialog">
        <form action="">
            <button value="cancel">取消</button> // 这样点击按钮后，触发时可以获得cancel，但是如果是按ESC等关闭，这样这个值为空
        </form>
    </dialog>

3.自动聚焦特性
打开dialog的时候，可以自动聚焦到第一个元素（能够聚焦的元素），并且拥有键盘的无障碍访问等功能。
4.showModal()
以上打开的方法都是用show(),如果用showModal打开，会变为真正意义上的对话框，会居中定位，并且多了个黑色的半透明模态层。showModel的打开方式
对话框的半透明背景可以使用伪类元素backdrop。
showModel()打开的弹窗也有自动聚焦的特性，并且拥有焦点隔离——进弹窗里的元素可以聚焦。
5.顶层特性
使用show打开的弹窗，设置层级需要使用z-index。
使用showModel打开的弹窗，会自动层级最高。
顶层特性叫做top-layer,实现的原理比较简单，直接在html窗体之外创建一个绘制图层，自然可以覆盖也没主题的所以元素。
如果有多个对话框通过showModel打开，那么后显示的对话框层级最高。而模拟态的(show方法打开的)则是看打开的时机，与dom的层级无关

popover

用于实现屏幕定位的弹层效果，现已经被各大浏览器所支持。

个人感觉，这个属性除了比较轻量以为，感觉没有别的其他优势了，甚连定位都没有。😭

控件伴侣babel

babel元素语义是标签，但通常使用的使用都是用a元素,然后用rel=“tag”。
还有在表单里也经常出现，作为传统元素的伴生使用，例如button，input，text等。使用它的好处，就是扩大了输入框的响应区域