一、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文件。
我们在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的超链接。
分别点击两个超链接,均可完成跳转,此时是在当前窗口打开的,没有一个新窗口,且访问过的链接颜色会发生厘革。
利用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>
复制代码 我们点击超链接可以跳转到页面顶部,效果如下:
“#”也叫做锚点,可以跳转到页面指定地区,我们设置三个盒子,并给差异颜色,给盒子设置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>
复制代码 效果如下:
利用a标签实现文件下载
<a>标签还可以用于实现文件下载功能,代码如下:
- <!-- 下载素材 -->
- <a href="./img/1.jpg" download="1.jpg">点击下载素材</a>
复制代码 效果如下:
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |