每日Html 4.24

📚 每日一个Html小知识 🐍

每天花1分钟，解锁一个Html实用技巧/冷知识！无论是新手还是老手，这里都有让你眼前一亮的编程干货。

✨ 今日主题：<dialog> 标签

💡 你知道吗？ 浏览器现在原生支持模态弹窗了！

热气腾腾的代码示例来咯~

<dialog id="myDialog"><h2>系统提示</h2><p>确定要删除这条数据吗？</p><button onclick="dialog.close()">取消</button><button onclick="deleteItem()">确定</button>
</dialog><script>const dialog = document.getElementById('myDialog');// 显示弹窗dialog.showModal();// 点击外部自动关闭（需polyfill）dialog.addEventListener('click', (e) => {if (e.target === dialog) dialog.close();});
</script>

优势：
✅ 无需JS框架
✅ 内置焦点管理
✅ 支持::backdrop伪元素美化

适用场景：表单确认、通知提示

你学会了吗？