html<img><map><area>标签总结

最新推荐文章于 2024-09-10 09:29:26 发布

阿斯卡Asika

最新推荐文章于 2024-09-10 09:29:26 发布

阅读量3.7k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/sipallan/article/details/51055951

版权

本文总结了HTML中的<img>标签及其相关属性，包括src的相对和绝对路径，图像高度和宽度的设置，以及图像映射的使用。重点介绍了ismap和usemap属性，用于创建服务端和客户端图像映射，并详细阐述了<map>和<area>标签的用法和属性，如shape、coords、href等。同时提到了longdesc属性，尽管浏览器支持有限，但在图像无法显示时提供长描述。

摘要由CSDN通过智能技术生成

前言

-<img> 标签并不会在网页中插入图像，而是从网页上链接图像。
-<img> 标签创建的是被引用图像的占位空间

用法示例：

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="图片显示不出来，点击这个链接进入百度" title="鼠标滑过时提示进入百度"/>

`<img>` 必要属性

-<img>的属性中，src和alt是必须的属性

src的相对路径和绝对路径

-绝对url - 指向另一个站点（略）
-相对url - 指向站点内另一个文件夹

<img src="/i/ct_netscape.jpg">

定义图像的高度和宽度

<img src="" height=60px width=60px />
<!--height和width的值可以是piexls或percent-->

请不要通过 height 和 wi

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿斯卡Asika

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【html】area/map/img的使用

qq_39532595的博客

11-25

551

今天翻MDN，发现一个area标签，重来没有用过。今天了解了一下。 area是单标签 area是用来画图形的，可以是圆形、矩形、和多边形属性（重点加粗）： cords是给所画的图片设定坐标值 download 是链接资源下载的除去网址信息 herf是area区域的url hreflang 是资源的语言 media 指明链接资源的媒体类型 nohref 指明是没有超链接的直接 rel 表...

img标签、map标签、area标签的简单用法

心中有侠

07-09

1068

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <img src=

参与评论您还未登录，请先登录后发表或查看评论

（22）HTML标签详解之<img><map><area>

yangli_world的博客

07-27

1862

HTML标签详解之在任何一个网页中图片都是很常见的，有的作为背景图片，有的是直接插入在网页中作为展示或者链接。标签的四大属性width、height、src 和 alt 。在一个图文混排的网页中，需要注意图片与周围文字的排布情况。以往都是使用align属性来设置如何根据周围的文本来排列该图像，但是建议使用float属性来控制图片与文字的排布。默认情况下，图片后如果

HTML5中`＜area＞`标签深入全面解析

最新发布

软考鸭

09-10

768

area>标签是一个行内元素，它必须嵌套在标签内部，用于定义图像上的特定区域。标签则用于声明一个图像映射，它包含一个或多个标签，每个标签都代表图像上的一个可点击区域。

<html>img、map、area

大草包的博客

05-13

442

<img src/alt/height/width/border align="top/left/right/middle/bottom" hspace="定义图像左、右的空白。" vspace="定义图像顶、底的空白。" ismap="将图像定义为服务器端图像映射。" longbesc="指向

html图像映射img map area

qq_26325251的博客

07-11

527

1.img 属性 src alteg: <img src="url" alt="some_text">url：图片地址链接。alt :预备可替换文本（用于图片加载较慢，或者防止图片出错时加载文字出来）。一个简单的图像映射的例子：点击上方图片位置，在下方iframe框中显示对应小图片<html> <head> <title>图像映射练习&lt

map+area标签

weixin_34055787的博客

03-17

239

map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像，配合area标签 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域例：要实现一幅地图上鼠标点击或者悬停在某个区域，可以显示出该区域的相关介绍，就需要这样的map+area标签的组合 <img> 标签中的 usemap 属性可引用 <map> 中的 id...

HTML图片热区map area的用法

Jana Jing的分享

12-15

5048

map标签定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name属性（取决于浏览器），所以我们应同时向map标签添加id和name属性。注释：<img>标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。示例我们想在下面一张图实现九个热点区域，不切图，就使用m...

(1分)下面哪个标签可以用来创建图像映射？A. <area> B、<map> C、<a> D、<img>

06-08

<area> 标签通常与 <map> 标签一起使用，用于创建图像映射。在 <area> 标签中，需要指定该区域的形状和坐标，以及与该区域关联的超链接或 JavaScript 函数。而 <map> 标签则用于指定整个图像映射的名称和位置。 <a>...

