育知同创-专注移动互联网,专注强师高品质课程|Android培训|HTML5培训|Java培训|VR培训

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 深圳 大连 武汉

▶ 您现在的位置:首页 > 视频教程 > 《Mars亲授HTML5开发视频教程》第04讲-超链接与锚点

《Mars亲授HTML5开发视频教程》第04讲-超链接与锚点

时间:2016-03-12 14:42:38  来源:育知同创  作者:育知

  •  

     

    主要内容

    1、什么是链接

    2、链接标签的使用方法

    3、什么是锚点

    4、锚点的使用方法

     

    1、什么是链接

    链接不但是HTML的核心,更加是整个互联网的基石,是一项怎么渲染都不为过的技术。打个比喻,如果说拿互联网和整个人类世界做比较,那么链接就相当于货币,是把整个世界的人连接起来的工具。正是因为有了货币,才能够让全人类拥有了无比庞大的协作系统。

    大家可以想象一下,如果没有货币交换的支持,所有的事情都需要自己做,那基本上就是原始社会,自己种地,自己煮盐,自己炼铁,什么都要自己做才能活下去。生活在现在的我们根本无法想象这样的生活。而链接就相当于互联网世界当中的货币,它把散落在世界各个角落的信息连接起来,产生了巨大的价值。

     

    例如,如果我们在查看印刷在书本上的一篇论文,当遇到一些比较复杂的专业词汇时,可能不得不停下来,然后到另外的资料当中寻找这些词汇的解释,而且最悲催的是,就算是好不容易从图书馆当中把这些资料查找出来,有可能在解释的资料里面又遇到了陌生的专业词汇,这样拔出萝卜带出泥,大大的提升了大家获取信息的复杂程度。

    但是如果我们是把论文使用HTML格式将其组织起来之后,将论文当中所有复杂的概念都使用链接标记出来,人们可以很方便的点击链接查看不懂的内容,搞清楚之后再回到论文本身继续的阅读,当然这也是链接价值当中很小的一个方面。

     

    根据上面的例子,大家可以简单的把链接理解为互联网当中的传送门,只要用户点击了链接,就可以在浏览器当中显示这个链接所指向的页面,互联网就是通过这样的方式,将浩如烟海的信息组织起来,大大的提升的信息传递的效率;

     

    2、链接的使用方法

    下面我们就来看一下链接的基本使用方法,如果需要在页面当中插入一个链接,就需要使用链接内容标签,浏览器读取到该标签之后,默认会显示一行蓝色的文本,并在文本内容上添加下划线。当用户的鼠标放置在链接之上时,会显示成一个小手的形状,用于提醒用户这是一个链接,点击后浏览器会读取链接地址指定的网页,并将其显示出来。

    这里首先要为大家解释的的是href="链接地址"这个属性。

    在前几节的课程当中我们好像并没有见过这样的东西,它叫做一个属性,用于描述标签的详细信息。在HTML当中,很多标签都拥有属性,而且有的还拥有不止一个属性。属性的定义必须要在标签的开始标签之中完成,并且以键值对的方式出现。例如href就是键(key),而=右边的内容就是对应的值。这个属性用于描述,当链接被点击之后,浏览器应当读取并显示哪一个页面。

    除了href属性之外,链接还拥有一个名为target的属性,该属性主要用于描述网页打开的位置,主要的取值有两种,第一种:target="_blank",另一种是target="_self"。

    第一种属性的值表示如果用户点击了链接,浏览器就会重新打开一个页面,然后显示该链接指向的网页,原来的网页依然保持不变。

    而第二种属性的值则表示在当前页面打开链接,显示链接指向的页面。其实target属性还有另外的两种取值,但是在最新的HTML5标准当中已经不再使用,所以在我们的课程当中也就不再介绍了。

    3、什么是锚点

    学到这里不知道大家有没有发现一个小小的问题,那就是链接标签的名字为什么是a,按道理来说,链接的英文是link,为什么链接标签不叫做l呢? 其实链接标签的名字是anchor这个单词的第一个字母,这个单词翻译成为汉语就是“锚”的意思。

     

    那么锚和链接有毛关系呢?

    首先我们还是要从锚这个东西入手。我们都知道,所谓的锚是船上面的一种工具,当船在水中停下来的时候,就将锚抛入水中,勾住水底的一些泥沙或者是石头,将船只固定在原地。那么这个概念跟我们的网页有什么关系呢? 在W3C标准当中有这样的一段话:

    The Anchor object represents an HTML tag. This object allows you to create a link to another document (with the href attribute), or to a different point in the same document (with the name attribute).

    通过这段话我们可以看出,标签除了可以表示一个超级链接之外,还可以表示同一份文档当中的另一个点,此时需要使用标签当中的name属性。

     

    4、锚点的使用方法

    使用锚点的时候,首先需要在当前的HTML网页当中标识一个点,具体的方法就是为标签添加一个名为name的属性,这样就可以在当前网页的当前位置标识一个点,并且为这个点起一个名字;

    <h2><a name="first_title">文章第一段标题</a></h2>

    然后,在网页当中的其他地方使用标签的href属性引用这个名字,这样使用的时候需要在所应用的锚点名称前面加上#:
     <a href="#first_title>返回文章的第一个标题</a>
     
     
    往期回顾

    《Mars亲授HTML5开发视频教程》第00讲-课程综述

    《Mars亲授HTML5开发视频教程》第01讲-学习方法

    《Mars亲授HTML5开发视频教程》第02讲-第一个HTML程序

    《Mars亲授HTML5开发视频教程》第03讲-文本标签





上一篇:育知同创Android公开课01期:Steven陪你学Android_材料设计综合应用(三)

下一篇:育知同创Android公开课02期:初探Android与HTML5混合式开发(一)


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号