可以<span>制作成可点击的链接吗？</span>

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>

但是从您的评论来看，当您仍在弄清楚语法时，现在开始担心图像替换技术和网络语义可能为时过早。

---

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

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

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

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

Answer 2

不太确定你在要求什么：或试图实现。
3. 将 span 包裹在 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>或<img> （或任何您想作为链接的元素）放在<a>标签中是一种可靠的方法。

单击此处了解定义和用法

该标签定义了一个超链接，用于从一个页面链接到另一个页面。

该元素最重要的属性是 href 属性，它表示链接的目的地。