HTML基础教程之超级链接 登录

HTML基础教程之超级链接

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

10.png

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


超级链接

语法格式:

<a  属性 = “值”>……</a>

注:<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>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送