HTML与CSS入门——第十一章  在网页中使用图像

知识点：

　　1.在网页上放置图像的方法

　　2.用文本描述图像的方法

　　3.指定图像高度和宽度的方法

　　4.对齐图像的方法

　　5.将图像转换为俩接的方法

　　6.使用背景图像的方法

　　7.使用图像映射的方法

11.1 在网页上放置图像：

　　img标签，属性有src和alt，

　　　　src：图片地址

　　　　alt：在图片不能显示时，提示信息

　　　　另外title属性也支持，用于提供图像描述。

11.2 用文本描述图像：

　　指的是alt属性。

11.3 指定图像高度和宽度：

　　即width和height

11.4 对齐图像：

　　可以用float来浮动图像，显示多图片的时候效果非常好。

　　其他的就是text-align以及vertical-align

11.5 将图像变为链接：

　　用a标签包含即可

11.6 使用背景图像：

　　background-：color,image,repeat,position……

　　其中repeat：图像重复的方式，水平，垂直，全部或仅出现一次。

　　postition:八方->top-left,top-center,top-right……

　　background:#fff url('img.gif') no-repeat top right;

　　PS:position是指定图像开始相对于其容器的位置！

11.7 使用图像映射：

　　这里的映射其实是现在说的图片热点。

　　创建热点区域需要几个部分信息：坐标，目标URL，链接标题、链接替换文本

    <img src="data:images/bg.png" usemap="#mymap">
    <map name="mymap">
        <area shape="rect" coords="0,0,100,100"
                href="http://www.baidu.com"
                alt="百度"
                title="百度" />

    </map>

　　img的usemap需要和map的name相对应。

　　shape：确定热点区域的形状

　　coords：给出区域的像素坐标。

　　　　对于矩形——左上角坐标+右下角坐标（x,y,x,y）

　　　　对于圆形——圆心坐标和半径

　　　　对于多边形——给出所有顶点的坐标。

　　href:链接的地方

　　alt:提示信息

　　PS：对于重叠的地方优先级是"先到先得"。

　　技巧性：可以用这个特点设置热点中的死区…… 或者环形热点等复杂的热点效果。