*图像标签 *****
*<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"/>