HTML学习笔记之第三章:超链接

前言:关于本章节的内容,并非全部是个人原创,只是在学习中的总结笔记。难免有与其他学习网站或者博客相同之处,如有类同,各位大神莫怪!!!此资料只是用来学习和工作的参考,并不作为商业用途。希望与大家一起分享,共同进步!!!

第三章:超链接

1.超链接的基本知识

(1)绝对路径

不管源文件在什么位置都可以非常精确的找到,废除是目标文档的位置发生变化,否则不会发生变化。

如果希望链接同站点的其他内容,必须使用绝对路径。

缺点是不利于测试,要想测试链接是否有效,必须在Internet服务器端对链接进行测试。另外一个缺点,不利于站点的移植。

(2)相对路径

如果站点的结构和文档的位置不变,链接就不会出错。

可以将整个网站移植到另一个地址的网站中,而不需要修改文档中的链接路径。

(3)超链接分为:外部链接、电子邮件链接、锚点链接、空链接、脚本链接

2.内部链接

与自身网站页面有关的链接被称为内部链接。

语法:<a href=“链接目标” target=“目标窗口的打开方式” name=”锚点>文本内容</a>

打开方式说明:

-self:在当前页面中打开链接

-blank:在一个全新的空白窗口中打开链接

-top:在顶层框架中打开来链接,也可以理解为在根框架中打开链接

-parent:在当前框架的上一层里打开链接

3.锚点链接

网站中经常会有一些文档页面由于文本或者图片内容过多,导致页面过长。

访问者需要不断的拖动滚动条来查看文档中的内容。为了方便用户查看文档中的内容,在文档中需要进行锚点链接。

(1)建立锚点

语法:<a id="锚点的ID" name="锚点的名字"></a>

(2)链接锚点

语法: <a href="#锚点的ID">  锚点的名字/描述 </a>

(3)链接到其他页面的锚点

法:<a href="链接的文件地址#锚点名称">......</a>

目标元素:a.html页面的<div id="test"/>  

锚点超链接:<a href="a.html#test"></a>(先跳到a.html页面,然后再寻找id=test的元素)

(4)链接到其他页面的锚点(不同页面带参数跳转)

目标元素:a.php?p=abc页面的<div id="test"/>

锚点超链接:<a href="a.php?p=abc#test"></a>

4.外部链接

跳转到当前网站外的资源中

(1)链接到外部网站

语法:

HTML学习笔记之第三章:超链接HTML学习笔记之第三章:超链接

例如:

HTML学习笔记之第三章:超链接

(2)链接到E-mail

语法:

HTML学习笔记之第三章:超链接

例如:

HTML学习笔记之第三章:超链接HTML学习笔记之第三章:超链接HTML学习笔记之第三章:超链接

(3)链接到FTP

文件传输协议,一个FTP站点通常包含一些上传和下载文件的文件目录。

大部分FTP网站需要使用用户名和密码来登陆。

语法:

HTML学习笔记之第三章:超链接

例如:

HTML学习笔记之第三章:超链接

(4)下载文件

如果超链接指向的不是一个网页文件,而是其他的文件,如:ZIP,MP3,EXE等,单击链接的时候就会下载。

语法:

HTML学习笔记之第三章:超链接

例如:

HTML学习笔记之第三章:超链接

5.实例如下:

HTML学习笔记之第三章:超链接HTML学习笔记之第三章:超链接

HTML学习笔记之第三章:超链接

运行结果(点击锚点可以随意跳转):

HTML学习笔记之第三章:超链接

HTML学习笔记之第三章:超链接HTML学习笔记之第三章:超链接