Question

有没有理由不使用锚标签而不是div标签作为容器？

当前代码：

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

建议的代码：

<a href="#page1.html">
    <span>Some content</span>
</a>

这是一个似乎正在运行的实时演示：

.myClass {
  opacity: 1;
  position: absolute;
  left: 50px;
  top: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 148px;
  white-space: nowrap;
  text-align: left;
  font-family: Comic Sans MS;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  outline: 1px dashed red;
}

.class2 {
  top: 60px;
}

<a href="#page1.html">
  <div id="container" class="myClass">
    <span>Some content</span>
  </div>
</a>


<a href="#page1.html" class="myClass class2">
  <span>Some content</span>
</a>

Answer 1

这在 HTML5 中完全有效：

<a href="#page1.html">
    <div id="container">
        <span>Some content</span>
    </div>
</a>

唯一的区别是锚标记的默认display为inline，而div的默认显示为block。

来自w3.org：

a元素可以包裹在整个段落，列表，表格，依此类推，甚至整个部分，只要没有内的互动内容（例如按钮或其他链接）。这个例子展示了如何将其用于将整个广告块制作成链接：
<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

更新的答案

在锚点内使用div和span的唯一区别是它们的display ...如下面的示例所示，跨度以行内显示，而div为显示为块元素（当然，您可以更改CSS中的默认显示）：

<a href="#">
    <span>inline element1</span>
</a>

<a href="#">
    <span>inline element2</span>
</a>


<a href="#page1.html" class="myClass class2">
  <div>block elemnt1</div>
</a>

<a href="#page1.html" class="myClass class2">
  <div>block elemnt2</div>
</a>

可以使用锚代替div容器吗？

1 个答案:

更新的答案