超链接做个书签, id 的利用

首先演示下: 点击这个超链接，可以到文章的末尾。

如果点回来了，我们继续看故事。

常常可以看到，很多博客的评论下面，我们可以@某个人，然后一点击，直接跳转到那个人的原文评论了，中间显然没有经过服务器的请求。 又有一些长篇大论的页面，页首有个目录，点击目录中的超链接，页面直接移动到相应的位置。 那么，这个跳转是怎么实现的呢？

引自w3cschool中的两段材料

1. id

我们知道，html标签的每个元素(elements)都可以有一些属性(attributes),比如<div>标签可以加上class属性变成

<div class="some_class_you_setted"><!-- some content --></div>

而在w3cschool提到

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference. Below is a list of some attributes that can be used on any HTML element:

其中有我们这次的主角: id 描述中说到

id Specifies a unique id for an element

也就是说，按照标准，元素具有唯一的id.我们可以给任意元素里面加个属性id="blablabla".当然，我们要让这个id是唯一的。如果违反了这个规则，扩展写js之类会有问题--当然这是后话了。

2. Links

这个页面介绍了HTML的超链接. 其实无非就是

<a href="xxx"></a>

这么个样式。

但是特别的，w3cschool还有这么个描述:

HTML Links - The id Attribute The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader. Example An anchor with an id inside an HTML document: <a id="tips"></a>Useful Tips Section Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a> Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section

实现的示例

从前面的材料,我们已经有了足够的认知，可以轻松实现需要的功能。 书签写成这样:

<h2 id="end_of_log">这就是故事的结局</h2>

超链接写成这样:

<a title="这就是故事的结局" href="#end_of_log">点击这个超链接，可以到文章的末尾。</a>

一个简单的页内链接即可搞定。

扩展

不止"id"属性有此功能

id属性是唯一的，而name属性不是唯一的。 当某个元素打上name,也是可以得到同样的效果。 比如:

<h2 name="#end_of_log">这就是故事的结局</h2>

效果是，当没有id="end_of_log"的时候，你会到首个name为"end_of_log"的标签处。 而如果有id="end_of_log"的时候，直接跳转到end_of_log 注意，W3C是不赞成用name="end_of_log"的，只是说,"可以这样用".

href的值

其实，href的值,一个url,内容还是很灵活的，它不仅有前面说的跳转到书签:

<a href="#end_of_log">a link</a>

可以是相对地址,比如

<a href="css/abc.css">a link</a>

如果在网站的子目录，我们需要引用一个相对路径，这是个好办法。

可以是当前域名的绝对地址

<a href="/css/abc.css">a link</a>

这样的话，我们就可以使用一个公用的绝对路径。

可以是某个外部网站

<a href="http://argcv.com">a link</a>

外部网站还可以写成这样:

<a href="//blog.argcv.com">a link</a>

省略掉前面的 http: 或者 https: 等有个好处，就是我们可以平滑使用当前使用的协议 (http, https, ftp 等) 然后访问相应地址。在引用 js 的时候也非常有用。比如我们引用一个 js 的库，因为 https 的页面去调用外部的 http 库是禁止选项。我们可以用 "//" 开头的资源，这样 js 库和我们当前的库保持一致了。

不过我们要是本地打开个 html，那么协议就是 file:// 这时候 "//" 开头的内容就不对了。

这就是故事的结局

演示结束，可以点击这里返回文首.