位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 2.9.1 HTML 图像 img标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.9 HTML 图像标签 下一篇: 2.9.2 HTML <map> 标签

所有主流浏览器都支持 <img> 标签。

HTML 图像- 图像标签( <img>)和源属性(Src)

HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

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

要在页面上显示图像,你需要使用源属性(src)。src "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

URL 指存储图像的位置。(本地地址或者互联网地址,例:http://www.hzyaoyi.cn/c.png

浏览器将图像显示在文档小白教程网中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

Ø  注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

Ø  提示:通过在 <a> 标签中嵌套 <img> 标签,给图像添加到另一个文档小白教程网的链接。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height(高度) width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示:

注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

HTML 4.01 与 HTML5之间的差异

HTML5 中不支持以下属性:alignborderhspacelongdescvspace

HTML 4.01 中,以下属性:alignborderhspacevspace 已废弃。

HTML 与 XHTML 之间的差异

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

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

属性列表

New表示HTML5 中的新属性。

属性

描述

align

top
  bottom
  middle
  left
  right

HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。

alt

text

规定图像的替代文本。

border

pixels

HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。

crossoriginNew

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 的事件属性。

alt 与 title 属性区别

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

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

alt 属性的特点

n  alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在imgareainput元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。比如:

<input type="image" src="image.gif" alt="Submit" />

n  alt属性保证那些文字确实为那些看不到图像的人提供了说明信息,并且在上下文中有意义。对于那些装饰性的图片可以使用空的值(alt="",引号中间没有空格),而不是使用不相关的替换文字比如 blue bullet”。

n  Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

title 属性的特点

n  title属性为设置该属性的元素提供建议性的信息,即提供非本质的额外信息,大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip),然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。比如早期版本的Safari浏览器。

n  title属性可以用在除了basebasefontheadhtmlmetaparamscripttitle之外的所有标签。但是并不是必须的。

n  title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。

n  title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 图像 img标签</title>
</head>
<body>
     <img src="tupian/cp01.jpg" width="100" height="100px;" alt="提示信息" >
     <img src="http://www.hzyaoyi.cn/c.png" height="100" width="100px;">
</body>
</html>

效果如图2-25

image.png

上一篇: 2.9 HTML 图像标签 下一篇: 2.9.2 HTML <map> 标签
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)