创可铁

HTML中a标签的几大作用-爱啪奇学习

字号+ 作者:秩名 来源:csdn 2022-11-11 我要评论

a标签的几大作用

HTML中a标签的几大作用
 
分类专栏: HTML/CSS/LESS 文章标签: 超链接a 锚点 超链接开启邮箱 超链接开启QQ 超链接开启电话
 
在学习行级标签的时候总结有三大最为重要的行级标签,分别为:a标签;span标签;img标签。现在主要总结一下a标签的几大应用场景。
一:外部页面链接
外部页面链接需要一个完整的网页的地址,看一下具体的例子:
 
<a href="http://www.baidu.com" target="_blank">百度</a>
1
这里的href规定的是指向页面的URL地址,target属性指的是规定打开链接网页的方式;target属性的几种属性值的取值分别为:
1: _blank 代表在新窗口中打开页面的链接地址;
2: _self 代表在自身窗口打开页面链接,默认为self;
3: _parent 代表是在父窗口中打开此网页;
4: _top 代表的是在整个窗口中打开此网页,测试的效果与self相同;
 
二:本地页面链接
在同一个项目中,href的指向为相对路径,此时应该注意相对路径的书写。
 
<a href="demo02.html" target="_blank">打开demo02</a>
1
这个href所指向的链接地址和本文件是处于同一个项目中的,所以直接写目标文件的文件名即可。
 
三:锚点链接
在浏览一些网页的时候大都在网页的上方有一个固定住的导航条,上边会列出下方显示内容的版块分区。当点击导航条中的一个版块的时候他会自动的跳转到指定的版块,这是页面内部的区域跳转。上实例:
 
<!--为了简化代码方便阅读,div版块设置为宽度高度各为300px的不同颜色的版块-->
<p id="part1">第1章</p>
<div class="part"></div>
<p id="part2">第2章</p>
<div class="part"></div>
<p id="part3">第3章</p>
<div class="part"></div>
<p id="part4">第4章</p>
<div class="part"></div>
<p id="part5">第5章</p>
<div class="part"></div>
<p id="part6">第6章</p>
<div class="part"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--设置的锚点链接设置行内样式将导航条定位到右上角-->
<div style="position: fixed;top:20px;right: 20px">
    <a href="#part1">第1章</a>
    <a href="#part2">第2章</a>
    <a href="#part3">第3章</a>
    <a href="#part4">第4章</a>
    <a href="#part5">第5章</a>
    <a href="#part6">第6章</a>
</div>
1
2
3
4
5
6
7
8
9
分析: 此时点击 导航条的各个区域就会跳转到页面指定的区域。
使用锚点链接的几个重点是:
1:在链接的目的区域设置id属性,并设置上唯一的一个id名称。
2:在导航条区域设置a标签,注意href属性的属性值是要链接区域的id值,并且一定要记住带“#”号。
 
四:一些其他的功能性链接
1:发送邮件:
在点击了发送邮件的之后,浏览器会自动开启默认的邮箱软件,并将邮件地址放进接收方中。
 
<a href="mailto:邮件接收人">发送邮件</a>
1
2:打开QQ:
第一个链接不能打开非好友的对话框,第二个可以打开非好友QQ对话框
 
<a href="tencent://message/?uin=客服的QQ号&Site=&Menu-=yes">联系客服(不可以打开未添加好友的会话框)</a>
1
<a href="tencent://message/?Menu=yes&uin=客服的QQ号&Site=80fans&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1714f9d45">链接到客服(可以打开未添加好友的会话框)</a>
1
3:拨打电话
这个功能链接多用于移动端的网页,在点击拨打电话之后自动弹出拨号功能并且将电话号码填入;
 
<a href="tel:13110016538" class="call">拨打客服电话</a>
1
**注意:**这些链接都是可以直接复制过去并且修改邮箱地址,QQ号码,电话之后就可以直接使用。
 
总结:
超链接标签a有四个应用场景,一个是链接到外部页面,一个是链接本地页面,还有一个是方便读者的锚点链接,还有一些新的功能,比如打电话和发送邮件,弹出QQ对话框等等。
 
 
F-ZERO-F
关注
 
0
 
 
5
 
 
0
 
专栏目录
a标签作用详解
qq_41555595的博客
 408
a标签作用详解 a标签是行级标签 1.超链接,页面跳转(最为人熟知) <a href="www.baidu.com">baidu</a> 例子: baidu 2.锚点(也最为人熟知) 作用: 定位的相应位置,或者快速找到目标 <a href="#">页面顶部描点</a> 例子: 页面顶部描点 3.打电话 <a href="tel:88888...
HTML中a标签的作用
evenzx的博客
 2899
