HTML按钮如何实现点击功能_HTML按钮BUTTON标签应用

哈哈，你是问这个吗？我很早就想通了，现在给大家讲一下我当年遇到的坑。

当时，我已经获得了该网站。
如果有按钮，就会弹出一个窗口。
我以为这会很简单。
结果，用户抱怨该网站无法移动。
检查代码，原来，哦不对，我用的是onclick，而不是onlick。
缺少一个字符使浏览器感到困惑。
你不觉得这很有趣吗？
后来我改了，直接用JavaScript写了一个函数，按钮调用了这个函数。
这样就方便多了。
后来按钮多了，我就把每个按钮分开写，没有搞混了。
如果你现在看这个主页，有很多按钮功能。
您可以毫无问题地编辑内容并提交表单。

哦，顺便说一句，我也曾经使用提交作为按钮类型。
结果是在表单以外的地方，点击表单后立即提交表单，给用户造成混乱。
后来了解到，对于非表单场景的按钮，类型应该写成Button。

总而言之，实现按钮功能并不困难。
重要的是要小心，不要犯这种低级错误。
您还有其他问题吗？我再想想。

html函数如何创建模态弹窗效果 html函数对话框元素的现代用法

原生对话框与 showModal 和 close 相结合是现代模式弹出窗口的最佳实践。

清晰的语义：浏览器自动获取焦点并按 Esc 关闭，符合 ARIA 标准。
高可访问性：屏幕阅读器可以正确识别弹出结构。
代码简洁：比传统方法少写5 0%以上的JS。

实施步骤： 1 . HTML 使用 定义内容并通过 ID 分配按钮。
<对话框ID =“我的对话框”>

提示消息

这是一个模态弹出窗口内容

<button id="closeBtn">关闭</button> </对话框> <button id="openBtn">打开弹出窗口</button>
2 JS控制显示和关闭 JavaScript const 对话框 = document.getElementById("myDialog"); const openBtn = document.getElementById("openBtn"); const closeBtn = document.getElementById("closeBtn");
openBtn.addEventListener("click", () =>dialog.showModal()); closeBtn.addEventListener("点击", () =>dialog.close());
3 自定义 CSS 样式和遮罩层 CSS 对话{ 宽度：8 0%； 最大宽度：4 00像素； 边距：1 px实线ddd； 边框半径：8 px； 盒子阴影：0 1 0px 3 0px rgba(0,0,0,0.3 ); 内边距：2 0px； } 对话框::背景{ 背景色：rgba(0,0,0,0.5 ); }
主要优点： 1 .语义：浏览器原生支持ARIA，无需额外配置 2 .内置modal：showModal自动禁用后台交互 3 .键盘支持：Enter键可用于提交表单，Esc会自动关闭
兼容性：完全支持Chrome/Firefox/Safari，Edge兼容性良好。
IE1 1 及更低版本需要对话框填充。

注意：::backdrop仅在playModal时生效，普通show()无效。
关闭时，可以通过dialog.returnValue 检索状态。

提供了示例的完整代码，可以直接使用。
你自己掂量一下吧。