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

时间: 2017-11-09阅读: 4968标签: 标签

<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>




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/69

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

深入理解Video标签

目前主流浏览器加强了对自动播放策略(Autoplay)的限制:浏览器在没有交互操作之前不允许有声音的媒体文件自动播放。 而且各个浏览器关于自动播放策略有不同的实现。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

HTML基础知识(块级标签,行内标签,行内块标签)

块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

html里a标签中href调用js的几种方法

这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

html5语义化标签

在html5没出来之前,一直用html的div+css进行布局,通篇div+span,确实不优雅。html5新增了很多语义化的标签,帮助我们写出更优雅的html结构。<article>可以是页面任何独立的内容区域

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!