当前位置:首页>HTML>HTML标签>HTML <img> 标签

HTML <img> 标签

作者:微学网发布时间:2019-08-30 19:38:04

示例

如何插入图片:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

定义和用法

<img>标签定义HTML页面中的图像。

<img>标签有两个必需的属性:src和alt。

注意:图像在技术上不会插入HTML页面,图像会链接到HTML页面。<img>标签为引用的图像创建一个保留空间。

提示:要将图像链接到另一个文档,只需将<img>标签嵌套在<a>标签内。

浏览器支持

Chrome Firefox IE Safari Opera
Google Chrome Firefox Internet Explorer Safari Opera

HTML 4.01和HTML5之间的差异

HTML5中不支持以下属性:align,border,hspace和vspace。

HTML和XHTML之间的差异

在HTML中,<img>标签没有结束标签。

在XHTML中,必须正确关闭<img>标签。

属性

html5= HTML5中的新功能。

属性 描述
align left
right
top
middle
bottom
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossoriginhtml5 anonymous
use-credentials
设置图像的跨域属性
height pixels 规定图像的高度。
hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。

全局属性

<img>标签还支持HTML中的全局属性。

事件属性

<img>标签还支持HTML中的事件属性。

亲自尝试 - 示例

插入来自不同位置的图像

如何从其他文件夹或其他网站插入图像。

创建图像的超链接

如何添加图像的超链接。

创建图像映射

如何使用可单击区域创建图像映射。每个区域都是一个超链接。

相关页面

HTML教程:HTML图像

HTML DOM参考:图像对象

CSS教程:样式图像

默认CSS设置

大多数浏览器将使用以下默认值显示<img>元素:

img { 
    display: inline-block;
}

alt 与 title 属性区别

  • 图片中的 alt 属性是在图片不能正常显示时出现的文本提示。

  • 图片中的 title 属性是在鼠标在移动到元素上的文本提示。