01-HTML5新的语义标签比如 <header>, <footer>, <article>, <section>,<aside>等

weixin_44077629的博客

03-09

443

HTML5新的语义标签： header footer nav main section aside article mark 定义有记号的文本 time details 定义元素的细节。（详细信息） summary 为元素定义可见的标题。 figure 定义媒介内容的分组，以及它们的标题。 figcaption 定义 figure...

帮我写一个关于篮球的网页，要求只用html的标签和属性，使用如下的标签和属性(1)、基础标签 <meta> 属性charset，取值为utf-8；属性http-equiv，取值为 expires/refresh；属性name，取值为keywords、roborts。属性content，注意content与不同属性搭配时的对应取值含义。 <title> <h1….h6> <p> <div> <section> <article> <aside> <footer> <address> <head> (2)、表单 <form> 属性action、method、target、enctype <input> 属性type，取值为radio、checkbox、file、password、text、submit、date、email、tel、range，另外还有属性required、placeholder、pattern (3)、下拉选择列表和选项列表 <select> <optgroup> <datalist> <option> (4)、列表 <ul> <ol> <li> (5)、表格 <table> <tr> <th> <td> (6)、图像与映射 <img> 属性src、usemap <map> <area> 属性coords、href、shape、target (7)、链接 <a> <link> (8)、其他 <button> <canvas> <style> <script> <audio> <video>不使用css和Javascrip，

06-01

<li><a href="#rules">规则</a></li> <li><a href="#history">历史</a></li> <li><a href="#teams">球队</a></li> </ul> </nav> <main> <section id="rules"> <h2>规则</h2> <p>篮球是一种室内或室外运动，...

html的热区可以自动缩放,html中map area 热区自适应的原生js实现方案

weixin_39975366的博客

05-31

573

在做自适应网页的时候，如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化，但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现：MAP中每个area的坐标也随页面等比例的变化效果。map area 热区自适应的实现代码img{display:block;max-width:1920;width: 100%;border: 0;}var ...

<map>~<area>

立业的博客

11-30

108

■ 定义 <map>标签用于客户端图像映射图像映射指带有可点击区域的一幅图像 ■属性 □usemap属性 <img>中的usemap属性可引用<map>中的id或name属性(取决于浏览器)，所以应同时向<map>添加id和name属性 □name属性必需，为image-map规定的名称，它规定了图像映射的名称 name属性与<im...

img 标签的 usemap 属性

weixin_33705053的博客

01-08

278

<img src="1.gif" alt="Planets" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html"> <area shape="rect" coords="198,13,3...

map标签与area标签构建映射图片解析

Wcharles666的博客

05-24

1156

一、需求分析在给的UI设计图，有两个a标签或者button,以往需要将其分成三部分背景图，两个下载按钮需要将背景图放于一div中，按钮相对背景图做定位或者其它方式. 它的优点：按钮点击的动态效果可以自行添加，美观；它的缺点：自适应适配难做，设备宽度有大有小，按钮的定位在某些程度上会存在偏差；花费时间长；简单功能复杂化；优化方案使用map标签，area标签，img标签，Adobe...

图片的映射<img>和<map>关系

txwsmsm7023_的博客

06-18

482

图片的映射是在图片可以分解出独立的模块，该模块可以有自己的行为比如说点击这个时候就需要用到<img>、<map>和<area> 语法：在<map>中设置id或name 在<img>定义了usemap属性来引用<map>的id或者name 完后再<map>里面定义需要裁剪的区域即可了栗子如下： <...

图解img标签的usemap使用

http://faveting.com/

07-15

1212

摘抄于 ---- 作者:肖文伟各位在看这篇文章之前请先到w3school来了解一下<img>标签中的usemap属性是什么: 在有些概念之后,文章将要开始介绍<img>标签的usemap详细使用方法了. usemap属性在w3school描述为: usemap 属性提供了一种“客户端”的图像映射机制. 事实上我个人觉得它就是在一个图像上描绘了多个“热点...

<IMG>中UserMap的用法

weixin_34025051的博客

01-08

1462

usemap是<img>标签的一个属性，用作指明所使用的图像地图名。后面的#Map的Map就是用<map>标签定义的一个图像地图，它的name属性是Map,像下面这样定义： <map name="Map"> <area shape=rect coods="100,100,200,200" href="test1.html"> &

html<img><map><area>标签总结

前言

<img> 必要属性

src的相对路径和绝对路径

定义图像的高度和宽度

`<img>` 必要属性