阅读上一章：Chapter 6 短语元素

Chapter 7 锚点

HTML中的链接,正确的说法应该称作"锚点",它不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具.让链接对象接近焦点.在这一章里,我们将看到四种不同的锚点做法,说明每个方法的优点,也会介绍title属性如何能提升链接的易用性,另外也将使用CSS为链接设计样式.

在需要指定到页面的特定部分时,标记锚点是最佳的方法

这是在设计网站时经常遇到的情况,你想链接到某个页面的特定部分,可是使用者正在阅读的可能是在另外的一个页面,接下来讨论的四种方法之中任选一种都能让你达成目标.

在示例中,假设我们打算链接到同一个页面中的特定标题:

方法A:空洞的名称
<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
...更多文字...

使用一个内容空白的锚点标签再配上name属性,标记特定的链接点,或许这是你熟悉的方法,在标题前放一个内容空白的<a>,并且连向它(使用#符号,后面加上name属性的值),就能让我们连到页面的特定部分了,当页面包含了很长需要滚动的项目清单时,我们能通过这个方法十分方便的连到特定的项目.

图7-1显示了点击"About Oranges"链接之后的结果,也就是跳到我们标识<a name="oranges"></a>的地方,正好在标题上面.

图7-1.点击连上具体锚点链接的示例

效果不错,但是浪费一个内容空白的标签来标识链接位置有点不合语义,方法B能改进这点.