HTML常见标签——超链接a标签
一、a标签简介二、a标签属性
href属性
target属性
三、a标签的作用
利用a标签进行页面跳转
利用a标签返回页面顶部以及跳转页面指定地区
利用a标签实现文件下载
一、a标签简介
<a>标签用于做跳转、导航，是双标签，记作<a></a>，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
二、a标签属性
href属性
<a>标签中具有href属性，属性用于填写页面或者文件地点，如果href 设置为“#” ，表示不会跳转到其他页面，停留在本页面。它的语法是：
<a href="#"></a>
<a href="XXX.html"></a>
target属性
<a> 标签的 target 属性规定在何处打开链接文档。它的语法是：
<a target="_blank|_self|_parent|_top|framename"> target的值和属性如下，一般常用的是前两个，也就是创建新窗口打开被链接页面或者在当前窗口打开被链接页面。
值 描述_blank在新窗口打开被链接的页面_self默认设置，在当前的页面/框架打开被链接的页面_parent在父框架集中打开被链接的页面_top在整个窗口中打开被链接的页面framename在指定框架中打开被链接的页面 三、a标签的作用
a标签有三个作用
1. 跳转页面
2. 返回页面顶部或者跳转页面指定地区
3. 下载文件
利用a标签进行页面跳转
我们设置一个test目次，test目次最外面存放home.html文件，在test目次下有一个pages目次，存放introduction.html和my.html文件。
https://i-blog.csdnimg.cn/direct/df64684eb2fa4788b6cee4259fe6bbf2.png
我们在home.html写一个<a>标签，链接到其他的页面，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
</head>
<body>
<h1>home</h1>
<a href="./pages/introduction.html">introduction</a>
<a href="./pages/my.html">my</a>
</body>
</html> 界面效果如下，我们可以看到在home.html界面中，出现了introduction和my的超链接。
https://i-blog.csdnimg.cn/direct/7ccf47ddb5a54dc9bbdbb209ac08a76c.png
分别点击两个超链接，均可完成跳转，此时是在当前窗口打开的，没有一个新窗口，且访问过的链接颜色会发生厘革。
https://i-blog.csdnimg.cn/direct/b61dacb3a1cf4bad9158d3f9f4f712ad.gif
利用a标签返回页面顶部以及跳转页面指定地区
如果将<a>标签href属性设置为“#”，可以跳转到页面顶部，我们设置一个盒子，撑开页面内容，再设置一个超链接，链接的href属性设置为“#”，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 2000px;
}
</style>
</head>
<body>
<div></div>
<a href="#">点我跳转回到顶部</a>
</body>
</html> 我们点击超链接可以跳转到页面顶部，效果如下：
https://i-blog.csdnimg.cn/direct/4086dd65ace34e49a41dafca6eda95d6.gif
“#”也叫做锚点，可以跳转到页面指定地区，我们设置三个盒子，并给差异颜色，给盒子设置id属性，a标签的href属性设置为“#盒子名称”即可返回到对应的盒子的位置。代码如下：
<body>
<style>
.box-1 {
width: 400px;
height: 400px;
background-color: saddlebrown;
}
.box-2 {
width: 600px;
height: 600px;
background-color: rgb(99, 107, 107);
}
.box-3 {
width: 1000px;
height: 1000px;
background-color: skyblue;
}
</style>
<div class="box-1" id="box1">box1</div>
<div class="box-2" id="box2">box2</div>
<div class="box-3" id="box3">box3</div>
<a href="#box1">点击跳转到box1</a>
<a href="#box2">点击跳转到box2</a>
<a href="#box3">点击跳转到box3</a>
</body> 效果如下：
https://i-blog.csdnimg.cn/direct/dfa5d1e553f24806bae4bd1d0eb76dc4.gif
利用a标签实现文件下载
<a>标签还可以用于实现文件下载功能，代码如下：
<!-- 下载素材 -->
<a href="./img/1.jpg" download="1.jpg">点击下载素材</a> 效果如下：
https://i-blog.csdnimg.cn/direct/bf47c5b01dc3402bbbe1f2cec67f0172.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]