众所周知，map标签可以给img图像标记热点区域，而area标签就是跟map标签一起使用的。

但area标签的作用可不止用来标记热点，因为它也有href属性，因此某些场景可以代替a标签进行页面跳转。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        area{position: absolute;left: 0;width: 80px;height: 20px;}

    </style>

</head>

<body>

    <p>

        <area shape="rect" coords="0,0,30,10" href="">点击这里

    </p>

</body>

</html>

什么样的场景会需要这个？

a标签不支持嵌套，因此它的作用就来了。

详情请看这篇文章。

使用area标签模仿a标签的更多相关文章

  1. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  2. 20190322-a标签、img标签、三列表、特殊字符实体、表格

    目录 1.a标签 a标签的属性 锚点 2.img标签 img标签的属性 图像热区 3.三列表 有序列表(Ordered List)     ol>li 无序列表(Unordered List)  ...

  3. 03-body标签中相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  4. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. 03-body标签中相关标签-2

    主要内容: 列表标签 <ul>.<ol>.<dl>表格标签 <table>表单标签 <form> 一.列表标签 列表标签分为三种. 无序列表 ...

  6. 前端之body标签中相关标签（二）

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  7. Kure讲HTML_div标签和table标签

    为什么要把这两个标签放在一起讲? 个人认为div标签可以算是一个万能标签,它可以通过CSS(层叠样式表)来模仿表格的形式来生成一个表格.那么很多人可能会疑惑那在开发的时候,到底是用div+css的形式 ...

  8. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  9. html-body标签中相关标签 02

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

随机推荐

  1. Pychar-20170301快捷键

    Pychar IDE 2017.03.03 版本的特性 ------------------------------------------------Ctrl+D:(Dumplicated) 复制选 ...

  2. python模块补充

    一.模块补充 configparser 1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -opti ...

  3. poj 2777 线段树的区间更新

    Count Color Time Limit: 1000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java ...

  4. MySQL--Percona-XtraDB-Cluster使用xtrabackup来添加节点

    虽然PXC支持在线增加群集节点,但是目前尚未解决wsrep_sst_method=xtrabackup 或wsrep_sst_method=mysqldump时报错的问题,因此尝试手动完成xtraba ...

  5. C# 开源仪表盘库—Agauge App

    1.简介 有个叫A.J.Bauer 的大神在System.Windows.Forms.Control类的基础上建立了一个显示各种仪表盘的类.                   英文版简介:C# Tu ...

  6. asp.net mvc 配置ckeditor4.x

    下载地址:https://ckeditor.com/ckeditor-4/download/ 一.使用方法: 1.在页面中引入ckeditor核心文件ckeditor.js 2.在使用编辑器的地方插入 ...

  7. .net core 分布式配置中心

    github地址 https://github.com/wangchengqun/ratel 配置文件 数据同步端口 Server: ip: 127.0.0.1 port: 7890 浏览器访问 ht ...

  8. EF学习笔记-2 EF之支持复杂类型的实现

    使用过.NET的小伙伴们知道,在我们的实体模型中,除了一些简单模型外,还有一些复杂类型,如几个简单的类型组合而成的类型:而EF除了在实现基本的增删改查之外,也支持复杂类型的实现. 那么如何手动构造复杂 ...

  9. Spring Boot使用@Async实现异步调用：自定义线程池

    前面的章节中,我们介绍了使用@Async注解来实现异步调用,但是,对于这些异步执行的控制是我们保障自身应用健康的基本技能.本文我们就来学习一下,如果通过自定义线程池的方式来控制异步调用的并发. 定义线 ...

  10. 原生JS实现AJAX、JSONP及DOM加载完成事件，并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...