在HTML中,我们可以使用a标签来实现超链接。 语法: href:是你想要跳转到那个页面的路径(也就是地址),可以是下相对路径,也可以是绝对路径。 下面我简单的介绍哈什么是相对路径,什么是绝对路径: 绝对路径的书写格式:协议://域名/目录 绝对路径的协议和域名可以省略但是目录不能省略如:http://www.baidu.com/zhidao中的http就是协议 baidu.com就是域名, /zhidao就是目录,/zhidao不能省略。 相对路径:./路径,但是./可以省略,直接编写如girl.png,
html使用a跳转页面,HTML之a标签的使用_欢12的博客
11-7
下面的篇幅我们一起来讨论html中a标签的用途。(针对html5讨论,html5中不支持的功能不在此篇文章的讨论范围内) 1. 链接作用 这个大家都很熟悉,就是点击跳转到我们设定的链接上,具体语法为: ...
HTML常用标签(a标签/img标签/table标签)_写代码的陈道长的博客-CSDN博 ...
11-3
HTML中的a标签又被称为锚元素,可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。–MDN 整理之后,a标签的主要作用有以下三点: 跳转外部页面 ...
html中lable标签的作用
02-01
html中lable标签的作用和几个例子
前端开发:a标签的使用
qq_57210034的博客
 539
目录 1.a标签作用 2.a标签的属性 2.1 href属性 2.2 Target属性作用: 2.2.1 Target属性blank的作用 2.2.2 Target属性self的作用 2.2.3 Target属性parent的作用 2.2.4 Target属性top的作用 2.2.5 Target属性framename的作用 2.3Target标签对seo的作用: 1.a标签作用 <a href="URL">点击跳转</a> 2.a标签的属性 2..
html的a标签_VibMike的博客_html中a标签
11-7
HTML a 标签详解 红薯藤的博客 266 a标签是浏览器中最常见的标签,它最主要的作用是从一个页面跳转到另一个页面,那么除了超链接这个最主要的功能,你还知道a标签的哪些功能呢?Html中a标签的使用方式 十三月的博客 1044 Html中a...
Html基础:a标签常用功能&常用列表_渣猫略懂的博客_htmla标签...
11-10
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> </head> <body> <!-- a标签:又称超链接,跳转路径分为相对路径和绝对路径 --> <!-- 绝对路径为完整的地址,打开外部网页连接时,一级网址(www.)可...
HTML中<a></a>标签的四大功能 必看!必看!!必看!!!
girls的博客
 1万+
a标签的第一个功能:超链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>.
html中a标签的具体使用,什么是a标签 a标签怎么用
weixin_42502122的博客
 1653
以下为学做网站论坛关于“什么是a标签 a标签怎么用”讲解视频教程。a标签就是超链接,它是任意一个网站都存在的标签,通过超链接a标签可以将互联网上的任意一个网页联系起来,从而组成一个大的互联网。学做网站论坛也使用了大量的a标签,如下图:可以这样说,如果没有超链接a标签的存在,就没有互联网的存在。它也是我们自己做网站时特别特别常用的的一个HTML标签。a标签标签写法这里输入需要插入链接的文字或图片例如...
HTMl中a标签的用法_wangwenwen__的博客_html中a
11-4
文章标签: html 版权 我们知道a标签属于行内元素,但其用法还不甚了解,接下来我将梳理a标签具体如何使用 a标签是超链接,可以通过它的href属性创建通向其它页面,文件,同一页面中的位置,打开、发送电子邮件 1.在href属性中设置超链接, ...
html5中a标签的作用,HTML5中的a标签新增了哪些属性_拾月瓣的博客-CSDN...
10-25
HTML 与 HTML5之间的差异就是在html中标签既可以是超链接也可以是锚点,但在HTML5中标签是超链接 HTML5中标签新属性 charset:html5不支持,指url的字符编码 coords:html5 不支持,指链接的坐标。
a标签的4个功能
weixin_42863585的博客
 722
a标签 (注意:a标签可以嵌套任何标签,除了a标签自己,即a不能套a。) a标签的4个作用: 1、超链接作用,可以跳转网页。 <p> <a href="https://www.baidu.com" target="_blank">去百度</a> <p/> 2、锚点作用: (1)当页面一屏展示不了时,两个标签分别位于顶部和底部,就可以实现点击跳转至底部或顶部,快速到达指定位置。 <a href="#two" name="one">底部<
a标签有哪几种作用
lan128lan的博客
 987
a标签是行级元素 1,超链接 2,锚点 定位的相应的位置,或快速找到目标 3,打电话,发邮件等 <a href="tel:150xxxxxxxx">给郭xx打电话</a> <a href="mailto:150xxxx@126.com">给郭xx打电话</a> 4,协议限定符,强制使用javascript代码 <a href...
HTML a 标签详解
最新发布
红薯藤的博客
 320
