黑马程序员—HTML之链接

   

-------------------- Windows Phone 7手机开发.Net培训、期待与您交流! --------------------

 

    在这篇文章中我带大家学习如何在网页之间做链接。使大家学会连接。做链接也是通过元素(element)实现的。做链接只需一个元素和一个属性就行了。下面是一个例子,它是一个指向cnzz.cn的链接:

例1:

<a href="http://www.cnzz.cn/">这是一个指向cnzz.cn的链接</a>

该例在浏览器中将显示如下:

这是一个指向cnzz.cn的链接
元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertext reference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

在上例中,属性href的值为“http://www.cnzz.cn”,这是cnzz.cn网站的完整地址,也被称作URL(统一资源定位符)。注意,在URL里必须包含“http://”。“这是一个指向cnzz.cn的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</a>。如何在同一网站的网页之间添加相互链接?
如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。举个例子,假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中,那么你在做链接的时候,只要写出文件名就行了。这样,page1.htm到page2.htm的链接将如下所示:

例2:<a href="page2.htm">点击这里转到第2页</a>

如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样:

例3:<a href="subfolder/page2.htm">点击这里转到第2页</a>

反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样:

例4:<a href="../page1.htm">转到第1页</a>

“../”代表当前位置(即该链接所在文件所处的文件夹)的上一级文件夹。同理,当前位置的上上级文件夹可用“../../”表示。

明白其中的规则了吗?当然,如果给出完整URL也行。呵呵,是不是感觉简单点呢?我想在这基础上再去学习杨中科老师的视频的话是不是会理解的更好呢?

如果要在一个网页内做链接怎么办呢?
你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录,在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。

用id属性标出要被指向的元素。例如:
<h1 id="heading1">标题1</h1>

然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值,表明链接指向该id属性被定义的地方。例如:
<a href="#heading1">转到标题1</a>来看一个例子就明白了:

例5:<html>
<head>
</head>

<body>

<p><a href="#heading1">转到标题1</a></p>
<p><a href="#heading2">转到标题2</a></p>

<h1 id="heading1">标题1</h1>
<p>一些文字。。。。</p>

<h1 id="heading2">标题2</h1>
<p>一些文字。。。。
</p>

</body>

</html>

该例在浏览器中将显示如下(你可以试试看点击这两个链接):

转到标题1

转到标题2

标题1
一些文字。。。

标题2
一些文字。。。

(注:id属性必须以字母开头)

除了网页,链接还能指向什么?
你还可以为e-mail地址做链接,方法跟为网页做链接差不多:

例6:

<a href=mailto:soft@cnzz.cn>给soft@cnzz.cn发电子邮件</a>

该例在浏览器中将显示如下:

给soft@cnzz.cn发电子邮件

与指向网页的链接的唯一区别在于:指向e-mail地址的链接必须以mailto:开头,然后紧接着写e-mail地址。当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收件人地址为链接中指定的e-mail地址。注意:这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧!还有其他我们需要知道的属性。创建链接总要用到href属性。另外,你也可以在链接上使用title属性:

例7:

<a href="http://www.cnzz.cn/" title="上cnzz.cn网站学习HTML">cnzz.cn</a>

该例在浏览器中将显示如下:

cnzz.cn

title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上cnzz.cn网站学习HTML”便会出现。看了这篇文章学完里面的连接的话那么对于HTML的连接应该就会全部的掌握,当然原理是很容易理解的,如果我们要向彻底的学会,那么还是老话,多做练习,相信我们能够学会,为进黑马加油!

-------------------- Windows Phone 7手机开发.Net培训、期待与您交流! --------------------

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值