尚学堂-图片标签学习

最新推荐文章于 2020-11-23 12:07:19 发布

奔跑的小脑斧

最新推荐文章于 2020-11-23 12:07:19 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： html学习

本文链接：https://blog.youkuaiyun.com/abc1234z0/article/details/103074735

html学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中的图片标签(img)的使用方法，包括src属性用于指定图片路径，width和height属性用于调整图片尺寸，title属性用于定义图片标题，以及alt属性在图片无法显示时的替代文本。文章通过实例展示了如何使用本地和网络资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
 <head>
  <title>图片标签学习</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <h3>图片标签学习</h3>
  <hr />
  <!--使用本地资源：图片位于本地电脑中-->
  <img src="img/1.jpg" width="200px" height="300px"/>
  <img src="img/2.jpg" height="200px"/>
  <img src="img/3.gif" height="200px" title="这是一个风景图片" alt="这是一个优美的图片"/>
  <hr />
  <!--使用网络资源：scr-->
  <img src="http://www.fpwap.com/news/yxzn/95069.html"/>
 </body>
</html>
<!--
 图片标签：img
            src:图片路径
                                       本地资源路径：一般本地图片资源使用相对路径即可
                                       网络资源路径:图片资源的URL地址                      
                width:设置图片的宽度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大
                                                         单位可以是px也可以是百分比
                height:设置图片的高度，如果是单独设置，则在图片保证不失真的情况下自动缩小或者放大
                                                           单位可以是px也可以是百分比
                           title ：图片标题，鼠标放在图片上的时候会显示
                           alt:图片加载失败后的提示语
                                               注意：图片是不会自动换行的（行内元素）
       注意：
                   相对路径：从当前文件出发查找另外一个文件所经过的路径
                   绝对路径:从根盘符出发所查找文件的路径
-->

运行结果：
在这里插入图片描述