<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

（1）src 属性 定义图片的引用地址

（2）alt 属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。（图片的文字说明）

<img src=”images/pic.jpg” alt=”产品图片” />

 

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表、javascript等等，引用地址分为绝对地址和相对地址。

 

绝对地址：相对于磁盘的位置去定位文件的地址

相对地址：相对于引用文件本身去定位被引用的文件地址

代码：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网页插入图片</title>
  6. </head>
  7. <body>
  8.     <h1>图片</h1>
  9.  
  10.     <h2>相对路径</h2>
  11.     <!-- 网页和images在同一目录 -->
  12.     <!-- 完整的写法是：./images/我是仙女.jpg  ./ 表示当前目录，可以省略 -->
  13.     <img src="./images/我是仙女.jpg" alt="做个优雅的女人" />
  14.     <img src="images/loading.gif" alt="加载中" />
  15.  
  16. <!-- 网页所在的目录和images 在同一目录 -->
  17. <!-- 图片并没有展示出来 -->
  18.     <img src="../images/哥总是这么迷人.jpg" alt="哥总是这么迷人" />
  19.  
  20. <h2>绝对路径，不建议使用</h2>
  21. <!-- 图片并没有展示出来 -->
  22.     <img src="C:\Users\Ren\Desktop\img\5.jpg" alt="生无可恋" />
  23.  
  24. </body>
  25. </html>

页面显示效果：

 

版权声明：本文为reyinever原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/reyinever/p/10549854.html