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

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

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

引自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:// 这时候 "//" 开头的内容就不对了。

这就是故事的结局

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


Yu

Ideals are like the stars: we never reach them, but like the mariners of the sea, we chart our course by them.

16 Comments

Leniy · April 10, 2013 at 09:26

Unknown Unknown Unknown Unknown

恩.第一次知道http不用写也能用.

ghostry · March 23, 2013 at 22:30

Google Chrome 26.0.1410.10 Google Chrome 26.0.1410.10 Windows 7 x64 Edition Windows 7 x64 Edition

恩.第一次知道http不用写也能用.

    Yu Jing · March 23, 2013 at 22:32

    Google Chrome 25.0.1364.172 Google Chrome 25.0.1364.172 GNU/Linux x64 GNU/Linux x64

    喂…你们都歪楼了
    我明明是说锚点之类的说

      花舞花落泪 · April 1, 2013 at 20:51

      Opera 12.14 Opera 12.14 Windows 7 Windows 7

      嘿嘿嘿嘿嘿嘿,关键是你所描述的这个都知道……而//不知道。。哈哈哈

花舞花落泪 · March 21, 2013 at 19:32

Opera 12.14 Opera 12.14 Windows 7 Windows 7

重点的是这个。。。href=”//argcandargv.com”
居然不知道到可以这样用。。。

    Yu Jing · March 21, 2013 at 19:35

    Google Chrome 25.0.1364.172 Google Chrome 25.0.1364.172 Windows 7 x64 Edition Windows 7 x64 Edition

    这个就是默认的跳转
    比如你http的,就用http访问过去,https的,就直接https访问。
    如果在本地打开个html,这个会跳转到 file://argcandargv.com 去
    嗯,就是酱紫

      花舞花落泪 · March 25, 2013 at 13:34

      Google Chrome 24.0.1312.56 Google Chrome 24.0.1312.56 Windows 7 Windows 7

      恩,就是对协议不太确定的时候使用?

        yu · March 25, 2013 at 14:18

        Google Chrome 25.0.1364.172 Google Chrome 25.0.1364.172 GNU/Linux x64 GNU/Linux x64

        纯粹就是为了省事
        一般http,https之类,是指定某个协议访问,// 开头指的是”继续使用当前协议”访问。
        如果本地打开这个,file://argcandargv.com 就是无法连接了

          花舞花落泪 · March 25, 2013 at 19:18

          Google Chrome 24.0.1312.56 Google Chrome 24.0.1312.56 Windows 7 Windows 7

          恩。好想法,哈哈

花七七 · March 20, 2013 at 12:40

Unknown Unknown Unknown Unknown

囧。。。话说你的评论嵌套不打算隔一点位置?margin?

    yu · March 20, 2013 at 12:46

    Unknown Unknown Unknown Unknown

    差不多行了,其他事情都忙不过来的说

花七七 · March 16, 2013 at 11:53

Google Chrome 27.0.1440.0 Google Chrome 27.0.1440.0 Windows 8 x64 Edition Windows 8 x64 Edition

但是……重点只有后面的扩展。。。哈哈~

    Yu Jing · March 16, 2013 at 13:57

    Google Chrome 25.0.1364.172 Google Chrome 25.0.1364.172 Windows 7 x64 Edition Windows 7 x64 Edition

    囧…我前端基本不会的说,极其偶尔的情况才用到

      花七七 · March 16, 2013 at 15:24

      Google Chrome 27.0.1440.0 Google Chrome 27.0.1440.0 Windows 8 x64 Edition Windows 8 x64 Edition

      呵呵,我前后都不会=。=~~~膜拜一下大神啦~~~

        Yu Jing · March 16, 2013 at 16:03

        Google Chrome 25.0.1364.172 Google Chrome 25.0.1364.172 Windows 7 x64 Edition Windows 7 x64 Edition

        囧 …不要这么装嫩吧花老师

花七七 · March 16, 2013 at 11:52

Google Chrome 27.0.1440.0 Google Chrome 27.0.1440.0 Windows 8 x64 Edition Windows 8 x64 Edition

好专业的说。。

Leave a Reply to Yu Jing Cancel reply

Your email address will not be published. Required fields are marked *