HTML基础教程之超级链接

网站中随处可见超级链接的身影，打开百度新闻，任意点击一段话，就会打开新闻详情页，这全部都是超级链接：

接下来，我们来介绍超级链接的详细知识

超级链接

语法格式：

注：<a>中不能再套<a>标记

常用属性

href：目标文件的地址URL，该URL可以是相对地址，也可以是绝对地址。
target：目标文件的显示窗口。

_blank：在新窗口中打开目标文件。
_self：在当前窗口中打开目标文件(默认打开)，相当于“替换”操作。
_parent：在父级窗口来打开目标文件。
_top：在最顶级窗口来打开目标文件。

其中_parent、_top常用框架网页中，我们在之后会有介绍

name：定义锚点链接的名称。

1、绝对地址URL

（1）远程的绝对地址

访问远程的文件，总是以“<a href="http://”域名、主机名开头。">http://”域名、主机名开头。</a>”

实例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
    </body>
</html>

（2）本地的绝对地址(很少使用)

访问本地的绝对地址，是以<a href="http://file:///开头的绝对地址。">file:///开头的绝对地址。</a>

在上一个实例的基础上添加：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
        <a href="file:///D:/image.html" target="_blank">点击查看图片</a>  
    </body>
</html>

注：请大家在本地进行测试

2、相对地址URL（项目中路径一般是相对路径，请大家在本地进行测试）

（1）当前文件和目标文件是同级关系，链接地址直接写目标文件名。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="1.jpg">图片</a>  
    </body>
</html>

（2）当前文件与目标文件所在的文件夹是同级关系，先找“文件夹名”，然后再找“文件名”。

也就是，目标文件位于下一级。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.jpg">图片</a>  
    </body>
</html>

（3）目标文件位于上一层目录中，往上找对应的目录，再找目录中的文件。

往上找，使用“../”符号表示。

“../”代表上一级目录

“../../”代表上两级目录

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="../image/1.jpg">图片</a>  
    </body>
</html>

3、特殊的链接

(1)、下载链接

什么样的文件会出现下载提示？

反过来说，哪些文件网页可以直接执行？如：.jpg、.png、.gif、.html、.htm、.txt等。

大部分文件，浏览器是不能直接执行的。如：.doc、.xls、.ppt、.rar、.psd……

不能直接执行的话就会出现下载框

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.rar">下载</a>  
    </body>
</html>

(2)、邮箱链接

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="mailto:php@php.cn">有问题的话，请给我们发邮件</a>  
    </body>
</html>

(3)、普通空链接（#）

步执行任何跳转的链接：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="#">这是一个空链接</a>  
    </body>
</html>

新建文件

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <h1>欢迎加入php.cn</h1>
 <a href="http://www.php.cn/" >php.cn</a>
 <hr>
 <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
 <hr>
 <a href="http://www.baidu.com/" target="_blank">百度</a>
 </body>
</html>

提交重置代码

自动运行

全屏