虽然在大多数浏览器中看起来不错，但你错误地使用了<a>元素，因为它里面应该是一个有意义的标签。正确的做法是将整个<h1> Package 在链接中，或者将<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>元素的想法在语义上是荒谬的，我还没有找到任何可靠的地方来记录这样一个元素在浏览器中的行为。

我不太确定您的要求：：或试图达到的目标。
3.在href标记中换行span。
2.使用javascript编写span onclick（）函数

1. span：使用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不是真正的点击的东西。

是的，这是一种将<span>或<img>（或任何您希望成为链接的元素）放入<a>标记中的可靠方法。
click here for Definition and Usage
标记定义了一个超链接，用于从一个页面链接到另一个页面。
元素最重要的属性是href属性，它指示链接的目标。