五、图片

1、图片标签

1.1、scr属性

图片标签：img在网页制作中是必不可少的标签，我们主要了解src、alt、title、width、height这几个属性即可

  • img src="图片地址"，src主要用于导入所需的图片，只需要在src后面填写图片地址即可。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="D:/1.Web 自学/1.Web Code/五、图片/1.jpg">
    </body>
</html>

1.2、alt属性&title属性

  • alt属性的内容是提供给搜索引擎看的
  • alt=“内容”
  • alt这个属性，是当图片地址失效时，或者图片找不到，提示用户图片丢失了。用法是在img里面空格接alt属性就好
  • 在图片加载不出来时,浏览器将用alt的文本代替图
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="/五、图片/1.jpg" alt="图片丢失啦！">
    </body>
</html>

  • 或者我们直接不填写地址，也可以告诉用户图片丢失了
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="" alt="图片丢失啦！">
    </body>
</html>

  • title属性，当用户鼠标移动到图片上面时，提示文字。

    <!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
   </head>
   <body>
       <img src="./img/baidu.png" alt="图片丢失啦！" title="百度">
   </body>
</html>

    1.3、width属性&height属性

  • width属性是用于设置图片的宽度的，只需要在img标签内空格接width即可。例如我现在从D盘下导入了一张1.jpg的照片，设置它的宽度为300px（100像素）。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="D:/1.jpg" alt="图片丢失啦！" width="300px" >
    </body>
</html>

  • height属性是用于设置图片的高度的，只需要在img标签内空格接height即可。例如我现在从D盘下导入了一张1.jpg的照片，设置它的高度为300px（100像素）。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- <img src="1.jpg" alt="图片丢失啦！" width="300px" > -->
        <img src="D:/1.jpg" alt="图片丢失啦！" height="300px" >
    </body>
</html>

  • 那么根据上面两个实例可以发现，当定义宽度/高度其中一个时，图片会以当前宽/高 等比缩放。

  • 如果需要固定死图片的宽高，则需要将width属性&height属性同时设定。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- <img src="1.jpg" alt="图片丢失啦！" width="300px" > -->
        <!-- <img src="1.jpg" alt="图片丢失啦！" height="300px" > -->
        <img src="D:/1.jpg" alt="图片丢失啦！" width="100px" height="300px" >
    </body>
</html>

2、图片路径

2.1、绝对路径

我们上面演示的几个案例都是用的绝对路径，那么这种绝对路径，一般会有什么盘符，什么图片等。

试着想一下如果我们要把制作好的html文件发给老师批改，或者推到服务器上面发布，这种情况下我们要把图片都收集起来接很麻烦，而且一旦放到另一台电脑，万一另一台电脑没有D盘可怎么办呢，所以绝对路径我们一般不推荐使用。

2.2、相对路径

  • 一般的相对路径表示有一下几种，“ / ” 后面会接我们的图片名字
  • ./ 当前目录
  • ../ 当前目录的上一级目录
  • 一般我们会采取图片和网页放置同一个位置，在用一个文件夹存放图片，例如：
  • 例如我们导入一张当前目录下的图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="./1.jpg">
    </body>
</html>

  • 如我们导入一张当前目录的上一级目录下的图片
  • 现在我把img文件夹，放到了五、图片同一级目录，而我的照片是在五、图片下的，如何操作才能选中外面的baidu.png这张图片？

  • 使用"../"回到上一级目录，再选择照片即可。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="../img/baidu.png">
    </body>
</html>

3、图片格式

3.1、位图

  • 在实际开发中，最常见的位图的图片格式有3种
  • jpg（jpge）格式可以很好地处理大面积色调的高清图片，适合储存颜色非常丰富而复杂的图片。jpg格式的图片体积较大，并且不支持保存透明背景。
  • png是一种无损的照片格式，可以无损压缩以保证网页打开速度。png图片的体积较小，并且支持保存透明背景。
  • gif格式的显示效果最差，不过它适合制作动画。在我们的QQ、微笑中那些会动的表情包一般使用的都是gif格式。

    举例，这里先定义背景颜色（这是CSS的内容 现在不必深入研究）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .box {
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="./img/1.jpg" alt="图片丢失啦！">
            <img src="./img/2.png" alt="图片丢失啦！">
            <img src="./img/3.gif" alt="图片丢失啦！">
        </div>
    </body>
</html>

3.2、矢量图

  • 矢量图，又叫做“向量图”，是一种以数学描述的方式来记录内容的图片格式。
  • 矢量图最大的优点是图片无论放大、缩小、旋转等操作，都不会使得图片失真。
  • 最大的缺点是难以表现色彩的丰富的照片


最后修改：2024 年 01 月 24 日
© 允许规范转载
咱们谁跟谁，用不着～