HTML网页超链接标记_HTML/Xhtml_网页制作

PHP中文网

发布时间：2016-05-16 16:44:09

5146人浏览过

来源于php中文网

原创

HTML网页超链接标记学习教程
链接标记的属性
链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)。在地址栏输入http://www.jb51.net然后回车，会打开本站网站的主页面。可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。
链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。
链接标记的属性见下表
属性描述 href 指定链接地址 name 给链接命名 title 给链接提示文字 target 指定链接的目标窗口 accesskey 链接热键
关于路径
每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下，但是当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种：绝对路径
如http://www.jb51.net 相对路径
如news/default.htm 根路径
如/website/news/default.htm
在了解这三种地址形式前先要理解另外两个概念：内部链接和外部链接
内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称做外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。
下面分别介绍这3种链接：

绝对路径

绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。一般常见的有：

http://www.sohu.com

ftp://202.136.254.1

当链接到其它网站中的文件时，必须使用绝对链接。相对路径

Gambo

世界上首个游戏氛围编程智能体

下载

立即学习“前端免费学习笔记（深入）”；

相对链接最适合网站的内部链接。只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

相对链接的使用方法为：如果链接到同一目录下，则只需输入要链接文档的名称。要链接到下一级目录中的文件，只需先输入目录名，然后加" / "再输入文件名。如链接到上一级目录中的文件，则先输入"…/ "，再输入目录名、文件名。根路径

根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用：当站点的规模非常大，防置于几个服务器上时当一个服务器上同时放置几个站点时

