资讯专栏INFORMATION COLUMN

HTML img标签的width height ismap usemap title alt 属性

channg / 2200人阅读

摘要:前言元素向网页中嵌入一幅图像今天特地对的几个属性做了一下测试,在这里做一个笔记。元素的属性和属性。同时设置和时,图片会缩放到刚好等于设置的宽度和高度,图片中的内容会完整显示,图片可能变形没有按比例缩放的时候。标签定义图像映射中的区域。

前言

img 元素向网页中嵌入一幅图像

今天特地对 img 的几个属性做了一下测试,在这里做一个笔记。

1. img 元素的width属性和height属性。

(1)不设置 width 和 和 height 时,图片在浏览器中显示大小等于原图。
(2)只设置 width 或 height 时,图片会通过按比例缩放来决定没有设置的 width 或 height 的值。
(3)同时设置 width 和 height 时,图片会缩放到刚好等于设置的宽度和高度,图片中的内容会完整显示,图片可能变形(没有按比例缩放的时候)。

2. img 元素的title属性和alt属性

(1)图片正常显示的时候,鼠标停留在图片上可以看到 title 的内容。
(2)图片没有显示出来的时候,alt 的内容会显示在本来应该显示图片的位置,鼠标停留在图片上可以看到 title 的内容。

3. img 元素的ismap属性

(1)设置了 ismap 属性之后,当用户在 ismap 图像上单击时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。
(2)只有当

因为在代码中将链接地址设置为图片地址,所以单击 chrome opera firefox earth

在以上代码中:

(1)用于定义一个客户端图像映射,中的usemap属性可引用 中的 idname 属性(取决于浏览器),所以我们应同时向 添加 idname 属性。
(2) 标签定义图像映射中的区域。【图像映射】指带有可点击区域的图像)。area 元素总是嵌套在 标签中。

后语

在线DEMO https://hgy9473.github.io/myl...

参考资料:w3school http://www.w3school.com.cn/tags/tag_img.asp

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50982.html

相关文章

  • html&css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    maochunguang 评论0 收藏0
  • html&css面试笔记

    摘要:什么叫优雅降级和渐进增强渐进增强针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果交互等改进和追加功能达到更好的用户体验。优雅降级一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 1、CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 ...

    zhangwang 评论0 收藏0
  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。是块级元素,是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    fai1017 评论0 收藏0
  • HTML & CSS之小白初入江湖

    摘要:之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。是块级元素,是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    crossoverJie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<