图像与多媒体

一、复习

1、超链接的目标有哪几种？

2、路径的分类

3、操作提问：相对路径中不同文件夹直接的访问操作

二、图片

          HTML网页上插入图片的方法就是使用<img>元素。它的众多属性可以控制图片的路径、尺寸和替换文字等各种功能。

• 基本语法

                  <img   属性=”属性值”>

                  <img src=”图片地址”>

• 语法说明

               img元素属于“空元素”，它只有起始标记没有结尾标记，所有图片样式都由<img>的属性决定。  

• 语法说明

                img标记的作用就是插入图片，该标记含有多个属性，其中src属性为必要属性；

                src属性用来指定图片文件所在的路径，这个路径可以是相对路径，也可以是绝对路径。 

1、设置图片的高度和宽度

• 基本语法

                   <imgsrc=”图片地址”width=”value”height=”value”>

• 语法说明

             图片高度和宽度的单位可以是像素，也可以是百分比；如果在使用的宽度和高度属性中，只设置了宽度和高度中的一个属性，那么另一个属性会按原始图片宽高等比例显示。但是如果两个属性没有按原始大小的缩放比例设置，图片很可能变形。

2、设置图片的边框

•  基本语法

                   <imgsrc=”图片地址”border=”value”>

• 语法说明

                      value为边框线的宽度，用数字表示，单位为像素。 

3、设置图片对齐方式

• 图片和文字之间的对齐方式通过img标记中的align属性来设置。图片的绝对对齐方式和文字的对齐方式一样，有居左、居右和居中；而相对文字的对齐方式则是指图片与同行文字的相对位置。
• 基本语法：

               <imgsrc=”图片地址”align=”value”>

4、设置图片的间距

• 基本语法

                  <imgsrc=”图片地址”hspace=”水平间距”>

                  <img src=”图片地址”vspace=”垂直间距”>

• 语法说明

                  Hspace调整图片左右两边的空白距离，vspace调整的是图片上下两边的空白距离。 

5、设置图片链接

       图片的超链接和文字的超链接基本相同，都是通过标记<a>来实现的。

• 基本语法

                 <ahref=”URL” ><img src=”图片地址”></a>

• 语法说明

                       href属性是用来设置图片的连接地址URL。 

6、热区设置

 <img src=”” usemap=”#id” />

     <map name=”id”>

         <area  shape=”rect” coords=”坐标” href=”url”>

   </map>

其中shpape可以选择，根据不同的图像设置坐标