走进HTML5入门到精通:<img>标签

来源:本网整理

【转载请保留风信网文章内容的完整性,如果您不能遵守此原则,我们将保留追究法律责任的权利】

<img> 标签

定义和用法

<img> 标签定义图像。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中,图像的 "align", "border", "hspace" 以及 "vspace" 不赞成使用。在 HTML 5 中,不再支持这些属性。

例子

<img src="smile.gif" alt="smile" />

属性

属性 描述 4 5
alt text 定义有关图形的短的描述。 4 5
src URL 要显示的图像的 URL。 4 5
align top bottom middle left right 规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。 4  
border pixels 定义图像周围的边框。不支持。请使用 CSS 代替。 4  
height pixels % 定义图像的高度。 4 5
hspace pixels 定义图像左侧和右侧的空白。不支持。请使用 CSS 代替。 4  
ismap URL 把图像定义为服务器端的图像映射。 4 5
longdesc URL 一个 URL,指向了描述该图像的文档。不支持。 4  
usemap URL 定义作为客户端图像映射的一幅图像。请参阅 <map> 和<area> 标签,了解其工作原理。 4 5
vspace pixels 定义图像顶部和底部的空白。不支持。请使用 CSS 代替。 4 5
width pixels % 设置图像的宽度。 4 5

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title如需完整的描述,请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload如需完整的描述,请访问 HTML 5 中事件属性。

TIY 实例

插入图像,本例演示如何在网页中显示图像。(略)

从不同的位置插入图片(略)

本例演示如何将其他文件夹或服务器的图片显示到网页中。

浮动图像,本例演示如何使图片浮动至段落的左边或右边。

<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>

调整图像尺寸,本例演示如何将图片调整到不同的尺寸。

<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。</p>
</body>
</html>

制作图像链接,本例演示如何将图像作为一个链接使用。

<html>
<body>
<p>
您也可以把图像作为链接来使用:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>

创建图像地图,本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<html>
<body>
<p>风信网(www.ithov.com)请点击图像上的星球,把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所
以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>

  • 本文相关:
  • 走进HTML5入门到精通:<input>标签
  • 走进HTML5入门到精通:<ins>标签
  • 走进HTML5入门到精通:<keygen>标签
  • 走进HTML5入门到精通:<em><strong><dfn><code><samp><kbd><var&g
  • 微软释出了一个新东西--TypeScript
  • 甲骨文将推出Java EE 7版本扩展对HTML 5的支持
  • 走进HTML5入门到精通:<label>标签
  • 走进HTML5入门到精通:<legend>标签
  • 走进HTML5入门到精通:<li>标签
  • 走进HTML5入门到精通:<link>标签
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved