0元购京东自营斐讯K2路由器返399元活动
置顶

Html ID属性的另类用法

作者:     目录: 小代码 & 网页设计     发表: 2010年04月27日

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://renniaofei.com/tools/short-url-untiny/#respond">20条评论</a>

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

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

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

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

本应该在

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

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

标签:.

2 个评论

  1. 削瘦的疯子 says:

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

  2. 任鸟飞 says:

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

发表评论

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