天高任鸟飞

       

Html ID属性的另类用法

作者：     目录： CSS+HTML & PHP+MySQL     发表： 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. 任鸟飞说道：
    2010年06月2日 1:23 上午

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

  2. 削瘦的疯子说道：
    2010年06月2日 1:16 上午

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

发表评论