HTML的链接方式方法
发布时间：2011-06-25 23:06:01作者：知识屋
链接
在这一课，你将学习如何在网页之间做链接。
如何做链接？
做链接也是通过元素（element）实现的。做链接只需一个元素和一个属性就行了。下面是一个例子，它是一个指向HTML.net的链接：
例1：
<a href="http://www.html.net/">这是一个指向HTML.net的链接</a>
该例在浏览器中将显示如下：
元素a代表“链接（anchor）”；属性href代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。
在上例中，属性href的值为“http://www.html.net”，这是HTML.net网站的完整地址，也被称作URL（统一资源定位符）。注意，在URL里必须包含“http://”。“这是一个指向HTML.net的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</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:nobody@html.net">给nobody@html.net发电子邮件</a>
该例在浏览器中将显示如下：
给nobody@dnjsb.com发电子邮件
与指向网页的链接的唯一区别在于：指向e-mail地址的链接必须以mailto:开头，然后紧接着写e-mail地址。当点击这个链接的时候，缺省的e-mail程序将新建一封邮件，其中的收件人地址为链接中指定的e-mail地址。注意：这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧！
有其他我需要知道的属性吗？
创建链接总要用到href属性。另外，你也可以在链接上使用title属性：
例7：
<a href="http://www.html.net/" title="上HTML.net网站学习HTML">HTML.net</a>
该例在浏览器中将显示如下：
相关知识
软件推荐
更多 >
-
1网页WB.ExecWB控件打印方法调用说明及参数介绍
2013-02-03
-
2
html5 音乐播放器 audio 标签使用概述
-
3
2012年HTML5的14个大胆预言
-
4
html标签marquee
-
5
HTML 基本语法 方便刚开始学习html的朋友
-
6
HTML5实验：JavaScript模拟流体效果
-
7
HTML页面做中间页跳转传递参数
-
8
html滚动条 textarea属性设置
-
9
HTML5教程：html标签属性通过w3c验证
-
10
响应式布局这件小事 设计师如何实现响应
