HTML图像<img>

使用举例

<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 元素可定义图像映射中的区域。

转载于:https://www.cnblogs.com/zhiupping8/p/4874518.html