HTML学习笔记第四天
a标签综合练习
a标签的作用：用于控制页面与页面之间跳转的；
一、回顾a标签
1.点击文字，在当前选项卡中跳转。
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
2.点击图片，跳转到新的选项卡
<a href="https://www.nuomi.com/?cid=002540" target="_blank"><img src="课程.png"></a>
3.点击跳转到一个本地地址
<a href="03.html"><img src="课程.png"> </a>
二、Base标签的使用
需求假设：假如有：糯米、新闻、hao123、地图、视频、贴吧六个标签，只有点击糯米是在本选项卡跳转，其他都是在新的新选项卡打开。
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<a href="https://www.nuomi.com/?cid=002540" >糯米</a>
<a href="http://news.baidu.com/">新闻 target="_blank"</a>
<a href="https://www.hao123.com/">hao123 target="_blank"</a>
<a href="http://map.baidu.com/">地图 target="_blank"</a>
<a href="http://v.baidu.com/">视频 target="_blank"</a>
<a href="http://tieba.baidu.com/">贴吧 target="_blank"</a>
</body>
</html>
方式二：使用base标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用base标签</title>
<base target="_blank">
</head>
<body>
<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>
<a href="http://news.baidu.com/">新闻</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>使用base标签</title>
<base target="_blank">
</head>
-
base标签的作用就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开，也就是base标签有一个 target属性，可以指定全局打开是_blank还是_self;
-
base标签必须写在head标签的开始标签和结束标签之间。
3.如果base标签和a标签都指定了target，那么浏览器会按照a标签中指定的来执行。
三、假链接
假链接存在的意义:在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接.
假链接的格式:1.# 2.javascript:
<a href="javascript:">假链接一</a>
<a href="#">假链接二</a>
"#"的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部
四、同一页面a标签跳转到指定的位置(锚点)
实现思路：从a标签跳转到指定位置，那么必须告诉那个位置的id ；而在HTML中, 每一个标签都有一个名称叫做id的属性，因此我们可以直接给目标位置的标签设置一个独一无二的id
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head >
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><b
<h1 id="d">目标位置 </h1>
<br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
<a href="javascript:">刘成成</a>
<a href="#d">跳转到目标位置</a> // #+d 也就是假链接#后跟上目标位置标签d
</body>
</html>
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
