demo07.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签
属性:
src:设置一个外部图片的路径
alt:可以用来设置在图片不能显示时,对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性,则搜索引擎不会对img中的图片进行收录
width:可以用来修改图片的宽度,一般使用px作为单位
height :可以用来修改图片的高度,一般使用px(像素)作为单位
宽度和高度两个属性如果指设置一个,另一个也会同时等比例调整大小
如果两个值同时指定则按照你指定的值来设置
一般开发中除了自适应的页面,不建议设置width和height
-->
<img src="1.gif" alt="这是一个大松鼠" width="500px" height="500px" />
</body>
</html>
demo08.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<!--
src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径。
相对路径:
相对路径指相对于当前资源所在目录的位置
<img src="abc/bcd/1.gif" alt="这是一个大松鼠"/>
可以使用../来返回一级目录,返回几级目录就写几个../
<img src="../../img/1.gif" alt="这是一个大松鼠"/>
-->
<img src="../img/1.gif" alt="这是一个大松鼠"/>
<!--
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多,并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用小的
-->
</body>
</html>