8-html-图像

HTML 图像

在 HTML 中，图像由<img> 标签定义。

<img>是空标签，只包含属性，并且没有闭合标签。

src 属性

要在页面上显示图像，需要使用源属性（src）—— “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。

---

alt属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值由用户定义。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像

设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="***.jpg" alt="mistake" width="304" height="228">

另外，如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

图片边框

使用 border 属性，如：

<img  border="10" src="***.jpg" alt="HTML 学习" >

使图像具有链接的功能

将 <img> 标签置于 <a></a> 之内，如：

<a href="https://www.baidu.com/">
	<img border="10" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度首页" width="32" height="32">
</a>

图像映射

图像映射指带有可点击区域的一幅图像。使用<map> 标签可在图片内部定义可点区域。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,46" 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>

说明：

• <img> 的 usemap 属性要与 <map>的 name 属性值一致
• shape表示定义可点区域的形状，coords表示可点范围，如果shape="rec"(矩形)，则coords要指明左上角和右下角坐标位置； 如果 shape="circle" ，则需要指明圆心和半径。