我一直在使用 Twitter Bootstrap 来构建一个网站,它的很多功能都依赖于将东西包装在<a>. 我对href="#"Bootstrap 文档推荐的策略有疑问,所以我试图找到一个不同的解决方案。
<a>
href="#"
但是后来我尝试完全删除该href属性。我一直在使用<a class='bunch of classes' data- whatever='data'>,并让 Javascript 处理其余部分。它有效。
href
<a class='bunch of classes' data- whatever='data'>
然而有些东西告诉我我不应该这样做。正确的?我的意思是,从技术上讲,<a>它应该是一个链接,但我不完全确定 为什么 这是一个问题。或者是吗?
nchor<a>元素只是指向或来自某些内容的锚点。最初,HTML 规范允许命名锚 ( <a name="foo">) 和链接锚 ( <a href="#foo">)。
<a name="foo">
<a href="#foo">
命名锚格式不太常用,因为片段标识符现在用于指定[id]属性(尽管为了向后兼容,您仍然可以指定[name]属性)。没有属性的<a>元素[href]仍然有效。
[id]
[name]
[href]
就语义和样式而言,<a>元素不是链接 ( :link),除非它具有[href]属性。这样做的副作用是,默认情况下,没有的<a>元素不会[href]在跳位顺序中。
:link
真正的问题是<a>元素本身是否是 a 的适当表示<button>。link在语义层面上, a和 a之间有明显的区别button。
<button>
link
button
按钮是单击时会导致动作发生的东西。
链接是导致当前文档导航发生变化的按钮。在片段标识符 ( ) 的情况下,发生的导航可能在文档内移动,或者在 url ( )#foo的情况下移动到新文档。/bar
#foo
/bar
由于链接是一种特殊类型的按钮,因此它们通常会覆盖其操作以执行替代功能。从一致性的角度来看,继续使用锚点作为按钮是可以的,尽管它在语义上不太准确。
如果您担心将<a>元素(或<span>,或<div>)用作按钮的语义和可访问性,则应添加以下属性:
<span>
<div>
<a role="button" tabindex="0" ...>...</a>
按钮角色告诉用户特定元素被视为按钮,作为底层元素可能具有的任何语义的覆盖。
对于<span>和<div>元素,您可能希望为事件添加 JavaScript 键侦听器Space或Enter触发click事件。<a href>和<button>元素默认这样做,但非按钮元素不这样做。click有时将触发器绑定到不同的键更有意义。例如,Web 应用程序中的“帮助”按钮可能绑定到F1.
Space
Enter
click
<a href>
F1