众所周知，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. 一篇谈Flink不错的文章

    精华 : 在执行引擎这一层,流处理系统与批处理系统最大不同在于节点间的数据传输方式.对于一个流处理系统,其节点间数据传输的标准模型是:当一条数据被处理完成后,序列化到缓存中,然后立刻通过网络传输到下一 ...

  2. [ 9.11 ]CF每日一题系列—— 441C暴力模拟

    Description: n * m 的地图,建设k个管道管道只能横竖走,且长度大于等于2,问你任意一种建设方法 Solution: 图里没有障碍,所以先把前k - 1个管道每个分2个长度,最后一个管 ...

  3. poj 2676 如何填满九宫格

    Sudoku Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java class ...

  4. Android-Kotlin-空值处理&字符串比较&常量

    空值处理: [案例一:] 1.Kotlin对控制处理很严格,默认就不能写null,否则编译都不通过: 描述Car汽车对象: package cn.kotlin.kotlin_base01 /** * ...

  5. [leetcode 50]remove element

    1 题目 Given an array and a value, remove all instances of that value in place and return the new leng ...

  6. cnn的说明

    概述 前面的练习中,解决了一些有关低分辨率图像的问题,比如:小块图像,手写数字小幅图像等.在这部分中,我们将把已知的方法扩展到实际应用中更加常见的大图像数据集. 全联通网络 在稀疏自编码章节中,我们介 ...

  7. .Net Core Web应用发布至IIS后报“An error occurred while starting the application”错误

    An error occurred while starting the application. .NET Core X64 v4.1.1.0    |   Microsoft.AspNetCore ...

  8. Microsoft.Office.Interop.Excel.ApplicationClass can not embedded 的问题

    用c#进行开发时,要做一个excel导入功能,期间使用到Microsoft.Office.Interop.Excel程序集,在用vs2008开发的时候没有报错,将这个程序集引用到vs2010的时候,便 ...

  9. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  10. CentOS 7 - 安装Oracle JDK8

    我们要在CentOS安装最新版本的JDK8,需要首先将JDK下载到服务器,然后通过操作系统自带的工具yum进行安装. 本文我们将介绍CentOS 7下JDK8的安装. 从官网下载页面找到JDK8的下载 ...