首页 > Web开发 > 详细

HTML图像<img>

时间:2015-10-13 15:03:58      阅读:2808      评论:0      收藏:0      [点我收藏+]

使用举例

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

属性

  • src:指 "source"。源属性的值是图像的 URL 地址。
  • alt:用来为图像定义一串预备的可替换的文本。
  • width:固定宽度设置
  • height:固定高度设置  
  • usemap:用于引用图片映射设置(见设置图片映射)  
  • align:对齐方式(top, middle, bottom)需要注意的是该属性只在html4中有效,在html5中不被支持;如果想在html5中达到相同的效果,请使用CSS
  • float:浮动(left, right)需要注意的是该属性只在html4中有效,在html5中不被支持

实例:

  • 插入图片:
<p>An image:<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>
  • 排列(align)
<h4>Image with default alignment (align="bottom"):</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p>

<h4>Image with align="middle":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p>

<h4>Image with align="top":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>

<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>
  • 设置图片链接
<p>创建图片链接:
<a href="http://www.w3cschool.cc/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32">
</
a>
</
p>
  • 设置图片映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
    注:<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
    <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

HTML图像<img>

原文:http://www.cnblogs.com/zhiupping8/p/4874518.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!