当前阅读教程: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 中不支持以下属性:align、border、hspace、longdesc、vspace。 在 HTML 4.01 中,以下属性:align、border、hspace、vspace 已废弃。 HTML 与 XHTML 之间的差异在 HTML 中,<img> 标签没有结束标签。 在 XHTML 中,<img> 标签必须被正确地关闭。 属性列表New表示HTML5 中的新属性。
全局属性<img> 标签支持 HTML 的全局属性。 事件属性<img> 标签支持 HTML 的事件属性。 alt 与 title 属性区别图片中的 alt 属性是在图片不能正常显示时出现的文本提示。 图片中的 title 属性是在鼠标在移动到元素上的文本提示 alt 属性的特点n alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括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属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。 n title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。 n title属性值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字(比如工具提示或其他)。比如Mozilla核心的浏览器只能显示最先的60个字符。 下面我们来看下在网页中的效果,示例 代码如下: <!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。 |
||||||||||||||||||||||||||||||||||||||||
上一篇: 2.9 HTML 图像标签 | 下一篇: 2.9.2 HTML <map> 标签 |