主要观点:HTML 链接和按钮不可互换,需正确使用它们。链接用于在当前文档或不同文档间导航,按钮用于特定动作如提交表单等。
关键信息:
- 锚点(链接)用于当前文档内或到其他文档的导航。
- 专用“提交”和“重置”按钮用于特定表单动作。
- 常规按钮用于(JavaScript)动作。
- 可通过 CSS 使链接和按钮外观相似,但仍有细微差别。
重要细节: - MDN 定义:
<a>元素创建超链接,<button>元素由用户激活执行动作,默认外观可通过 CSS 改变。 - 导航示例:链接到当前域内/外页面、当前页特定元素、发送邮件、打开其他应用资源等。动作示例:提交表单、预填表单、打开/关闭对话框等。
- 表单中有两种非通用按钮:提交按钮和重置按钮,还有通用按钮
<button type="button">用于 JavaScript 魔法,可添加click等事件监听器。 - 若有链接和按钮混合,可通过 CSS 使其外观相近,同时应关注其 accessibility 相关内容。
- 进一步阅读可参考 Adrian Roselli 和 Heydon Pickering 的文章。
- 原始 toot 强调正确使用链接和按钮,否则可能导致无法在新标签页打开等问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。