HTML 图像

创建时间:2019.05.27 修改时间:2019.06.09
<img src="images/birdman.jpg" alt="Bird Man" width="300" height="360">
Bird Man

<img> 元素属性

图片文字排版

1.<img> 为内联元素,与文字混排时嵌入文字当中。

<p> 插画欣赏 <img src="images/birdman.jpg" alt="Bird Man" width="300" height="360">——鸟人 </p>

插画欣赏 Bird Man——鸟人

2. 图片局左,文字环绕。

<p><img src="images/birdman.jpg" alt="Bird Man" style="float:left" width="300" height="360"> 插画欣赏 <br />——鸟人 </p>

Bird Man 插画欣赏
——鸟人

3. 图片局右,文字环绕。

<p><img src="images/birdman.jpg" alt="Bird Man" style="float:right" width="300" height="360"><span style="float:right"> 插画欣赏 <br />——鸟人 </span></p>

Bird Man 插画欣赏
——鸟人

设置图片链接

<a href="images/birdman.jpg"><img src="images/birdman.jpg" alt="Bird Man" width="300" height="360"></a>
Bird Man

设置图片局部链接

<img src="images/birdman.jpg" alt="Bird Man" width="300" height="360" usemap="#planetmap">

<map name="planetmap">
   <area shape="circle" coords="150,150,100" alt="Venus" href="images/birdman.jpg">
</map>

点击鸟头:

Bird Man Venus
<area shape="rect" coords="x1,y1,x2,y2" href="url">
<area shape="circle" coords="x1,y1,r" href="url">
<area shape="poly" coords="x1,y1,x2,y2 ......" href="url">