广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >html5中map标签怎么用
  • 660
分享到

html5中map标签怎么用

2024-04-02 19:04:59 660人浏览 独家记忆
摘要

小编给大家分享一下HTML5中map标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! htm

小编给大家分享一下HTML5中map标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

html5中map标签用于定义一个客户端图像映射,也就是一个有可点击区域的图像,语法为“<map name="value">...</map>”,图像元素可以引用该标签的“name”属性来实现图像映射,因此“name”属性是必不可少的。

教程操作环境:windows10系统、HTML5版、Dell G3电脑。

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

语法如下:

<map name="value">...</map>

示例如下:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<p>点击太阳或其他行星,注意变化:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

输出结果:

html5中map标签怎么用

当点击图片之后,会跳转页面:

html5中map标签怎么用

以上是“html5中map标签怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: html5中map标签怎么用

本文链接: https://www.lsjlt.com/news/87817.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html5中map标签怎么用
    小编给大家分享一下html5中map标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! htm...
    99+
    2022-10-19
  • HTML中的<map>标签怎么用
    这篇文章给大家分享的是有关HTML中的<map>标签怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。     HTML<map>...
    99+
    2022-10-19
  • HTML5中embed标签怎么用
    这篇文章主要介绍了HTML5中embed标签怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 定义和用法 &...
    99+
    2022-10-19
  • html5中li标签怎么用
    这篇文章主要为大家展示了“html5中li标签怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中li标签怎么用”这篇文章吧。 ...
    99+
    2022-10-19
  • html5中meta标签怎么用
    这篇文章给大家分享的是有关html5中meta标签怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在html5中,meta标签用于提供html文...
    99+
    2022-10-19
  • HTML5中audio标签怎么使用
    这篇文章主要介绍“HTML5中audio标签怎么使用”,在日常操作中,相信很多人在HTML5中audio标签怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5中...
    99+
    2022-10-19
  • HTML5中ol标签怎么使用
    本文小编为大家详细介绍“HTML5中ol标签怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML5中ol标签怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2022-10-19
  • html5中br标签怎么使用
    这篇文章主要讲解了“html5中br标签怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5中br标签怎么使用”吧! ...
    99+
    2022-10-19
  • HTML5中画布标签怎么用
    这篇文章主要介绍“HTML5中画布标签怎么用”,在日常操作中,相信很多人在HTML5中画布标签怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5中画布标签怎么用”...
    99+
    2022-10-19
  • HTML5中怎么使用Canvas标签
    这篇文章主要介绍“HTML5中怎么使用Canvas标签”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中怎么使用Canvas标签”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • Html5中video标签怎么使用
    小编给大家分享一下Html5中video标签怎么使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足...
    99+
    2023-06-09
  • HTML5的audio标签和video标签怎么使用
    这篇文章主要介绍了HTML5的audio标签和video标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5的audio标签和video标签怎么使用文章都会有所...
    99+
    2022-10-19
  • HTML5中语义化标签怎么用
    本篇内容主要讲解“HTML5中语义化标签怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5中语义化标签怎么用”吧! HTML5属于上一代HTML的...
    99+
    2022-10-19
  • 怎么在HTML5中使用embed标签
    这篇文章将为大家详细讲解有关怎么在HTML5中使用embed标签,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。定义和用法 <embed> 标签定义嵌入的内容,比如插件。 实例 &...
    99+
    2023-06-09
  • 怎么在Html5中使用video标签
    这篇文章将为大家详细讲解有关怎么在Html5中使用video标签,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。video标签行内属性src:视频的URLposter:视频封面,没有播放时显示...
    99+
    2023-06-09
  • HTML5语义标签怎么用
    这篇文章将为大家详细讲解有关HTML5语义标签怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 仿照着用HTML5+CSS3做了一个bl...
    99+
    2022-10-19
  • html5的marquee标签怎么用
    本篇内容介绍了“html5的marquee标签怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • HTML5的Video标签怎么用
    这篇文章主要介绍HTML5的Video标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! <video>标签的属性 复制代码 代码如下: src :视频的属...
    99+
    2022-10-19
  • HTML5中的<section>标签怎么用
    这篇文章主要介绍“HTML5中的<section>标签怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中的<section>标...
    99+
    2022-10-19
  • HTML5中的<mark>标签怎么用
    这篇文章给大家分享的是有关HTML5中的<mark>标签怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。     HTML5<mark...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作