当前位置: 首页 > 网络学院 > 网页制作基础教程 > HTML > HTML <img>标签

HTML
HTML 介绍
HTML 元素
HTML 基本标签
HTML 格式
HTML 实体字符
HTML 链接
HTML 框架
HTML 表格
HTML 列表
HTML 表单
HTML 图片
HTML 背景
HTML 颜色
HTML 颜色值
HTML 颜色名
HTML 便条
HTML 布局
HTML 字体
HTML 4.0
HTML 样式

HTML <img>标签


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-04   浏览: 578 ::
收藏到网摘: n/a

定义与用法

The img element defines an image.
为img元素定义图片


在HTML和XHTML中的区别

In HTML the <img> tag has no end tag.
在HTML中<img>标签不需要结束标签

In XHTML the <img> tag must be properly closed.
在XHTML中<img>标签必须合理关闭。

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.
在HTML4.01中img元素属性中的"align", "border", "hspace", 和 "vspace"已不推荐使用

The "align", "border", "hspace", and "vspace" attributes of the image element are not supported in XHTML 1.0 Strict DTD.
在XHTML1.0严密型DTD中对于img元素的"align", "border", "hspace", 和 "vspace"属性不再支持


Mozilla Firefox 浏览器与alt属性

If you use the alt attribute in Firefox on images and image maps the text will not show on mouse-over as in other browsers.
在FF浏览器中img的alt在鼠标移到图片上的时候不会出现文字

Firefox uses the alt attribute the way it's meant to be used, like an alternative text if the image won't load, not as a mouse-over text.
对于FF浏览器来说alt中的文字只在图片加载无效后才会被显示,而不是作为一种鼠标移动动到上面就能出现的文字

Firefox does support mouse-over comments on images or image maps if you use a title attribute in the <img> tag.
如果你想要在FF浏览器中有那种鼠标移动到图片上就能出现文字的效果,那么可用标准属性"title"

比如。 <img src="image.gif" alt="bla" title="bla bla bla" />


实例

代码 输出结果(图片不存在时)
<img src="angry.gif" alt="Angry" /> Angry


必要属性

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
下表中的DTD列指明了被支持的DTD属性。S=Strict(精确的),T=Transitional(传统的),F=Frameset(框架)

属性 描述 DTD
alt text Defines a short description of the image
定义图片的简单描述
STF
src URL The URL of the image to display
所要显示图片的URL
STF

可选属性

属性 描述 DTD
align top
bottom
middle
left
right
Specifies how to align the image according to surrounding text. Deprecated. Use styles instead
指定图片的对齐方式(根据周围的文字)[不推荐]可用样式来替代
TF
border pixels Defines a border around an image. Deprecated. Use styles instead
定义图片的边框[不推荐]可用样式来替代
TF
height pixels
%
Defines the height of an image
定义图片的高度
STF
hspace pixels Defines white space on the left and right side of the image. Deprecated. Use styles instead
定义图片的左右间隙[不推荐]可用样式来替代
TF
ismap URL Defines the image as a server-side image map
定义图片为服务器端的图象热区
STF
longdesc URL  A URL to a document that contains a long description of the image
为图片的描述提供一个URL,目标地址有相关详细文档
STF
usemap URL Defines the image as a client-side image map. Look at the <map> and <area> tags to figure out how it works
定义图片的用户端图象热区,可以参考<map>和<area>标签。
STF
vspace pixels Defines white space on the top and bottom of the image. Deprecated. Use styles instead
定义图片的上下间隙大小[不推荐]可用样式来替代
TF
width pixels
%
Sets the width of  an image
设置图片的宽度
STF

标准属性

id, class, title, style, lang, xml:lang

For a full description, go to Standard Attributes.
查看完整的属性

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

For a full description, go to Event Attributes.
查看完整的属性


尝试与演示

Insert images
How to display images in your Web page.
如何在你的Web页面内显示图片

Insert images from different locations
How to display images from another folder or another server in your Web page.
如何在页面上显示来自其他服务器上的图片

Aligning images
How to align an image within the text.
如何让文字中的图片进行对齐

Let the image float
How to let an image float to the left or right of a paragraph.
如何让图片浮动到段落的左边或是右边

Adjust an image to different sizes
How to adjust an image to different sizes.
将图片设置成不同的大小

Make a hyperlink of an image
How to use an image as a link.
让图片变成连接

Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.
如何建立图象热区,每个可点击的区域都为一个超级连接

评论 (0) All

登陆 | 还没注册?