Html ID属性的另类用法

Html编写过程中,我们经常会对重要元素添加ID属性,例如<div id=”header”></div>,然后会在CSS中定义此id的具体样式,例如#header {width:960px; magin:0px auto;}。但这里要介绍的是,利用ID属性实现锚点的效果。

使用锚点是为了快速定位页面中的具体位置。比如很多网站,在页面的底部都会添加一个快速返回顶部的链接,利用锚点很容是实现此功能。

一. 利用锚点快速返回页面顶端具体实现方法

紧接着<body>,添加如下代码

<a name="top"></a>

页面底部的快速返回顶端链接代码

<a href="#top">返回页面顶端</a>

二. 利用ID属性实现锚点功能

<body>
<div id="header">Header</div>
<a href="header">返回顶部</a>
</body>

因此利用ID属性实现页面的快速定位,代码相当简单。

利用此功能,我们可以开发更为强大的功能,比如说,我们也可以链接到其他页面的指定位置。

<a href="http://www.renniaofei.com/tools/short-url-untiny/#respond">20条评论</a>

上面的示例代码其实就是Wordpress博客中实现快速定位评论具体位置的html代码。所以说在修改Wordpress主题的时候要小心点,尽量不要删除标签ID属性值。

其实任鸟飞网页设计博客的主题就有此问题,在编写评论部分代码时,将评论ID丢掉了,你可以看到本博客右侧页面有 读者墙 功能,正常情况下是可以快速定位到该留言者的具体位置。

举例来说,读者墙某一评论者的链接如下:

<a href="http://www.renniaofei.com/tools/bluehost-webhosting-review/#comment-296" title="国外的比咱的好。">

本应该在

http://www.renniaofei.com/tools/bluehost-webhosting-review/

 页面的评论部分设置该评论者的ID(comment-296),但实际情况,本主题并没有。

2 Comments

  1. 削瘦的疯子 says:

    很简单的一段代码,被你一说,我倒懵了~

  2. 任鸟飞 says:

    @削瘦的疯子 呵呵 说的是,以后尽量写的言简意赅。还希望你能常来常往,指点一下。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

无觅相关文章插件,快速提升流量

任鸟飞网页设计博客 谜题推理 No.1 Web Design Gallery IndustryIdea LookForDesign AWebGallery Mobile Web Template iDesign Wallpaper Big Funny Picture iPhone Faves iPhone Mobi iPad Faves Android Faves BlackBerry Faves Best Design Magazine All Banner Templates Blog Earn Tips 是谁啊 只爱美人 家乡美 唯美爱 美人衣妆 AutoCAD 2D | Pro/E 3D江苏名企The HTML5 Templates