<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,电话,描点链接等。以及防止链接被搜索引擎收录的更多相关文章

  1. jstl中ftm标签用法

    <fmt:formatDate value="${dateTime}" pattern="yyyy/MM/dd HH:mm:ss"/>

  2. iOS中UIKit——UIDataDetectors(数据检测器)它将电话、邮件、网址等变为链接

    1.它用于UITextView和UIWebView,属性名为:dataDetetorTypes 2.此属性可以设定使符合电话.邮件.网址.符合格式的日期等文字变为链接文字. 3.电话号码点击后拨出电话 ...

  3. html中meta标签及用法理解

    自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

  4. JAVA中的break[标签]continue[标签]用法

    原文:JAVA中的break[标签]continue[标签]用法 注意:JAVA中的标签必须放在循环之前,且中间不能有其他语句.例如:tag:for或while或do--while; 1.使用brea ...

  5. Thinkphp中的内置标签用法

    Thinkphp中的内置标签有:Volist,Foreach,For,Switch,比较标签,范围判断标签,IF,Present,Empty,Defined,Assign,Define,标签嵌套,im ...

  6. html中a标签的常见用法

    html中a标签的常见用法 一.总结 一句话总结: a.页面跳转 b.使用锚点定位 c.下载文件 二.html中<a>标签的用法 转自或参考:html中<a>标签的用法http ...

  7. ThinkPhp5 中Volist标签的用法

    Volist标签一般是和内置方法assign()搭配使用,将值从后台传到前台,是当下比较流行的一种传值方法 本文实例讲述了ThinkPHP模板循环输出Volist标签用法.分享给大家供大家参考,具体如 ...

  8. OpenCV中Mat的基本用法:创建、复制

    OpenCV中Mat的基本用法:创建.复制 一.Mat类的创建: 1.方法一: 通过读入一张图像,直接将其转换成Mat对象. Mat image = imread("test.jpg&quo ...

  9. Android manifest文件中的标签详细介绍

    官方文档 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如:--为Java应用程序指定一个独一无二的名字 ...

随机推荐

  1. 对LinkedList源码的一些个人理解

    由于转行的原因,最近打算开始好好学习,昨天看到了部分的LinkedList源码,并且看了一点数据结构的视频,现总结部分自己的心得体会,以供后期给现在的自己拍砖~ 双向链表每一个元素都有数据本身加指向前 ...

  2. 容器技术之Docker私有镜像仓库docker-distribution

    在前边的博客中我们说到docker的架构由docker客户端.服务端以及仓库组成:docker仓库就是用来存放镜像的地方:其实docker registry我们理解为存放docker镜像仓库的仓库比较 ...

  3. OAuth + Security - 5 - Token存储升级(数据库、Redis)

    PS:此文章为系列文章,建议从第一篇开始阅读. 在我们之前的文章中,我们当时获取到Token令牌时,此时的令牌时存储在内存中的,这样显然不利于我们程序的扩展,所以为了解决这个问题,官方给我们还提供了其 ...

  4. [xDebug] php下的Debug的调试

    基础知识 对于php来说,debug的话,有个东西叫xdebug,当然配置这个时候,特别在mac下出了很多坑,这里强烈推荐一个mac下类似phpstudy的东西,叫做MxSrvs,了解一下? Xdeb ...

  5. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  6. CISCN 2019-ikun

    0x01 进去网址,页面如下: 刚开始有个登陆和注册的按钮,上图是我已经注册后登陆成功后的页面,我们发现在图的左下角给了一个关键的提示,购买LV6,通过寻找我们发现页面数很多,大概500页,一个一个找 ...

  7. MySQL LIMIT:限制查询结果的记录条数

    基本的语法格式如下: <LIMIT> [<位置偏移量>,] <行数> LIMIT 接受一个或两个数字参数.参数必须是一个整数常量.如果给定两个参数,第一个参数指定第 ...

  8. CSS中link和@import的区别

    1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而l ...

  9. 查看apk安装包信息

    ➜ sdk aapt dump badging ~/Downloads/PermRoot8006.apk package: name='com.qihoo.permmgr' versionCode=' ...

  10. idea创建项目

    选项详解如下: Create New Project:创建一个新的工程.Import Project:导入一个现有的工程.Open:打开一个已有工程.比如:可以打开 Eclipse 项目.Check ...