超链接是网页的基本元素,网页正是通过超链接而相互链接组织成一个网站,并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。
我们通过使用 <a> …</a> 标签在 HTML 中创建链接。该标记是行内元素。
超链接是通过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仅仅在网页被嵌入到其他网页中有效,如框架中的网页,所以这两种取值用得很少。
<a href="http://www.hyit.edu.cn" target="blank"
title="淮阴工学院网站">淮阴工学院</a>
1)URL分为绝对URL和相对URL :
绝对URL是采用完整的URL来规定文件在internet上的精确地点,包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。代码如下:
href="http://rsc.hyit.edu.cn/shownews.asp?id=350"
>淮阴工学院人才引进表格</a>相对URL是相对于包含超链接页的地点来规定文件的地点。分为以下几种情况:
如链接到同一路径下的文档,直接输入文件名即可。
如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(/),再输入文件名,如yule/news.htm
如链接到上一级路径中,要在文件名前输入“../”,如“../news.htm”,“../”表示上级目录,“../../”表示上上级目录,以此类推。
如链接到上一级路径中其他子目录中的文件,则应先退回到上级目录,在进入目标文件所在的目录,如“../子目录名/news.htm”
可以看出相对URL方式比较简便,不需输入一长串完整的URL;另外相对路径还有一个非常重要的特点是:可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。
href="XHTML_imagetags.htm"
>同一文件夹下的页面</a><br/> href="XHTML/XHTML_hyperlink_01.htm"
>同一路径下子文件夹里的页面</a><br/>href="../XHTML_hyperlink_02.htm"
>链接到上一级路径中的页面</a><br/>href="../01.XHTMLIntroduction/XHTML_intro01.htm"
>链接到上一级路径中其他子目录中的文件</a><br/>1)用文本做超链接;2)用图像做超链接;3)文本图像混合做链接,无论是单击图片还是文本都会触发同一个链接。
文本链接的淮阴工学院教务处
</a><br/><img src="../../../Images/004small.gif" alt="淮阴工学院"
border="0" />
</a><br/><img src="../../../Images/004small.gif" alt="淮阴工学院"
border="0" />文本和图片混合的淮阴工学院教务处
</a><br/>1)链接到其他网页或文件(jpg, rar等),包括内部链接、外部链接和下载链接
href="../../../index.htm"
>内部链接返回首页</a><br/>href="http://www.hyit.edu.cn"
>外部链接淮阴工学院</a><br/>href="../../../Images/004small.gif"
>下载链接单击下载图片</a><br/>电子邮件链接,浏览器会自动打开如"outlook"的客户端邮件程序
href="mailto:zhy@hyit.edu.cn"
>发邮件给我</a>锚链接
当网页内容很长,需要进行页内跳转链接时,就需要定义锚点和锚点链接,锚点可使用name属性或id属性定义。
href="#hy1"
>链接到本页面的锚点hy1处(一般要内容比较长的时候使用,短的内容锚点链接效果不明显,本例效果不明显)</a><br/>href="XHTML_listtags.htm#mark3"
>链接到XHTML_listtags页面的锚点mark3处</a><br/>id="hy1"
>空链接和脚本链接
href="#"
>相当于没有定义锚点名的锚链接,网页会返回页面顶端
</a><br/>href="JavaScript:self.close()"
>脚本链接关闭窗口
</a>1)可以使用相对链接尽量不要使用绝对链接
2)链接目标尽可能简单
©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持:淮阴工学院计算机与软件工程学院《Web开发技术》教学团队