这是BBC网站和《卫报》上使用的最好的表达方式:

我在这里找到了技巧: http://codepen.io/IschaGast/pen/Qjxpxo

这是HTML

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

这里是CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

我自作聪明的回答是:

对“如何使块级元素成为超链接并在XHTML 1.1中验证”的回避回答

使用HTML5 DOCTYPE DTD即可。”

但ie7并不适用

onclick = " location.href =“page.html”;“

适用于IE7-9, Chrome, Safari, Firefox，

最简洁的方法是使用jQuery和HTML中引入的数据标记。使用这个解决方案，您可以在每个标签上创建一个链接。首先用data-link标签定义标签(例如div):

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

现在，您可以随意设置div的样式。你还必须为类似“link”的行为创建样式:

[data-link] {
  cursor: pointer;
}

最后把jQuery调用放到页面上:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

jQuery通过这段代码对页面上具有“data-link”属性的每个标记应用一个点击监听器，并重定向到数据链接属性中的URL。

你不能让div本身成为一个链接，但是你可以让一个<a>标签作为一个块，与<div>具有相同的行为。

a {
    display: block;
}

然后你可以设置它的宽度和高度。

虽然我不建议在任何情况下这样做，但下面是一些代码，它将DIV转换为链接(注意:本例使用jQuery，为了简单起见，删除了某些标记):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是，您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为这违背了标记验证的目的，标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不需要验证，但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外，使用onclick不会为屏幕阅读器提供语义信息，以确定div是作为链接使用的。