可以<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 屬性，它表示鏈接的目的地。