• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

8.4 锚点链接

一、锚点链接简介

锚点链接是内部链接的一种,它链接对象是当前页面的某一个部分。

有些网页由于内容比较多,导致页面过长,访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容,如下图。为了方便用户查看文档中的内容,在文档中需要建立锚点链接。

大网站中的锚点链接

所谓的锚点链接,就是点击某一个超链接,它就会跳到当前页面的某一部分。如下图:

锚点链接

只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接,滚动条就会滚动到相应的版块。

现在我们来做一下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>锚点链接</title>
</head>
<body>
    <div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

分析:

大家仔细观察上面的代码就知道了,锚点链接要设置两部分:一,是目标锚点的id名称;二是超链接部分。

id也就是元素的名称,跟name属性一样。区别在于name是HTML中的标准,而id是XHTML中的标准,在web2.0的网页中极少使用name属性,而是使用id属性。在同一个页面中,id是唯一的,也就是一个页面不允许出现相同的id。你见过谁的身份证号码是相同的吗?

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部