宗策

导航

图片标签img

图片标签img

src路径:

1.相对路径:当访问站内资源时使用
    a. 图片和页面在同一目录,直接写图片名
    b. 图片在页面的上级目录, ../图片名
    c. 图片在页面的下级目录,
    文件夹名/图片名
2.绝对路径:访问站外资源时使用,以http开头
     访问站外图片也称为图片盗链,
      好处:节省自己网站资源,坏处是可能找不到图片
   - alt:当图片不能正常显示时显示的文本内容
   - title:当鼠标悬停在图片上时显示的文本
   - width/height: 1.像素 2.上级元素的百分比,只设置width高度会等比例缩放
如果只设置宽度 高度会等比例缩放
支持的图片格式:
   jpg和jpeg
   png 支持透明色
   gif 支持动图

3.图像地图 map
    - name 唯一标识
    - 子元素 area: shape(形状:rect、circle) coords(坐标:rect4个值,circle3个值圆心坐标和半径) href(资源路径

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="这是个图片" 
    width="50%" 
    title="图片" src="../imgs/aaa.jpg">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="../imgs/bbb.gif">
</body>
</html>
View Code

 

 

 

posted on 2020-04-15 17:23  宗策  阅读(139)  评论(0编辑  收藏  举报