HTML基础教程之超级链接
网站中随处可见超级链接的身影,打开百度新闻,任意点击一段话,就会打开新闻详情页,这全部都是超级链接:
接下来,我们来介绍超级链接的详细知识
超级链接
语法格式:
<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>