Question

使跨度变为可点击的链接。

我已将一个跨度仅包含背景图像（作为Gilder / Levin图像替换技术的一部分）插入了可点击的链接，它似乎可以正常工作-到目前为止，这仅靠我自己台式机以及Chrome，Opera和IE 11上。

这可行吗？

<div id="logo">
  <a href="[absolute url]"> 
    <span></span>
  </a>
  <h1>page name</h1>
</div>

它可以在我的计算机上使用Chrome，IE11和Opera。可以通用吗？

Answer 1

虽然在大多数浏览器中看起来不错，但您使用的<a>元素不正确，因为其中的内容应该是有意义的标签。正确的做法是将整个<h1>包装在链接中，或将<a>放在<h1>中（两者都是有效的HTML5）。

<a href="[absolute url]"> 
  <span></span> <h1>page name</h1>
</a>

但是从您的评论来看，当您仍然想弄清楚语法的时候，现在开始考虑图像替换技术和Web语义可能还为时过早。

图像替换技术的意义何在？为什么使用空白的<a>标签不好？

Gilder / Levin图像替换技术包括向页面添加非语义元素（例如<span>元素），并使用CSS将其替换为图标，以便屏幕阅读器将其忽略。毕竟，菜单按钮旁边的图标可能会使该按钮对于可以看到的人更可见，但是当您失明并且正在使用屏幕阅读器时，该图标将变得多余，该屏幕阅读器无论如何都会大声朗读按钮的文本。这也可能使您的网站更容易被搜索引擎解析。

但是，在原始代码中，您没有在链接上放置任何标签（<a>和</a>之间的实际文本），因此，这对于屏幕阅读器和机器人来说尤其容易混淆该链接应该是什么。在这种情况下，整个标题应位于<a>元素内，从而允许单击整行以跟随链接。使用空的<a>元素绝对不是一个好习惯，而且其中包含<span>的事实也不会改变。

由于离开<a>元素的想法在语义上是荒谬的，所以我没有找到任何可靠的地方来记录这种元素在浏览器中的行为。

Answer 2

不确定您要的是什么：:或试图实现。
3。将跨度包裹在href标记中。
2。使用javascript跨度onclick（）函数
1。跨度：与CSS悬停。

<div id="logo">
   <a href="[absolute url]">
      <span>this span is now like link text.</span>
   </a>
   <h1>page name</h1>
</div>


<div id="logo">
     <span onclick="myFunction()">this span is now like link text.</span>
   <h1>page name</h1>
</div>

<style>
span:hover{color:red;}
span:active {color:green}
</style>

css不是真正的单击内容。

Answer 3

是的，这是将<span>放在<a>标记中的可靠方法。

此外，您只需使用“ onclick” JavaScript事件使其正常工作，就可以使用javascript从<span>建立链接，而无需建立<a>链接。

<span onclick="window.open('url...')" > Some Text </span>

但是，我认为在<span>标签中使用<a>会更好。

可以将<span>设置为可点击的链接吗？

3 个答案: