代码之家 › 专栏 › 技术社区 › 1.21 gigawatts

可以用锚代替div容器吗?

anchor html

0

1.21 gigawatts · 技术社区 · 7 年前

有没有理由不使用锚定标记而不是div标记作为容器?

当前代码:

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

建议代码:

<a id="container" 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>

1 回复 | 直到 6 年前

1

2

Hooman Bahreini 7 年前

这完全适用于 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>

使用和 span 显示

<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>