1、超链接标签
<html>
<head>
<title>
超链接标签学习
</title>
</head>
<body>
<!-- target 属性 : -->
<!-- _self 在自己的窗体里面打开URL -->
<!-- _blank 在新的窗体里面打开URL -->
<a href="http://www.baidu.com" target="_blank"> 百度 </a>
</body>
</html>
2、锚点
<html>
<head>
<title> 建立锚点标签</title>
</head>
<!-- 锚点的建立 <a name="XXX">YYY</a> -->
<!-- 使用时使用#连接 -->
<body>
<hr width="100%" size="10" color="red" />
<ul>
<li><a href="#poem1"> 第一首诗:相思 </a> </li>
<li><a href="#poem2"> 第二首诗:静夜思 </a> </li>
<li><a href="#poem3"> 第三首诗:将进酒 </a> </li>
<li><a href="#poem4"> 第四首诗:虞美人 </a> </li>
</ul>
<img src="E:\学习\PHP笔记和练习\06\1.jpg" />
<hr width="100%" size="10" color="orange" />
<a name="poem1">
<h2>相思</h2>
红豆生南国,春来发几枝。<br/>
愿君多采撷,此物最相思。<br/>
</a>
<img src="E:\学习\PHP笔记和练习\06\1.jpg" />
<hr width="100%" size="10" color="yellow" />
<a name="poem2">
<h2>静夜思</h2>
床前明月光,疑是地上霜。<br />
举头望明月,低头思故乡。<br />
</a>
<img src="E:\学习\PHP笔记和练习\06\1.jpg" />
<hr width="100%" size="10" color="green" />
<a name="poem3">
<h2>将进酒</h2>
君不见,黄河之水天上来,奔流到海不复回。<br />
君不见,高堂明镜悲白发,朝如青丝暮成雪!<br />
人生得意须尽欢,莫使金樽空对月。<br />
天生我材必有用,千金散尽还复来。<br />
烹羊宰牛且为乐,会须一饮三百杯。<br />
岑夫子,丹丘生,将进酒,杯莫停。<br />
与君歌一曲,请君为我倾耳听。<br />
钟鼓馔玉不足贵,但愿长醉不复醒。<br />
古来圣贤皆寂寞,惟有饮者留其名。<br />
陈王昔时宴平乐,斗酒十千恣欢谑。<br />
主人何为言少钱,径须沽取对君酌。<br />
五花马、千金裘,呼儿将出换美酒,与尔同销万古愁!<br />
</a>
<img src="E:\学习\PHP笔记和练习\06\1.jpg" />
<hr width="100%" size="10" color="grey" />
<a name="poem4">
<h2>虞美人</h2>
春花秋月何时了,<br />
往事知多少。<br />
小楼昨夜又东风,<br />
故国不堪回首月明中。<br /><br /><br />
雕阑玉砌应犹在,<br />
只是朱颜改。<br />
问君能有几多愁,<br />
恰是一江春水向东流。<br />
</a>
<img src="E:\学习\PHP笔记和练习\06\1.jpg" />
<hr width="100%" size="10" color="blue" />
<a href="mailto:tcao2014@163.com"> 给我发邮件 </a>
<hr width="100%" size="10" color="balck" />
<a href="#"> 返回顶端 </a>
</body>
</html>
3、图像标签
<html>
<head>
<title> 图像标签 </title>
</head>
<!-- <img> 标签 -->
<!-- src 指定图片所在的URL -->
<!-- border 边框的宽度 -->
<!-- alt 鼠标放上有提示 如果图像不存在,则出现它指定的文字,搜索引擎可以通过它指定文字搜索改图片-->
<!-- width height -->
<body>
<center>
<a href="http://hao.360.cn/" target="_self">
<img src="http://p1.qhimg.com/t0151320b1d0fc50be8.png" border="0" alt="360_logo_forTest"/>
</a>
</center>
<br />
<br />
<br />
<br />
<center>
<a href="http://sh.qihoo.com/zt/2014daguolingxiu.html?src=hao360" targrt="_blank">
<img src="http://p5.qhimg.com/t01e3748dd2a063cd67.jpg" border="100" alt="Chairman_Xi"/>
</a>
</center>
</body>
</html>
4、图像地图
<html>
<head>
<title>图像地图</title>
</head>
<!-- 把一个图片分成多个链接 -->
<body>
<img src="E:\学习\PHP笔记和练习\06\2.jpg" usemap="#testMap" />
<map name="testMap">
<!-- 图片的左上角点是(0,0)坐标 -->
<area shape="rect" coords="5,5,400,632" href="http://www.taobao.com" target="_blank" />
<area shape="circle" coords="600,300,300" href="http://www.jd.com" target="_blank" />
<area shape="poly" coords="1000,0,800,630,1200,630" href="http://xa.meituan.com" target="_blank" />
</map>
</body>
</html>