超链接
6.1 超连接简介
在html中,我们可以使用a标签定义超链接
语法:<a href="链接地址">文本或图片</a>
href表示想要跳转到连接的目的地址,可以是相对路径,也可以是绝对路径
例如文本超链接:
<!!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<dir>
<a href="http://www.baidu.com">百度搜索</a>
</dir>
</body>
</html>
图片超链接
<!!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<dir>
<a href="http://www.baidu.com"><img src="text/text.jpg" /></a>
</dir>
</body>
</html>
target属性
在默认情况下,超链接都是在当前浏览器窗口在新打开页面的。在HTML中,我们可以使用target属性来定义超链接打开窗口的方式
语法
<a herf="链接地址" target=“打开方式”></a>
target属性取值有4种
锚点链接
有些网页页面内容比价多,导致页面过长,此时用户需要不停在拖动浏览器上的滚动条才可以看到。为了方便用户操作,我们可以使用锚点链接来优化用户体验。
举例:
<!!DOCTYPE >
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div>
<a href="#article">推荐文章</a><br />
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
</div>
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>荷塘月色</li>
<li>朝花夕拾</li>
<li>阿Q正传</li>
</ul>
</div>
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>稻香</li>
<li>以父之名</li>
<li>一口气全念对</li>
</ul>
</div>
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
~~~~~<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>肖生克的救赎</li>
<li>这个杀手不太冷</li>
<li>杀死比尔</li>
</ul>
</div>
</body>
</html>