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>
看山看水看代码
<a>标签中不能再套<a>标签标记
7年前 添加回复 0