HTML的图像标签、路径的介绍

*图像标签  *****

---

        *<img src="图片的路径"/>

              -src：图片的路径

              -width：图片的宽度

             -height：图片的高度

             -alt ：图片显示的文字，把鼠标移动到图片上，停留片刻显示内容

                   **有些浏览器不显示（没有效果）；

             -border：设置图片边框(px);

            - align:设置图片对齐方式（水平/垂直两个方向）;  

             -hspase/vspase:设置图片的间距设置(单位不加px)；

设置图像对齐方式及间距

基本语法：    

<img src=" URL " align="value">    

<img src="URL" hspace="水平间距数值" vspace="垂直间距数值">

取值	说明
top	图像的顶端和当前行的文字顶端对齐，当前行高度相应扩大
middle	图像水平中线和当前行的文字中线对齐，当前行高度相应扩大
bottom	图像的底端和当前行的文字底端对齐，当前行高度相应扩大
left	图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化
center	图像中线和当前行的文字中线对齐，当前行高度相应扩大
right	图像右对齐，浮动游离于文字之外，文字环绕图像周围，文字行高度没有任何变化

 

设置图像热区链接

基本语法      

<img src="图片地址" usemap="#映射图片名称">    

 <map name="映射图片名称">            

      <area  shape="热区形状" coords="热区坐标" href="URL">    

 </map>

其中： shape:rect(矩形)、 circle (圆形)、 poly (多边形) ；

            coords与shape对应的坐标值：

            rect： x1,y1,x2,y2 (4 个值);

            circle ： center-x、center-y、radius(3个值)

            poly ：（ x1,y1,x2,y2 ,…,xi,yi,…,xn,yn,x1,y1）(（n+1）*2个值，多边形的顶点数)。

---

*路经的介绍

---

          *分类：两类

              **绝对路径：

                     -c:\Users\amid\Desktop\HTML\html.html

                     -https://www.hao123.com

             **相对路径：

                    -一个文件相对于另外一个文件的位置

                   -三种：

                       **html文件和图片在同一个路径下，直接写文件名称

                             <img src="a.jpg"/>

                       **图片在html的下层目录

                              html文件路径：c:\Users\amid\Desktop\html.html

                              图片路径       ：c:\Users\amid\Desktop\AAA\a.png

                               ***在html中使用图片 （html.html和AAA在一个路径）

                                      <img src="AAA\a.png"/>

                         **图片在html文件上的上层目录             

                              html文件路径：c:\Users\amid\Desktop\HTML\html.html

                              图片路径       ：c:\Users\amid\Desktop\a.png

                               ***用 ../ 返回上级目录和图片所在的路径相同

                               <img src="../a.png"/>

                         **图片在html文件上的上上层

                              ***用  ../../  表示

                               <img src="../../a.png"/>