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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

meta标签中的http-equiv属性使用

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是:

HTML5表单标签

Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮

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

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

关于v-if和v-for不能一起使用在同一个标签上

遍历object的所有value(即li中的v-for),当拿到testData的第一个元素TESTOBJECT时,执行div中的v-for,此时的item对应T E S T O B J E C T这10个元素,于是循环10次,每一次都判断当前元素是否是array,很显然每次判断都是object

HTML中的target(_self,_blank)用法总结

最近一个项目,多次遇到target=\\\'_self\\\', target=\\\'_blank\\\'的用法, 再次总结一下:<a>标签;<form>标签;window.open;target的所有取值以及它们的含义:

在html中创建自定义标签

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

META标签的设置

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

vue自定义标签和单页面多路由实现

比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:

前端html标签:块级元素,行内元素,空元素

html标签定义:是由一对尖括号包裹的单词构成,例如: <html>.标签不区分大小写<html> 和 <HTML>, 推荐使用小写.标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体

CSS 标签的分类,及显示模式

标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广