#说起a标签真实功能强大呀,所以做个总结怕自己忘了
a标签的强大功能都要归咎于href属性可以为多种类型
1、< a href="#" >的作用:点击标签链接到网页的顶端
<a href="#">回到最顶端</a>
2、href="url"的作用(URL分为绝对路径和相对路径)
- URL:统一资源定位符(URL,英语Uniform Resource Locator的缩写)也被称为网页地址,是因特网上标准的资源的地址。
- URL的结构:基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名组成。
- 绝对路径:引入文件的真实存在路径(和当前文件没有关系)
- 相对路径:引入的文件相对于当前文件的路径
URL的类型有很多一种是网页类型比如百度页面:https://www.baidu.com/ 一种是文件类型的比如图片: http://baidu.com/i.img(还可以是文档、PPT等)。如果是网页的话是直接打开网页,但是如果是文件类型则是下载哦,这里还是有区别的
//跳转到百度页面 <a href="http://baidu.com">超链接</a> //下载文件 <a href="http://baidu.com/i.img">超链接</a>
3、href=#id/name(id是元素的id属性值,name是元素的name属性值,但是前面必须有#号告诉他你这个锚点)
这个跳转有两种情况一种是跳到页面内的指定的锚点元素,另一种是跳到其他页面的指定锚点
- 页内跳转:
//点击此处会跳到标记1 <a href="#1">锚点1</a> //点击此处会跳到标记2 <a href="#2">锚点1</a> <div id="1">标记1</div> <div name="2">标记2</div>
- 其他页面跳转
1.html //此时就会跳转到2.html的标记1处 <a href="2.html/#1">锚点1</a> <div id="1">标记1</div> 2.html <div id="1">标记1</div>
4、href="JavaScript:;"
(javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现a标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好)
//void是一个操作符,void(0)返回undefined,地址不发生跳转,会执行onclick里面的方法 <a href="javascript:void(0)" οnclick="sub();">方法</a> //#是标签内置的一个方法,代表top的作用。点击网页后返回到页面的最顶端。 <a href="#" οnclick="sub();">方法</a> //js函数后return false,页面不发生跳转,执行后还是在页面的当前位置 <a href="#" οnclick="sub();return false;">方法</a>
5、a标签还有一个功能就是发邮件
语法:
<a href="mailto:xxxxl@xxx.com?cc=抄送的人&bcc=秘密抄送的人&subject=邮件标题&body=邮件内容">告诉我们</a>
发送一个完整的邮件大概有五部分(除了收件人是必填的其他的可以选填哦)
mailto:收件人的邮箱地址
cc:需要抄送的人
bcc:秘密抄送的人
subject:邮件的主题
body:邮件的主题