a标签是浏览器中最常见的标签,它最主要的作用是从一个页面跳转到另一个页面,那么除了超链接这个最主要的功能,你还知道a标签的哪些功能呢?
关于使用固定导航a标签跳锚点时产生问题的解决方法
彭筱桐的专栏
 1964
1、导航固定在头部,a标签跳锚点时,偏移问题。只适用于在当前页面内的锚点跳转html部分代码:<ul class="nav"> <li class="dropdown action"> <a data-ajax="false" href="index.php" class="dropdown-toggle">网站首页</a> </li> <li cla
2、<a></a>标签全部作用
Slueia的博客
 6084
标签的target属性大致有这几种: (1)_blank (2)_self (3)_parent (4)_top 作用1 超链接 1、<a href="https://www.baidu.com/" target="_blank">超链接</a> 在一个新的窗口打开连接相应的网页。 2、<a href="https://www.baidu.com/" target="_self"> 在原来的窗口打开连接相应的网页。(如果target属性值不写的话,默认是这种方式) 3
a标签的作用
weixin_34233618的博客
 208
2019独角兽企业重金招聘Python工程师标准>>> ...
a标签,base标签及假链接,锚点
weixin_45531741的博客
 297
a标签 什么是a标签? a标签的作用: 就是用于控制页面与页面之间跳转的 a标签的格式: 需要展现给用户查看的内容 a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转 _self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self _blank: 用于在新的选项卡中跳转, 也就是新建界面跳转 a标签中还有一个属性, 叫做title. a标签中的titl...
a标签及属性
桃子的博客
 1万+
a标签及属性 1. a 标签的作用 就是用于控制页面之间跳转 2. a 标签的格式 <a href="跳转的目标界面">展示内容</a> 3. 注意点 a 标签不仅可以让文字可以点击。还有图片也可以点击跳转 一个a标签必须有href属性 跳转的是地址,地址前要加上http://或者https:// <a href="http://news.baidu.com/">百度新闻</a> <br><br><br&
HTML常用标签
Y_xyao的博客
 719
HTML常用标签 1.1 标题标签 h1-h6文本等级标签 p段落标签 <p>文本内容</p> 作用:可以把HTML文档分隔为若干个段落,是HTML文档中的最常见的标签,会根据浏览器窗口的大小自动换行。 水平线标签hr hr是个单标签,创建横跨网页水平线的标签。 换行标签br 强制换行。 div和span标签 一行只能放一个div,一行可以放好多个span。 1.2文本格式化标签 标签 显示效果 b标签 /strong标签 粗体 i便签 斜体
前端学习第三章——a标签(超链接)
Jan's的博客
 2050
a标签(超链接) 我们浏览一个网页,比如京东、天猫、腾讯视频、csdn、掘金,这些网站,我们总是可以看到一些按钮或者图片或者文字,点击之后可以跳转到其他页面或者其他网站,这是怎么做到的呢? 在HTML中,有一个标签,可以设置点击文字跳转的效果——a标签 看看我们a标签的效果 <!DOCTYPE html> <html lang="Zh-cn"> <head> <meta charset="UTF-8"> <meta http-..
HTML之超链接标签
David_house的博客
 278
HTML之超链接标签超链接标签表示属性 超链接标签 表示 <a>访问方式</a> 注意:超链接标签中一定要声明方式,访问方式可以是文字也可以是图片 属性 href:要跳转的网页资源路径 本地资源:相对路径(绝对路径也可以,不推荐) 网络资源:网页的URL target:指明要跳转的网页资源的显示位置 target的取值: 符号 意义 _self 在当前页中刷新显示 _blank 在新的标签中显示 _top 在顶层页面中显示 _parent 在父级页面
a标签的五个作用
滕安超的博客
 1437
1.超链接 2.锚点 3.打电话 4.发邮件 5.协议限定符<a href="javascript:alert('测试')"></a>
a标签作用
qq_44705486的博客
 293
1.页面跳转 2.空链接 3.锚点
a标签中href=""的几种用法
热门推荐
Wendy
 21万+
众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法,所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法(参考总结的) 1、a href="javascript:js_method();" 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的h
a标签的三种功能及其属性的运用
甲戌天火的博客转载学习
 2053
html> html> head lang="en"> meta charset="UTF-8"> title>a标签title> head> body> 标签三种功能: 1.页面跳转。 2.锚点链接。 3.功能链接。--> a href="http://book.qidian.com/
“相关推荐”对你有帮助么?
————————————————
版权声明:本文为CSDN博主「F-ZERO-F」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sun_DongLiang/article/details/81228286

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

  • 上一篇:没有了
  • 下一篇:没有了
  • 相关文章
    网友点评
    精彩导读