<img>
标签定义及使用说明:
<img>
标签定义 HTML 页面中的图像。<img>
标签有两个必需的属性:src 和 alt。- 注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。
<img>
标签的作用是为被引用的图像创建占位符。
属性
- align:
- 属性规定了图像相对于周围元素的对齐方式。
- 元素是内联元素(不会在页面上插入新行),这意味着文本和其他元素可以围绕在其周围。所以,align 属性可以帮助我们规定图像相对于周围元素的对齐方式。
- 语法:
<img align="left|right|middle|top|bottom">
- 属性值:
- left:把图像对齐到左边。
- right:把图像对齐到右边
- middle:把图像与中央对齐。
- top:把图像与顶部对齐
- bottom:把图像与底部对齐。
- HTML5 不支持。HTML 4.01 已废弃 。
- alt:
- alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。
- 假设由于一些原因(比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器)用户无法查看图像,alt 属性可以为图像提供替代的信息。
- 如果需要为图像创建工具提示,请使用 title 属性!
- 语法:
<img alt="text">
- 属性值:
- text:规定图像的替代文本。
- alt 文本的使用原则:
- 如果图像包含信息,使用 alt 描述图像
- 如果图像在
<a>
元素中,使用 alt 描述目标链接 - 如果图像仅供装饰,请使用 alt=""
- border:
- HTML5 不支持
<img>
border 属性。请使用 CSS 代替。 - 在 HTML 4.01 中,
<img>
的 border属性已废弃。 - border 属性规定图像周围的边框的宽度。
- 注意:默认地,图像是没有边框的(除非图像在
<a>
元素内部)。 - 语法:
<img border="pixels">
- 属性值:
- pixels:边框的宽度,以像素计。
- HTML5 不支持
- crossorigin
- 设置图像的跨域属性。
- 属性值:
- anonymous
- use-credentials
- height
- height 属性规定图像的高度,以像素计。
- 提示:如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。
- 提示:请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。
- 语法:
<img height="pixels">
- 属性值:
- pixels:以像素为单位的高度(比如 height=“100”)。
- hspace
- HTML5 不支持
<img>
hspace 属性。请使用 CSS 代替。 - 在 HTML 4.01 中,
<img>
的 hspace 属性 已废弃。 - hspace 属性规定图像左侧和右侧的空白。
- 语法:
<img hspace="pixels">
- 属性值:
- pixels:图像左侧和右侧的空白,以像素计。
- HTML5 不支持
- ismap
- ismap 属性是一个布尔属性。
- ismap 属性将图像定义为服务器端图像映射(图像映射指的是带有可点击区域的图像)。
- 当点击一个服务器端图像映射时,点击坐标会以 URL 查询字符串的形式发送到服务器。
- 注意:只有当
<img>
元素属于带有有效 href 属性的<a>
元素的后代时,才允许使用 ismap 属性。 - 语法:
<img ismap>
- longdesc
- HTML5 不支持 longdesc 属性。
- longdesc 属性规定包含图像的长描述的页面的 URL。
- 提示:由于浏览器对 longdesc 属性的支持性非常差,没有必要使用该属性。如需为某个图像提供长描述(如果有必要的话),只要简单地创建一个指向描述页面的链接即可(该链接对任何人都是可见的)。
- 语法:
<img longdesc="URL">
- 属性值:
- URL:指向图像描述页面的 URL。
- 可能的值:
- 绝对 URL - 指向另一个网站(比如 longdesc=“http://www.example.com/description.txt”)
- 相对 URL - 指向网站内的一个文件(比如 longdesc=“description.txt”)
- src
- src 标签的 src 属性是必需的。它规定图像的 URL。
- 注意:当一个网页加载时,浏览器从 Web 服务器上获取图像,并把它插入到页面中。因此,确保图像与相关的网页在同一点,否则访问者可能会得到一个损坏的链接图标。如果浏览器找不到图像时,会显示损坏的链接图标。
- 语法:
<img src="URL">
- 属性值:
- URL:图像的 URL。
- 可能的值:
- 绝对 URL - 指向另一个网站(比如 src=“http://www.example.com/image.gif”)
- 相对 URL - 指向网站内的一个文件(比如 src=“image.gif”)
- 可能的值:
- URL:图像的 URL。
- usemap
- usemap 属性将图像定义为客户端图像映射(图像映射指的是带有可点击区域的图像)
- usemap 属性与
<map>
元素的 name 或 id 属性相关联,以建立<img>
与<map>
之间的关系。 - 注意:只有当
<img>
元素不属于<a>
或<button>
元素的后代时,才允许使用 usemap 属性。 - 语法:
<img usemap="#mapname">
- 属性值:
- #mapname:一个 hash 字符 ("#") 加上要使用的
<map>
元素的 name 或 id。
- #mapname:一个 hash 字符 ("#") 加上要使用的
- vspace
- HTML5 不支持
<img>
vspace 属性。请使用 CSS 代替。 - 在 HTML 4.01 中,
<img>
的 vspace 属性 已废弃 - vspace 属性规定图像顶部和底部的空白。
- 语法:
<img vspace="pixels">
- 属性值:
- pixels:图像顶部和底部的空白,以像素计。
- HTML5 不支持
- width
- width 属性规定图像的宽度,以像素计。
- 语法:
<img width="pixels">
- 属性值:
- pixels:以像素为单位的宽度(比如 width=“100”)
- 支持全局属性(详见面试题目收集-2.全局属性)
<img>
的 title 和 alt 属性的区别
什么是alt属性?
- alt属性,是的特有属性,是图片内容的等价描述,用于图片无法加载时显示或读屏器阅读图片(帮助盲人了解图片内容)。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
- 作用是当无法显示文档中的图片是,可以为浏览者提供文字说明,是用来替代图片的,而不是提供额外说明文字的
什么是title属性?
- title属性是global attribute之一,作用是提供建议性的信息,通常是鼠标滑动到元素上是显示。
- title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。
- title属性可以为链接添加描述性文字,来更加清楚的表达链接的目的。
两者的区别?
- 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外说明信息的。相反地,title属性才应该用来为元素提供额外说明信息。