RIVALSA网络日志

Rivalsa周记(第20周)

于2021-09-13发布

HTML 知识点(二):map 标签与 area 标签

map 标签用于定义一个客户端图像的映射,此标签需要有一个 name 属性,属性值为 img 标签的 usemap 属性值去除 # 后的值。

map 标签如果设置 id 属性,属性值必须与 name 属性的属性值相同。map 标签支持 HTML 的全局属性和事件属性,但我感觉 map 标签的全局属性和事件属性并没什么用处。

area 标签总是嵌套在 map 标签中,用于定义图像映射中的区域。area 标签的常用属性如下。

(一)shape 属性

shape 属性用于定义图像映射区域的形状,值可以是以下内容之一。

描述
circ 圆形
poly 多边形
rect 矩形

shape 属性需要与 coords 属性配合,shape 属性定义了图像映射区域的形状,而 coords 属性定义了图像映射区域的边界。

(二)coords 属性

coords 属性用于定义图像映射区域的边界,其值的格式随 shape 属性值的不同而不同,下表列出了 coords 属性值的格式。

shape 属性值 coords 属性值格式 描述
circ x,y,r x,y 为圆形的圆心坐标,r 为圆形的半径。
rect x1,y1,x2,y2 x1,y1 为矩形的一个顶点的坐标,x2,y2 为矩形另一个顶点的坐标。x1,y1 与 x2,y2 需要为对角顶点。
poly x1,y1,x2,y2,x3,y3,... 每一对 x,y 都对应多边形的一个顶点的坐标,多边形会自动封闭。

提示:

1.坐标已图片左上角为基准点,水平向右为x的正方向,竖直向下为y的正方向。

2.如果有映射区域重叠在一起,则以最先出现的 area 标签为准。

(三)href 属性

href 属性定义了映射区域链接的目标地址,当对应区域被点击时,浏览器会转跳到此属性值规定的地址。

(四)alt 属性

area 标签的 alt 属性与 img 标签的 alt 属性相同,值为图片无法显示时的替代文本,详见 img 标签的 alt 属性

(五)target 属性

target 属性用于规定当点击映射区域时,浏览器在哪里打开链接地址。此属性可取值如下。

描述
_blank 在新窗口中打开被链接地址。
_self 在相同的框架中打开被链接地址,如果没有设置 target 属性,则默认属性值为 _self
_parent 在父框架中打开被链接地址。
_top 在当前状况中打开被链接地址。
某frame框架 在制定的框架中打开被链接地址。

(六)nohref 属性

此属性规定该区域没有相关链接,由于我还没具体弄清此属性如何使用,所以暂时就不介绍了。我会在弄明白之后更新在此处。

(七)全局属性与事件属性

area 标签支持 HTML 全局属性和事件属性。

关于 HTML 的全局属性和事件属性将在以后的周记中介绍。

网站板块调整

最近,网站下线了业余无线电板块,主要是因为平时通联太少了,算起来,今年到现在为止,一共通联也就两三次,所以平时也很少维护,索性就直接下线了。

在下线此版块的同时,网站也上线了一个新板块:RIVALSA 文档中心。主要就是把原来散落在网页里的各种文档都集中到一处,目前,各个文档正在逐渐迁移中。

以上是目前已经做完和正在进行中的调整,下面还要说一下今后的调整计划。

我的网站中有一个 RIVALSA 知识分享板块,之前一直在分享一些网络知识,但由于我个人知识储备有限,以及目前主要投入的精力不足,所以已经有很长一段时间没有更新内容了。

不过,最近我有了新的想法,与其一篇一篇的写文章,还不如直接在某一方面出一个相对完整的教程。所以今后我会逐渐下线 RIVALSA 知识分享板块,并新上线一个教程板块。而 RIVALSA 知识分享板块中原有的文章,会视情况全部或部分转移到 RIVALSA 网络日志中。

代码块的样式

之前一直想给代码块增加一点样式,最好像在 vscode 中显示的那样,不同的关键词展示不同的颜色。但配置这个样式实在是太复杂了,一直没有着手去做,但最近,我发现了一个现成的样式:prism

prism 非常好用,可以根据需要随意组合语言、样式、插件。在使用时只需要将下载的 CSS 文件添加到 head 标签中,将下载的 JS 文件添加到 body 标签的最后即可,最后在按照文档的要求书写代码即可。prism 会帮助你给代码块添加样式,如果你也需要用到代码块,也可以尝试一下。

如果你想了解更多内容,可以到 prism 官网看看。

结束语

最近的天气太可恶了,早晚冷,中午热,几乎没有一件衣服能穿一整天。

(正文完)

版权信息

本作品著作权归属 Rivalsa 所有,除非 Rivalsa 明确许可您使用,否则任何个人或组织不得以任何方式直接或间接的复制、伪造、转载、摘编、翻印、改编、演出或以其他方式使用本作品。

已获得1个赞0个差评

4条评论

头像

匿名 - 2021-09-26 07:48:34  举报评论  回复评论

map标签和area标签是我第一次接触的,不过这些标签只能配合img标签使用么?

头像

林林 - 2021-09-23 16:47:34  举报评论  回复评论

从虫洞来访,感谢相遇。

头像

林林 - 2021-09-21 10:02:58  举报评论  回复评论

你要建立你自己的知识库了。

头像

Rivalsa 博主 - 2021-09-21 22:17:20  举报评论

可不是咋地,原来我有一个知识分享板块,但感觉内容太散碎了。所以现在有个想法,写一个完整的教程(虽然可能需要非常长的时间)。
让我尝试一下,不知道最后会成功还是会放弃。

发表评论(取消回复)