<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签
属性:
src:设置一个外部图片路径
alt:设置图片不能显示对应的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性浏览器不会对img图片进行收录
width:用来修改图片的宽度,一般用px作为单位
height:用来修改图片的高度,一般用px作为单位
width和heigh如果只设置一个,另一个也会同等比例调整大小
-->
<!--- src属性配置的是图片的路径,目前我们使用的路径全是相对路径
相对路径:
相对路径指的是相对于当前资源所在目录的位置
<img src="../../img/2.gif" alt="这是一个大松树" />
可以使用../来返回上一级目录,返回几个目录就写几个../
<img src="../../img/2.gif" alt="这是一个大松树" />
-->
<img src="03.jpg" alt="beautful girl" />
<img src="01.jpg" alt="一对情侣" width="500px" height="100px" />
<img src="a/02.jpg" alt="打伞">
<!--
图片的格式
JPEG(JPG)
-JPEG图片支持的颜色比较多,图片可以压缩但是不支持透明
-一般用来保存颜色丰富的图片
GIF
-GIF支持的图片比较少,支持简单的透明,支持动态图
-颜色单一,或动态图用GIF
PNG
-PNG支持的颜色多,并且支持复杂的透明
-一般用于颜色复杂的透明的图片
图片使用的规则
效果不一致用效果好的
效果一致使用小的
-->
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签
属性:
src:设置一个外部图片路径
alt:设置图片不能显示对应的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性浏览器不会对img图片进行收录
width:用来修改图片的宽度,一般用px作为单位
height:用来修改图片的高度,一般用px作为单位
width和heigh如果只设置一个,另一个也会同等比例调整大小
-->
<!--- src属性配置的是图片的路径,目前我们使用的路径全是相对路径
相对路径:
相对路径指的是相对于当前资源所在目录的位置
<img src="../../img/2.gif" alt="这是一个大松树" />
可以使用../来返回上一级目录,返回几个目录就写几个../
<img src="../../img/2.gif" alt="这是一个大松树" />
-->
<img src="03.jpg" alt="beautful girl" />
<img src="01.jpg" alt="一对情侣" width="500px" height="100px" />
<img src="a/02.jpg" alt="打伞">
<!--
图片的格式
JPEG(JPG)
-JPEG图片支持的颜色比较多,图片可以压缩但是不支持透明
-一般用来保存颜色丰富的图片
GIF
-GIF支持的图片比较少,支持简单的透明,支持动态图
-颜色单一,或动态图用GIF
PNG
-PNG支持的颜色多,并且支持复杂的透明
-一般用于颜色复杂的透明的图片
图片使用的规则
效果不一致用效果好的
效果一致使用小的
-->
</body>
</html>