根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。根路径以" / "开始，然后是根目录下的目录名。
#p#
制作内部链接
所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需内容的html文件。
下面我们建立3个网页页面，在第一个8-1.htm网页页面中，制作到8-1-1.htm和8-1-2.htm两个页面的链接，并在两个被链接的页面中制作返回到8-1.htm页面的链接。3个页面的目录关系如下所示：
8-1.htm和8-1-1.htm存放在网站的根目录下，8-1-2.htm存放在test目录下。基本语法 <a href="File＿name">链接文字</a>语法解释
通过href属性指定地址，File＿name为要链接文件的路径，"链接文字"为鼠标单击的文字内容。文件范例：8-1.htm
通过<a>标记建立两个链接，分别链接到另外两个html页面中。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>建立内部链接</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <p>目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。</p>
12 <a href="8-1-1.htm">网页制作软件Dreamweaver mx 2004</a>
13 <br>
14 <a href="test/8-1-2.htm">网页动画软件Flash mx 2004</a>
15 </body>
16 </html> 文件说明
第12行定义了到8-1-1.htm同级页面的链接，第14行定义了到test目录下的8-1-2.htm页面的链接。文件范例：8-1-1.htm
这个文件是"网页制作软件Dreamweaver mx 2004"页面，通过<a>标记建立返回到 8-1.htm页面的链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>内部链接文件之一</title>
08 </head>
09 <body>
10 <h1>Dreamweaver mx 2004</h1>
11 Dreamweaver mx 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。mx版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合，无疑为制作网站提供了更多的实现方式。
12 <p>
13 <a href="8-1.htm">返回</a>
14 </body>
15 </html> 文件说明
第13行定义了到8-1.htm同级页面的链接。文件范例：8-1-2.htm
这个文件是"网页动画软件Flash mx 2004"页面，通过<a>标记建立返回到8-1.htm页面的链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>内部链接文件之二</title>
08 </head>
09 <body>
10 <h1>Flash mx 2004</h1>
11 Flash mx 2004作为网页矢量交互动画软件的代表，提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术，广告banner、动画片头、mtv、交互游戏，广阔的应用为Flash的学习者提供了广泛的发展平台，学习Flash mx 2004软件更是一个具有诱惑力的过程。
12 <p>
13 <a href="../8-1.htm">返回</a>
14 </body>
15 </html> 文件说明
第13行定义了到8-1.htm上一级页面的链接。
#p#
设定链接的目标窗口
单击链接后，默认的浏览器窗口是原有窗口，我们可以指定这个链接打开的目标窗口，如新开窗口等。基本语法 <a href="File＿name" target="value">链接文字</a>语法解释
通过target定义目标窗口，value的取值如下表所示属性值描述＿parent 在上一级窗口中打开。一般使用分帧的框架会经常使用＿blank 在新窗口中打开＿self 在同一个帧或窗口中打开，这项一般不用设置＿top 在浏览器的整个窗口中打开，忽略任何框架文件范例：8-2.htm
通过target属性设定链接的目标窗口。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接的目标窗口</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromweaver公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
12 <a href="8-1-1.htm" target="_self">网页制作软件Dreamweaver mx 2004</a>
13 <br>
14 <a href="test/8-1-2.htm" target="_blank">网页动画软件Flash mx 2004</a>
15 </body>
16 </html> 文件说明
第12行定义了在原窗口显示链接页面，第14行定义了在新开窗口显示链接页面。
#p#
建立书签链接
在浏览页面的时候，如果页面的内容较多、页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该网页或另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，应该是件很方便的事，并且还可以在页面中设定诸如"返回首页"的链接。这就称为书签链接。
建立书签链接分为两步：一是建立书签，二是为书签建立链接。
下面来制作一个包含网页设计三剑客内容的软件介绍页面，并为其中的每一个软件建立一个书签，这个书签就是随后将要跳转转的位置。也就是说，这个书签就确定了一个页面内部的链接导引依据。基本语法 <a name="name">文字</a>文件范例：8-3.htm
为页面中<h3>三段标题文字建立书签链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>建立书签链接</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <a name="dw"><h3>Dreamweaver mx 2004</h3></a>
12 Dreamweaver mx 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。mx版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合，无疑为制作网站提供了更多的实现方式。
13 <p>
14 <a name="fl"><h3>Flash mx 2004</h3></a>
15 Flash mx 2004作为网页矢量交互动画软件的代表，提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术，广告banner、动画片头、mtv、交互游戏，广阔的应用为Flash的学习者提供了广泛的发展平台，学习Flash mx 2004软件更是一个具有诱惑力的过程。
16 <p>
17 <a name="fw"><h3>Fireworks mx 2004</h3></a>
18 Fireworks mx 2004作为网页图像设计软件的代表，在继承了前期版本图形绘制、页面特效功能的同时，大大地发展了位图图像方面的处理功能，这无疑使这个软件有了更大的向Photoshop挑战的资本，而其在网页设计方面的诸多应用，又是无任何软件可与之媲美。与Dreamweaver mx 2004的整合使其在专业网站图像设计过程中，早已并继续扮演着不可或缺的角色。
19 <p>
20 </body>
21 </html> 文件说明
第11、14、17行分别定义了3各段落标题文字的书签名称dw、fl、fw。
#p#
链接同一页面中的书签
下面我们就为制作的8-3.htm制作好链接，我们希望在页面的起始位置制作3个链接，分别链接到每一个软件介绍的位置上。基本语法 <a href="bookmark＿name">文字链接</a>语法解释
bookmark＿name就是刚刚定义的书签名称。文件范例：8-4.htm
制作3个链接，分别到页面中<h3>三段标题文字书签的位置。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接到同一页面的书签</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <a href="#dw">Dreamweaver mx 2004</a>
12 <a href="#fl">Flash mx 2004</a>
13 <a href="#fw">Fireworks mx 2004</a>
14 <a name="dw"><h3>Dreamweaver mx 2004</h3></a>
15 Dreamweaver mx 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。mx 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合，无疑为制作网站提供了更多的实现方式。
16 <p>
17 <a name="fl"><h3>Flash mx 2004</h3></a>
18 Flash mx 2004作为网页矢量交互动画软件的代表，提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术，广告banner、动画片头、mtv、交互游戏，广阔的应用为Flash的学习者提供了广泛的发展平台，学习Flash mx 2004软件更是一个具有诱惑力的过程。
19 <p>
20 <a name="fw"><h3>Fireworks mx 2004</h3></a>
21 Fireworks mx 2004作为网页图像设计软件的代表，在继承了前期版本图形绘制、页面特效功能的同时，大大地发展了位图图像方面的处理功能，这无疑使这个软件有了更大的向Photoshop挑战的资本，而其在网页设计方面的诸多应用，又是无任何软件可与之媲美。与Dreamweaver mx 2004的整合使其在专业网站图像设计过程中，早已并继续扮演着不可或缺的角色。
22 <p>
23 </body>
24 </html> 文件说明
第11、12、13行分别定义了到3个段落标题文字的书签链接。
#p#
链接到其它页面中的书签
在页面之间，也可以完成跳转到另一页面某一位置的过程。这需要指定好链接的页面和链接的书签位置。基本语法 <a href="File＿name#bookmark＿name">文字链接</a>语法解释
File＿name是要跳转到的页面路径，bookmark＿name是定义的书签名称。文件范例：8-5.htm
制作一个新页面，其中包含3个链接，分别链接到8-4.htm页面中<h3>三段标题文字书签的位置。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接到其它页面的书签</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本mx 2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。<p>
12 <a href="8-4.htm#dw">Dreamweaver mx 2004</a>
13 <a href="8-4.htm#fl">Flash mx 2004</a>
14 <a href="8-4.htm#fw">Fireworks mx 2004</a>
15 </body>
16 </html> 文件说明
第12、13、14行分别定义了到8-4.htm页面中3个段落标题文字的书签链接。
#p#
外部链接
所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。
制作外部链接的时候，使用url统一资源定位符来定位万维网信息，这种方式可以简洁、明了、准确地描述信息所在的地点。最常见的url格式是"http://"，其它的格式如表所示。 url的格式
服务 url格式描述 www http:// 进入万维网站点 Ftp ftp:// 进入文件传输服务器 News news:// 启动新闻讨论组 Telnet telnet:// 启动Telnet方式 Gopher gopher:// 访问一个Gopher服务器 Email mailto:// 启动邮件
链接到外部网站
页面中的常用友情链接，经常是单击后可以访问别人的网站，达到互相交流信息的目的。下面就是制作链接到外部网站的方法。基本语法 <a href="http://">文字链接 </a>语法解释
"http://"后面写下的就是网站的地址。文件范例：8-6.htm
制作链接到外部网站的链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接到外部网站</title>
08 </head>
09 <body>
10 <a href="http://www.jb51.net">链接到本站网站</a>
11 </body>
12 </html> 文件说明
第10行定义了到本站网站的链接。
#p#
发送E-mail
在html页面中，可以建立E-mail链接。当浏览者单击链接后，系统会启动默认的电子邮件进行E-mail的发送。在windows系统中，如果用户设置了邮件软件，如Outlook,Outlook Express等，在浏览器中单击E-mail链接会自动打开新邮件窗口，地址栏会自动添加E-mail链接中的邮箱地址。基本语法 <a href="Mailto://a@b.c">文字链接</a> <a href="Mailto://a@b.c?subject=content">文字链接</a> <a href="Mailto://a@b.c?cc=a@b.c">文字链接</a> <a href="Mailto://a@b.c?bcc=a@b.c">文字链接</a>语法解释
其中a@b.c为邮件地址，后面的参数如下表所示邮件的参数
参数描述 subject 电子邮件主题 cc 抄送收件人 bcc 暗送收件人
如果希望同时写下多个参数，则参数之间使用"＆"符号分隔，如：
<a href="mailto://a@b.c?subject=content＆cc=a@b.c＆bcc=a@b.c">文字链接</a> 文件范例：8-7.htm
制作电子邮件链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>发送电子邮件</title>
08 </head>
09 <body>
10 <a href="mailto:tslxg@hotmail.com">给作者来信</a>
11 <br>
12 <a href="mailto:tslxg@hotmail.com?subject=意见建议&cc=kevin_hu@it.jb51.net&bcc=
ytlinli@126.com">意见建议</a>
13 </body>
14 </html> 文件说明
第10行定义了默认的电子邮件链接，第12行的链接设定了邮件主题"意见建议"，以及发送邮件后抄送和暗送的邮件地址。
#p#
链接FTP
Internet上资源丰富，通过文件传输协议Ftp，就可以足不出户地获得各种免费软件和其它文件。Ftp即"文件传输协议"。协议是使计算机与计算机之间能够相互通讯的语言。Ftp使文件和文件夹能够在Internet上公开传输。在某些情况下，您需要从网络计算机管理员处获得许可才能登陆并访问计算机上的文件。但是通常您会发现可以使用Ftp访问某个网络或服务器，而不需要拥有该计算机的帐户，也不必须是授权的密码持有人。这些匿名Ftp服务器可包含能够通过Ftp公开获得的广泛数据。基本语法 <a href="Ftp://">文字链接</a>语法解释
"ftp://"后面写下的就是Ftp主机的地址。文件范例：8-8.htm
制作电子邮件链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接Ftp主机</title>
08 </head>
09 <body>
10 <a href="ftp://ftp.pku.edu.cn">北京大学Ftp站点</a>
11 </body>
12 </html> 文件说明
第10行定义了Ftp主机地址为北京大学的Ftp主机。
#p#
链接Telnet
Telnet也是Internet上最主要和最广泛的应用之一，远程登陆Telnet指一台计算机远程链接到另一台计算机上，并在远程计算机上运行自己系统的程序，从而共享计算机网络系统的软件和硬件资源。基本语法 <a href="telnet://">文字链接</a>语法解释
"Telnet://"后面写下的就是Telnet站点的地址文件范例：8-9.htm
制作Telnet链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接Telnet</title>
08 </head>
09 <body>
10 <a href="Telnet://162.105.203.245:23">北京大学未名站</a>
11 </body>
12 </html> 文件说明
第10行定义了Telnet站点地址为北京大学未名站。其中162.105.203.245为站点地址，23为端口号。
#p#
链接到Gopher
在www出现之前，Gopher软件是Internet上最主要的检索工具，Gopher站点也是最主要的站点。在www出现后，Gopher失去了昔日的辉煌。尽管如此，今天Gopher仍很流行，因为Gopher站点能够容纳大量的信息供用户查询。基本语法 <a href="Gopher://">文字链接</a>语法解释
"Gopher://"后面写下的就是Gopher站点的地址。文件范例：8-10.htm
制作Gopher链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接Gopher</title>
08 </head>
09 <body>
10 <a href="Gopher://dosfan.lib.nic.edu/1">Gopher站点</a>
11 </body>
12 </html> 文件说明
第10行定义了Gopher站点的地址。
#p#
链接到News新闻组
New新闻组是由分布在世界各地的上千个新闻服务器组成，它能够随时更换消息，任何一条发送到新闻组服务器上的消息，在几分钟之后就能传遍全球。新闻组是个人向新闻服务器所张贴邮件的集合，一台计算机上可建立数千个新闻组。每一个浏览者几乎可以找到任何主题的新闻组。虽然某些新闻组是受到监控的，但大多数不是。对于受监控的新闻组，其拥有者可以检查张贴的邮件、提出问题，或删除不适当的邮件等。任何人都可以向新闻组张贴邮件。新闻组不需要成员资格或如入费用。基本语法 <a href="News ://">文字链接</a>语法解释
"News://" 后面写下的就是New服务器的地址。文件范例：8-11.htm
制作New新闻组链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>链接News新闻组</title>
08 </head>
09 <body>
10 <a href="news://news.newsfan.net">News新闻组</a>
11 </body>
12 </html> 文件说明
第10行定义了New新闻组服务器的地址。
#p#
下载文件
如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。基本语法 <a href="File＿url">文字链接</a>语法解释
"File＿url"代表文件所在的路径，可以写下相对路径，也可以写下绝对路径。文件范例：8-12.htm
建立文件的下载链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>下载文件</title>
08 </head>
09 <body>
10 <a href="wrdemo.exe">下载软件</a>
11 </body>
12 </html> 文件说明
第10行定义了Word Recovery软件的下载地址。
#p#
脚本链接
在链接语句中，可以通过脚本来实现html语言完成不了的功能。下面以JavaScript脚本为例说明脚本链接的使用。基本语法 <a href="JavaScript：…">文字链接</a>语法解释
在JavaScript:后面编写的就是具体的脚本。文件范例：8-13.htm
通过脚本链接实现关闭浏览器窗口效果。
01 
02 
03 
04 
05 <html>
06 <head>
07 <body>
10 <a href="JavaScript:window.close()">关闭窗口</a>
11 </body>
12 </html> 文件说明
第10行定义了JavaScript脚本。
#p#
空链接
在链接中，可以通过#符号实现空链接。所谓空链接，是指指向链接后，鼠标变成手行，但单击链接后，仍然停留在当前页面。基本语法 <a href="#">文字链接</a>文件范例：8-14.htm
实现空链接。
01 
02 
03 
04 
05 <html>
06 <head>
07 <title>空链接</title>
08 </head>
09 <body>
10 <a href="#">空链接</a>
11 </body>
12 </html> 文件说明
第10行定义了空链接。