摘要：
DOCTYPE html˃2。超链接标签的作用是从一个页面跳到另一个页面。A是锚的缩写，表示：锚外部链接href：必须写入的属性，用于指定链接目标的地址：用于指定链接页面的打开方法_ Self是默认值_空白若要在新窗口中打开，请在当前窗口中打开：˂！内部链接网站内部页面之间的链接˂！链接到网页元素˂！
1、路径
（1）相对路径
以引用文件所在的位置为参考基础，而建立出的目录路径，比如，图片相对于html的位置所在的路径，下一级路径：/，上一级路径：../
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="http://t.zoukankan.com/img/1.jpg" title="小花" border="3px"/><br />
</body>
</html>图片在下一级路径中，用 / 分割
（2）绝对路径
是指目录的绝对位置，直接到达目标位置，通常是从盘符开始的路径，或完整的网络地址。一般都用相对路径，适用网络地址的时候多用绝对路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="D:Html estimg1.jpg" title="小花" border="3px"/><br />
</body>
</html>2、超链接标签
（1）概念
超链接标签的作用是从一个页面跳转到另一个页面，a是anchor的缩写，意为：锚
（2）外部链接
href：必须要写的属性，用于指定链接目标的地址
target：用于指定链接页面的打开方式，_self是默认值，_blank为在新窗口中打开
在当前窗口打开：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>外部链接</h4>
<a href="https://www.baidu.com/" target="_self">百度</a>
</body>
</html>通过外部链接，链接到百度首页：
点击链接之后，百度首页在当前窗口打开：
在新窗口打开：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>外部链接</h4>
<a href="https://www.baidu.com/" target="_blank">百度</a>
</body>
</html>
点击超链接之后，页面在新的窗口打开：
默认是在当前窗口打开。
（3）内部链接
网站内部页面之间的相互链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>内部链接</h4>
<a href="http://t.zoukankan.com/hello.html">你好</a>
</body>
</html>
这两个页面都是网站内部的页面，从index.html到hello.html的跳转，称为内部链接
（4）空链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>内部链接</h4>
<a href="http://t.zoukankan.com/zhai1997-p-11407137.html#">你好</a>
</body>
</html>
虽然文字有超链接的样式，但是不会向任何页面跳转。
（5）下载链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>下载链接</h4>
<a href="http://t.zoukankan.com/img/1.zip">下载文件</a>
</body>
</html>
使用下载链接的时候，要求地址中是一个文件或压缩包。
（6）网页元素的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>元素链接</h4>
<a href="https://www.baidu.com/"><img src="http://t.zoukankan.com/img/1.jpg"/></a>
</body>
</html>在网页中显示的是一个图片，点击图片之后可以跳转到百度首页，这就是图片链接
图片链接和文字链接：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body bgcolor="white"> <h5 align="middle">文字链接和图片链接</h5> <center> <a href="https://www.baidu.com/" title="百度一下">百度</a><br><br><br><br><br><br> <a href="https://www.baidu.com/" title="百度一下"><img src="img/百度图标.png" /></a> </center> </body> </html>
点击相应的文字和图片，便可进入百度网站。
（7）书签链接（锚点链接）
书签链接可以实现在同一个页面的快速跳转，方便阅读。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body bgcolor="aquamarine"> <a name="top"></a> <a href="#T1">长歌行</a><br> <a href="#T2">草书歌行</a><br> <a href="#T3">将进酒</a><br> <hr align="center" color="black"> <h3><a name="T1">长歌行</a></h3> <p>桃李待日开，荣华照当年。<br>东风动百物，草木尽欲言。 <br>枯枝无丑叶，涸水吐清泉。<br>大力运天地，羲和无停鞭。<br> 功名不早著，竹帛将何宣。<br>桃李务青春，谁能贳白日。<br> 富贵与神仙，蹉跎成两失。<br>金石犹销铄，风霜无久质。<br> 畏落日月后，强欢歌与酒。<br>秋霜不惜人，倏忽侵蒲柳。<br> </p> <h3><a name="T2">草书歌行</a></h3> <pre > 少年上人号怀素，草书天下称独步。 墨池飞出北溟鱼，笔锋杀尽中山兔。 八月九月天气凉，酒徒词客满高堂。 笺麻素绢排数箱，宣州石砚墨色光。 吾师醉后倚绳床，须臾扫尽数千张。 飘风骤雨惊飒飒，落花飞雪何茫茫！ 起来向壁不停手，一行数字大如斗。 怳怳如闻神鬼惊，时时只见龙蛇走。 左盘右蹙如惊电，状同楚汉相攻战。 湖南七郡凡几家，家家屏障书题遍。 王逸少，张伯英，古来几许浪得名。 张颠老死不足数，我师此义不师古。 古来万事贵天生，何必要公孙大娘浑脱舞。 </pre> <h3><a name="T3">将进酒</a></h3> <p>君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 </p> <a href="#top">返回顶部</a> </body> </html>
