<html> <head> <title>图片标签学习</title> <meta charset="UTF-8"/> </head> <body> <h3>图片标签学习:</h3> <pre> 图片标签: img src:图片路径 本地资源路径:一般本地图片资源使用相对路径即可 网络资源路径:图片资源的URL地址 width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比 height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比 title:图片标题,鼠标放在图片上的时候会显示 alt:图片加载失败后的提示语 注意:图片是不会自动换行的(行内元素) 注意 相对路径:从当前文件出发查找另一个文件所经过的路径 绝对路径:从根盘符出发所查找文件的路径 </pre> <hr /> <!--使用本地资源:图片位于本地电脑中--> <img src="img/1.jpg" height="200px"/> <img src="img/2.jpg" height="200px"/> <img src="img2/2.jpg" height="200px" title="这是一个优美的图片" alt="这是一个优美的图片"/> <hr /> <!--使用网络资源:--> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519380344339&di=69b19d78492d7c4bbce2844b815578ce&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201506%2F10%2F20150610220630_Mtz4L.jpeg" width="200px"/> </body> </html> <!-- 图片标签: img src:图片路径 本地资源路径:一般本地图片资源使用相对路径即可 网络资源路径:图片资源的URL地址 width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比 height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比 title:图片标题,鼠标放在图片上的时候会显示 alt:图片加载失败后的提示语 注意:图片是不会自动换行的(行内元素) 注意 相对路径:从当前文件出发查找另一个文件所经过的路径 绝对路径:从根盘符出发所查找文件的路径 -->