联系柠檬工作室

博客的评论链接经常看到类似如下地址:

http://www.crazylemon.net/crazylemon/xxxx.html/comment-page-1#comment-xxxx

此链接不公可跳转至指定页面,还可以定位到具体的段落位置,即HTML标记语言-锚点的使用

说明如下:

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

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

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

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

方法A:空洞的名称

<p><a href=”#oranges”>About Oranges</a></p>

…一些文字…

<a name=”oranges”></a>

<h2>Oranges Are Tasty</h2>

…更多文字…

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

方法B:全部在名称之内

<p><a href=”#oranges”>About Oranges</a></p>

…一些文字…

<h2><a name=”oranges”>Oranges Are Tasty</a></h2>

…更多文字…

与方法A一样,我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面,这么做看起来的确比较符合语义,在方法A里头,我们的连接对象是…恩,什么都没有,但是在方法B里,我们不仅说明了这段文字是标题标签的一部分,同时也是这个页面的连接锚点之一.

注意:小心<a>的全局样式!

还有更多方法,请参考网站资料

奇怪的是,我的其它网站在特定因素下,如用theworld或IE7以下浏览时,地址后会跟个#号,晕死,没有参数的

这个暂时不明原因,应该是html代码兼容性问题,而且应该不影响SEO

相关日志

你可以发表评论引用到你的网站或博客,或通过RSS 2.0订阅这个日志的所有评论。
上一篇:
下一篇:
没有评论
我来说两句

  Ctrl+Enter