超链接标记

超链接标记的使用


1. 超链接简介

超链接是网页的基本元素,网页正是通过超链接而相互链接组织成一个网站,并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。

我们通过使用 <a> …</a> 标签在 HTML 中创建链接。该标记是行内元素。


2.超链接语法

超链接是通过URL(统一资源定位器)来定位目标信息的。超链接的HTML代码如下:

<a href="url" target="blank" title="" >链接文本</a>

URL地址主要用来表示链接文件和调用图片的地址;target属性用于设置目标的打开方式;title属性用于设置超链接的提示文本。

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

超链接的打开方式(target属性的取值) :1)在本窗口打开:_self (target的默认值);2)在新窗口打开:_blank;3)在父窗口打开: _parent 将链接的文件载入到父框架;4)在整个窗口打开:_top:将链接的文件载入到整个浏览器窗口中,并删除所有框架。_parent、_top仅仅在网页被嵌入到其他网页中有效,如框架中的网页,所以这两种取值用得很少。

<body>
  <a href="http://www.hyit.edu.cn" target="blank" title="淮阴工学院网站">淮阴工学院</a>
<body>
单击我看效果

1)URL分为绝对URL和相对URL :

绝对URL是采用完整的URL来规定文件在internet上的精确地点,包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。代码如下:

<body>
   <a href="http://rsc.hyit.edu.cn/shownews.asp?id=350" >淮阴工学院人才引进表格</a>
</body>
单击我看效果

相对URL是相对于包含超链接页的地点来规定文件的地点。分为以下几种情况:

如链接到同一路径下的文档,直接输入文件名即可。

如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(/),再输入文件名,如yule/news.htm

如链接到上一级路径中,要在文件名前输入“../”,如“../news.htm”,“../”表示上级目录,“../../”表示上上级目录,以此类推。

如链接到上一级路径中其他子目录中的文件,则应先退回到上级目录,在进入目标文件所在的目录,如“../子目录名/news.htm”

可以看出相对URL方式比较简便,不需输入一长串完整的URL;另外相对路径还有一个非常重要的特点是:可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。

<body>
  <a href="XHTML_imagetags.htm" >同一文件夹下的页面</a><br/>
  <a href="XHTML/XHTML_hyperlink_01.htm" >同一路径下子文件夹里的页面</a><br/>
  <a href="../XHTML_hyperlink_02.htm" >链接到上一级路径中的页面</a><br/>
  <a href="../01.XHTMLIntroduction/XHTML_intro01.htm" >链接到上一级路径中其他子目录中的文件</a><br/>
</body>
单击我看效果

3.超链接的源对象

1)用文本做超链接;2)用图像做超链接;3)文本图像混合做链接,无论是单击图片还是文本都会触发同一个链接。

<body>
   <a href="http://jwch.hyit.edu.cn" target="blank" title="淮阴工学院教务处网站">文本链接的淮阴工学院教务处</a><br/>
   <a href="http://jwch.hyit.edu.cn" target="blank" title="图片链接的淮阴工学院教务处网站"><img src="../../../Images/004small.gif" alt="淮阴工学院" border="0" /></a><br/>
   <a href="http://jwch.hyit.edu.cn" target="blank" title="淮阴工学院教务处网站"><img src="../../../Images/004small.gif" alt="淮阴工学院" border="0" />文本和图片混合的淮阴工学院教务处</a><br/>
<body>
单击我看效果

4.超链接的种类

1)链接到其他网页或文件(jpg, rar等),包括内部链接、外部链接和下载链接

<body>
   <a href="../../../index.htm" >内部链接返回首页</a><br/>
   <a href="http://www.hyit.edu.cn" >外部链接淮阴工学院</a><br/>
   <a href="../../../Images/004small.gif">下载链接单击下载图片</a><br/>
<body>
单击我看效果

电子邮件链接,浏览器会自动打开如"outlook"的客户端邮件程序

<body>
   <a href="mailto:zhy@hyit.edu.cn" >发邮件给我</a>
<body>
单击我看效果

锚链接

当网页内容很长,需要进行页内跳转链接时,就需要定义锚点和锚点链接,锚点可使用name属性或id属性定义。

<body>
   <a href="#hy1" >链接到本页面的锚点hy1处(一般要内容比较长的时候使用,短的内容锚点链接效果不明显,本例效果不明显)</a><br/>
   <a href="XHTML_listtags.htm#mark3" >链接到XHTML_listtags页面的锚点mark3处</a><br/>
   <div id="hy1">
     <p>定义id为“hy1”的锚点   </p>
   </div>
<body>
单击我看效果

空链接和脚本链接

<body>
   <a href="#" >相当于没有定义锚点名的锚链接,网页会返回页面顶端 </a><br/>
   <a href="JavaScript:self.close()" >脚本链接关闭窗口 </a>
<body>
单击我看效果

5.超链接制作的原则

1)可以使用相对链接尽量不要使用绝对链接

2)链接目标尽可能简单


©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持:淮阴工学院计算机与软件工程学院《Web开发技术》教学团队