Html中a标签用法总结：创建email，电话，描点链接等。以及防止链接被搜索引擎收录

2024-03-30 14:53:22

a标签可以用来创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。是我们常用的一个标签之一，今天就讲讲如何使用a来创建email，电话，描点链接等。以及防止链接被搜索引擎收录。

a锚点链接

锚点可以在同一页面的不同位置间跳转，其实就是在元素间跳转，常用的场景就是，页面很长，让用户方便在页面不同部分间跳转建立锚点目标，只需要给目标元素增加id或者name即可。当我们点击a标签的时候，页面就能自动定位到含有name="test"的位置，例如：

<div id="test" name="test"></div>
<!--其它代码
-->
<a href="#test"></a>

创建email链接

这样可以将用户的电子邮件程序打开，让他们发送新邮件，它是通过使用一个mailto链接完成的。例如：

<a href="mailto:522607023@qq.com">Send email</a>

创建Tel链接

当页面在手机浏览器器中运行的时候，可以调用手机的拨号tel，来实现网页中点击就能拨打电话的能，例如：

<a href="tel:+12345678">联系电话：12345678</a>

a链接实现文件下载

在我们写项目的时候经常会遇到上传下载什么的，如果想不通过后台直接在html中下载文件的话，可以把文件路径给a标签的href属性即可。注意一点的是，如果文件是txt,png,jpg等格式，浏览器会直接打开，而不触发下载功能，这时需要我们给a标签添加一个“download”属性，例如：

<a href="文件地址" download="文件名.txt">点击下载</a>

防止a链接被搜索引擎收录

当我们做网站的时候，经常会遇到部分连接里的内容不想让Google或百度等搜索引擎抓取，这时候就需要使用a标签下rel属性nofollow和external的结合，来防止连接被收录。对于外链或某些无意义链接我们就这样使用到，例如：

<a href=”http://www.****.com” rel=”external nofollow” target=”_blank”>连接</a>

Html中a标签用法总结：创建email，电话，描点链接等。以及防止链接被搜索引擎收录相关推荐

jsp中用java写标签id_jsp中自定义标签用法实例分析
本文实例讲述了jsp中自定义标签用法.分享给大家供大家参考.具体如下: 这里简单的写了一个自定义标签,自己定义标签的好处就是在jsp页面中可以使用自己定义的功能,完全与Java代码分离 1. tld文 ...
HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
html设置默认选中状态,html中select标签用法解析及如何设置select的默认选中状态...
当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将表单数据提交给服务器时包括 name 属性. 标签可选的属性属性值 ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
html中a标签用法
众所周知,在HTML中我们会经常用到<a></a>这个链接类标签,接下来我们就来说说这个<a>标签的用法: 注意:一般情况下a链接的写法如下:<a href ...
html中optgroup 标签用法，分组、只读的且呈树状样式显示
在html的select标签中除了了option标签外,还有一个标签就是optgroup .它能帮我们做什么咧? 从名称我们就已经领会到接分意思:它是一个option的组,就像checkboxgrou ...
html中table标签用法
1.<table> <table> 标签定义 HTML 表格. 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行 ...
html中video标签用法,HTML中的video标签怎么用
HTML中的video标签怎么用发布时间:2020-06-23 19:41:21 来源:亿速云阅读:111 作者:Leah 这篇文章运用简单易懂的例子给大家介绍HTML中的video标签的使用方法 ...
html中的标签img图片不显示问题
html中的标签img图片不显示问题在html中的标签img图片不显示,但是在网页上直接输入链接可以打开,甚至F12的地址中都可以显示出来图片,百思不得其解.最后的解决方法如下: <meta ...

最新文章

热门文章