HTML-图像-CSDN博客

本文链接：https://blog.csdn.net/grace666/article/details/52264157

1.在HTML中，图像由<img>标签定义，并且是空标签

2.想要在网页上显示图片，需要用到源（src）属性

3.若浏览器无法载入图像，需要用文本替换显示，用的是替换文本（alt）属性

4.img元素的属性：

（1）src：图片来源URL；
（2）alt：辅助效果，见上；
（3）align：有right、left、top、bottom等；
（4）height和width：图片的高度和宽度，单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小；
（5）hspace和vspace：图像和周围文字的空白间隙大小；

例如 :

<span style="font-family:Microsoft YaHei;"> <img src = "g1.gif" alt = "redhat os" align = "left" width = "150" height = "150" hspace = "4" vspace = "4"></span>

注：如果要把一个图片设置成很小，则建议新建一个很小的图片

5.图像映射：指一个图片的不同区域，对应不同的链接

（1）一般分为：服务器端（将点击的坐标发送给服务端，由服务端程序来决定）和客户端（根据点击的不同位置，确定链接的目标）

（2）通过<img>后添加<map>和<area>来设置

（3）<map>元素表明映射的开始，只有一个name属性
         <area>元素表明区域，如果要把一个图片分4个区域，则用4个area
          shape：必须的属性，用于描述区域的形状，rectangle\poly\circle\default可选,default指的是还没有被定义的区域。
          coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。
          href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"
          target：和<a>一样

         注：
        1）在<img>中设置usemap属性
        2）在<map>中设置name属性

4.示例如下：

（1）背景图片：

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">

<body background="D:\download\20168521425014120.gif">

<p>
    一幅动态图：
    <img src="D:\download\2016842254464307.gif" width="128" height="128" alt="Big Boat">
</p>

</body>

</html></span>

展示效果：

（2）排列图片：

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">

<p>
    动态图1：
    <img src="D:\download\2016842254464307.gif" align="bottom">
</p>

<p>
    动态图2：
    <img src="D:\download\2016842254464307.gif" align="middle">
</p>

<p>
    动态图3：
    <img src="D:\download\2016842254464307.gif" align="top">
</p>

</body>
</html></span>

展示效果：

（3）浮动图片：

<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">

<p>
    1.一个段落中，带有图片，将其浮动在左侧
    <img src="D:\download\2016842254464307.gif" align="left">
</p>

<p>
    2.一个段落中，带有图片，将其浮动在右侧
    <img src="D:\download\2016842254464307.gif" align="right">
</p>

</body>
</html></span>

展示效果：

（4）调整图片尺寸：

<span style="font-family:Microsoft YaHei;"><html>
<meta charset="utf-8">

<body style="background-color:green;color:white">

<p>
    同一幅图片的不同尺寸展示（50 * 50）
    <img src="D:\download\2016842254464307.gif" width="50" height="50">
</p>
<p>
    同一幅图片的不同尺寸展示（100 * 100）
    <img src="D:\download\2016842254464307.gif" width="100" height="100">
</p>
<p>
    同一幅图片的不同尺寸展示（200 * 200）
    <img src="D:\download\2016842254464307.gif" width="200" height="200">
</p>

</body>
</html></span>

展示效果：

（5）为图片显示替换文本：

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
    当浏览器无法显示图片，or当鼠标移动图像上，会显示的文本内容：
    <br/>
    <img src="D:\download\2016842254464307.gif" alt="请稍等...">
</p>

</body>
</html></span>

展示效果：

（6）制作带链接的图片：

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>
    制作有链接的图片：
    <br/>
    <a href="http://www.baidu.com">
    <img src="D:\download\2016842254464307.gif">
    </a>
</p>

</body>
</html></span>

展示效果：

（7）创建图片映射：

<span style="font-family:Microsoft YaHei;"><pre name="code" class="html"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">
请分别点击图中间的左上角和右下角，有不同的效果哦！
<br/>
<img src="D:\download\2016842254464307.gif" border="0" usemap="#mymap" alt="请稍候...">

<map id="mymap" name="mymap">
    <area shape="rect" coords="0,0,104,104" href="D:\download\2016842384792555.gif" target="_blank" alt="111">
    <area shape="rect" coords="106,106,140,140" href="D:\download\2016852110124950.gif" target="_blank" alt="222">
</map>

</body>
</html></span>

展示效果：

（8）把图像转为图像映射

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">
<body style="background-color:green;color:white">
<p>请把鼠标移到图片上，有surprise哦！<p/>
<a href="D:\Learning\Coding\Html\test_tag.html">
    <img src="D:\download\testimg1.gif" ismap>
</a>

</body>
</html</span>

展示效果：