【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="150" height="300">
     <img alt="图片加载失败" title="小壮壮" src="1.jpg" width="50%">
     
     
 </body>
 </html>

显示效果：使用Web Browser和System Editor打开效果

 

5.4 超链接标签

<a>：超链接标签

  • 如果a标签不写href属性，就是一个纯文本

  • 如果写属性，href属性代表访问路径，可以是相对路径和绝对路径。

  • 访问的资源如果是页面可直接打开，如果访问的是文件，能浏览则直接浏览，不能浏览的就会下载

  • 图片超链接：a标签的内容是一个图片

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>超链接标签</title>
 </head>
 <body>
     <a>纯文本超链接，不加属性，和正文内容一样</a><br>
     
     <!-- 相对路径：超链接指向当前项目的其它页面，也有三种情况，这里仅以第一种情况为例进行演示 -->
     <a href="image.html">图片标签页面</a><br>
     
     <!-- 绝对路径1：访问指定页面，火狐浏览器路径前面要加：file:///，否则加载打不开链接-->
     <a href="D:\Software_Development\Eclipse_Code\webTest\
              WebContent\unit01\first.html">文本标签页面</a><br>
     <!-- 绝对路径2：访问指定网址，注意前面要加http -->
     <a href="http://www.baidu.com">百度</a><br>
     
     <!-- 
         以上href属性都是网页，如果不是网页有两种情况：
         1.如果浏览器能打开（比如图片），那么就打开
         2.如果浏览器不能打开（比如压缩包），那么就下载这个文件
     -->
     <a href="1.jpg">访问图片</a><br>
     <a href="压缩包.zip">下载压缩包</a><br>
     
     <!-- 
         target属性：指定打开页面方式 
         1.指定页面跳转（默认）
         2.在新页面中打开（target属性设置为“_blank”）
     -->
     <a href="image.html" target="_blank">访问图片标签</a><br>
     
     <!-- 
         图片超链接 
         a标签中的内容是一个图片，那么这个图片就会成为一个链接
     -->
     <a href="image.html" target="_blank">
         <img alt="图片加载失败" src="1.jpg" title="点击访问图片标签页面">
     </a><br>
     
 </body>
 </html>

显示效果：

 

 

posted @ 2021-06-30 15:25  Coder_Cui  阅读(524)  评论(0)  编辑  收藏  举报