【Eclipse】HTML基础（二）-HTML标签（图片标签、超链接标签）

5.3 图片标签

<img>：图片标签

src路径：

1.相对路径：访问站内资源时使用

资源文件和页面在同一目录：直接写图片名
资源文件在页面的上级目录：../图片名
资源文件在页面的下级目录：文件夹名/图片名

2.绝对路径：访问站外资源时使用，访问其他网站资源称为图片盗链，好处节省本站资源，坏处是可能找不到图片。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>图片标签</title>
 </head>
 <body>
     <!-- 
         src属性表示要显示图片的路径，一般情况下使用相对路径。
         相对路径：通常使用在访问项目内部资源时使用
      -->
     <!-- 相对路径1：资源文件与html页面在同一目录，直接写图片名 -->
     <h1>相对路径1</h1>
     <img alt="" src="1.jpg"><br>
     <!-- 相对路径2：资源文件在html页面的下一级目录，先指定文件名，再指定文件 -->
     <h1>相对路径2</h1>
     <img alt="" src="img/2.jpg"><br>
     <!-- 相对路径3：资源文件在html页面的上一级目录，先使用../指定上级目录，再指定文件 -->
     <h1>相对路径3</h1>
     <img src="../image/3.jpg"><br>
     
     <!-- 
         绝对路径：通常访问硬盘上的资源或网络上的资源，图片不需要保存到项目中，
         但是项目移植到其他电脑中，可能会在出现找不到图片的情况。
         注意：使用火狐浏览器时，绝对路径1前面要加：file:///，否则加载不出来图片。建议使用Chrome浏览器！！！
      -->
     <h1>绝对路径1</h1>
     <img alt="图片加载失败" src="file:///D:/image/4.jpg"><br>
     <h1>绝对路径2</h1>
     <img alt="" src="https://i.cnblogs.com/assets/adminlogo.png"><br>
     <!--
         alt属性的值会在图片找不到时出现在页面上 
         title属性的值会在鼠标悬停在图片上显示
         width宽度、height高度均可以赋值像素大小或百分比
             如果只赋值宽或者高，会保持图片等比例缩放
             如果均赋值，有可能导致图片失真
             一般使用百分比设置宽度，赋值百分比时，按照img标签的上级标签的宽作为100% 
      -->
     <img alt="图片加载失败" title="小壮壮" src="1.jpg">
     <img alt="图片加载失败" title="小壮壮" src="1.jpg" width="200">
     <img alt="图片加载失败" title="小壮壮" src="1.jpg" height="200">
     <img alt="图片加载失败" title="小壮壮" src="1.jpg" width=