html超链接及锚链接的简单使用

一、创建外部超链接

1、在本页面中打开超链接


<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com"  target="_self">百度</a>
注意： 默认情况下，target的值就是_self，所以上面第一条就算不指定target的值，也是直接在本页面中打开超链接。

2、在新的标签页中打开超链接


<a href="https://www.baidu.com"  target="_blank">百度</a>   //target的值为_blank的情况下，在新的标签页中打开超链接。

3、剩下两个target的值，_parent和_top都是用在iframe中，即内嵌网页时，控制跳转行为。_parent是跳转到上一级窗口，_top是跳转到顶级窗口。如果不用在iframe中，就如1中一样。

二、创建锚链接（即标记本html页面中的一个点，通过点击a标签，直接跳转到那个位置。）

1、构建锚点在本页面中跳转

第一种方式：id方式


<p id="top"><a href="#bottom"> 从这里跳转到底部</a></p>   //锚点通过指定href="#id值"，指定跳转到相应的id标签处。
<p id="bottom"><a href="#top"> 跳转到这里，点击又跳转回去</a></p>
或者
<a id="test1"href="#test0" >跳转</a>
<a id="test0" href="#test1" >跳转回去</a>

第二种方式：a标签的name属性


<a href="#test0" name="test1">跳转</a>
<a href="#test1" name="test0">跳转回去</a>

2、特殊锚点：直接回到顶端


<a href="#">回到网页最顶部</a>
<a href="javascript:void(0)">不跳转</a

三、在网页中嵌入邮件发送链接以及启动本地应用程序

1、创建锚点在本页面中跳转

通过指定href的url类型来嵌入邮件发送地址


<a href="mailto:577898923@qq.com">发送邮件</a>
当我们点击发送邮件的时候，浏览就会自动寻找本机中安装好的邮件客户端，并启动它，然后再地址栏中自动写入该邮箱地址。
具体的可以参考：https://www.cnblogs.com/LiveWithIt/p/5937049.html  基本一个是通过a 标签，另外一个通过form标签，这两个的核心都是通过mailto这种类型的url来进行。https://www.cnblogs.com/LiveWithIt/p/5937049.html

2、另外还有一个url类型用于打电话，基本不常用，可以用于一些客户系统之中，例如：我查看一个客户信息，然后他有一个电话，为了减少客服在电脑的虚拟电话机上输入电话号码的时间，就可以直接设置这样一个链接。


<a href="tel:577898923@qq.com">发送邮件</a>
生效前提是，本机中装有虚拟电话机。

3、web应用直接调用办法，就是采用自定义协议：registerProtocolHandler()。


<a href="tel:577898923@qq.com">发送邮件</a>
生效前提是，本机中装有虚拟电话机。

四、利用title属性给超链接添加简短说明

1、给链接添加简短说明

 <a href="https://www.baidu.com" title="https://www.baidu.com">百度</a>

html超链接及锚链接的简单使用相关推荐

html 功能性链接,web前端之html(三)超链接、锚链接和功能性链接
前言前面总结的是头部标签和常用标签,下面这篇帖子就总结一些超链接.锚链接和功能性链接. 超链接通过点击可以从一个页面跳转到另一个页面,实现页面间的导航.当鼠标移动到超链接时,箭头会变成一只小手. ...
2_31_HTML中超链接、锚链接、图像、表格的学习_190917
一.超链接嵌套标签的使用代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
5.超链接和锚链接说明
1.超链接 a标签实现跳转页面属性: href 外部链接或者内部链接外部链接写完整URL, 内部链接写相对地址即可. target 可选: _self默认值代表在当前窗口打开页面. _blank在 ...
excel公式编辑器_Excel中自动更新超链接的文件目录，超简单
日常工作中,一个项目的文件往往会有很多个,在Excel中制作一个项目文件目录,可以快速方便的查看不同的文件. 如下图所示,就是一个模拟的项目文件夹内的所有子文件夹,每个子文件夹内包含不同类型的文档,而 ...
019_html超链接
1. html使用超链接与网络上的另一个文档相连. 2. 几乎可以在所有的网页中找到超链接.点击超链接可以从一张页面跳转到另一张页面. 3. html超链接 3.1. 超链接可以是一个字, 一个词, ...
HTML超链接、锚链接
超链接和锚链接的区别,就是超链接需要跳砖页面:锚链接不需要,在同一页面中跳转到某个位置. 不管是超链接,还是锚链接,都是用a元素. 超链接:超链接的使用就是在href中加入网址,如果是图片超链接就是在 ...
php+点击图片跳转网页,怎么在图片上加超链接点击图片跳转到指定网页
在一些论坛.博客或者是一些网站浏览图片的时候会发现一个问题,就是当你不小心点击某一张图片后会自动跳转到另一个网页的界面,这样做的目的其实是为了宣传.推广该网页,也达到一个引流的效果,我们也可以利用这样 ...
Unity UGUI图文混排(六) -- 超链接
图文混排更新到超链接这儿,好像也差不多了,不过就在最后一点,博主也表现得相当不专业,直接整合了山中双木林同学提供的超链接的解决方案,博主甚至没来得及细看就直接复制了,但感觉还是挺好用的. 博主已经将超 ...
超链接标签＜a href=“目标网址“＞超链接＜/a＞的介绍
超链接标签的介绍使用场景:点击之后,从一个页面跳转到另一个页面别称:a标签.超链接.锚链接代码:<a href="目标网址">超链接</a> 属性 ...

html超链接及锚链接的简单使用

html超链接及锚链接的简单使用

一、创建外部超链接

二、创建锚链接（即标记本html页面中的一个点，通过点击a标签，直接跳转到那个位置。）

三、在网页中嵌入邮件发送链接以及启动本地应用程序

四、利用title属性给超链接添加简短说明

html超链接及锚链接的简单使用相关推荐

最新文章

热门文章