1.图片属性简介



　　JPEG可以展示一张照片或者复杂图像

　　　●可以表示多达1600万种颜色，就是所有的十六进制颜色。

　　　●不支持图像透明

　　　●不支持动画


　　PNG最适合展示网页插画、logo和网页小图标

　　　●表示上百万种颜色

　　　●包括PNG-8、PNG-24、PNG-32

　　　●可以设置颜色透明

　　　●不支持动画


　　GIF最适合展示网页插画、logo和网页小图标

　　　●表示256种颜色

　　　●可以设置颜色透明

　　　●支持动画


　　

　　总结使用规律：

　　　●复杂颜色的图像和照片选用JPEG格式

　　　●动态图像选用GIF格式

　　　●透明图片选用PNG格式



2.html中的用法

wKiom1jGOtCCMserAAHLluvsJ_k831.jpg


2.1.基本用法

　　<img>元素用来向网页中嵌入一幅图像。其两个必要的属性：src、alt。可选属性：align、height、width、hspace、vspace、title。当图片显示异常时，显示的内容由alt定义；鼠标放到图片上显示的信息由title指定。


2.1.1.做页面背景

　　作为HTML网页背景

<body background="/p_w_picpath/yueji.jpg">


2.1.2.作为内容图片插入

　　插入本地图片，在网页中显示

<img src="/p_w_picpath/yueji.jpg" width="108" />


　　插入网络上的图片（例如上边的月季），公司多个站点共用一个通用的图片（logo）

<img src="https://s4.51cto.com/wyfs02/M00/8E/96/wKiom1jGOtCCMserAAHLluvsJ_k831.jpg" />


2.1.3.处理显示样式

　　在文字中排列图像，处理嵌入的“展示图片”与“段落”的位置关系（底端对齐、上下居中对齐、顶端对齐）

<p><img src="/iamge/marbletofu.gif" align="bottom">麻婆豆腐</p>
<p><img src ="/p_w_picpath/spicypotato.gif" align="middle">香辣土豆丝</p>
<p><img src ="/p_w_picpath/tomatoegg.gif" align="top">西红柿炒蛋</p>


　　把图片浮动到文字的两侧，并且调整图片为适当的尺寸：

<p><img width=50px src ="1148825204376_mthumb.JPG" align ="left">月季花</p>
<p><img width=50px src ="1148825204376_mthumb.JPG" align ="right">月季花</p>


　　为图片设定替换文本，当图片由于某些原因无法显示时，以“文本信息”占位。

<img src="/p_w_picpath/33267.jpg" alt="月季花开" />


2.1.4.作为图标链接使用

　　创建一个图片链接，点击显示着“Download”的图片跳转到下载页面

<p>VIP用户高速下载<a href="/blog/linux/download.html"><img border="0" src="/p_w_picpath/download.gif" /></a></p>



2.2.图像映射

　　创建带有可供点击区域的图像地图（xxx.jpg），不同地图引导转到某个特定目标。

    <img src="xxx.jpg" border="0" usemap="#MapName" alt="#picture_name" />
    <map name="MapName" id="MapName">
        <area shape="#" coords="#" href="" alt="" target="" />
        <area  .../>
        ...
    </map>

　　<area>元素永远嵌套在map元素内部，定义图像中映射区域。<img>中的usemap属性引用<map>中的id、或name属性（取决于浏览器）。其中必须的属性是“alt”。


2.2.1.<map>标签的shape属性

　　<area>标签定义图像中映射范围。属性shape（取值：circ|circle、poly|polygon、rect|rectangle）代表“区域的形状”（表示：圆形、多边形、矩形），默认是“全部区域”。


2.2.2.<map>标签的coords属性

　　<area>的coords属性代表“敏感区域的坐标”，取值有三种格式。为“矩形”时，“x1,y1,x2,y2”表示左上角、右下角的坐标。为“圆形”时，“x,y,radius”确定了圆心的坐标、半径。为“多边形”时，“x1,y1,x2,y2,..,xn,yn”很明显是表示每个点的坐标，第一个点与最后一个点一致时，图形闭合。


2.2.3.<map>标签的其他属性

　　属性href指向其值URL表示的目标，属性alt定义区域的替换文本，属性target规定了在何处打开href属性指向的目标URL。


图像映射举例：

　　以上边插头的月季花为图片，实现在页面花瓣构成的圆形处生成链接到博客的页面

<img src="flower.JPG" border="0" usemap="#petal" alt="flower" />
<map name="petal" id="petal">
    <area shape="circle" coords="424,272,180" href ="http://sunnybay.blog.51cto.com/2249903/1374352" target ="_blank" alt="flower's petal" />
</map>



wKiom1cl4NejNyGvAABm6P93Pb8181.jpg