小白零基础入门HTML5第三天

佳佳猪
114 阅读1分钟

学习如何在HTML中使用image标签

一.image标签

1.image标签定义了HTML页面中的图像,实现的语句是:

<!DOCTYPE html>
<html>
    <head>
        <title>
            我的网页
        </title>
    </head>
    <body>
        <img src= " " alt = " " title=" " width=" " height =" ">
    </body>
</html>

在这里我们需要明白: src: 路径 (图片地址与名字)，alt: 规定图像的替代文本，width: 规定图像的宽度，height: 规定图像的高度，title: 鼠标悬停在图片上给予提示。下面我给大家看看我实现的代码和图片效果

<!DOCTYPE html>
<html>
    <head>
        <title>
            我的网页
        </title>
    </head>
    <body>
        <img src= "./图片/1.小姐姐.jpg" alt = "没有其他信息" title="这是一个小姐姐" width="300px" height ="600px">
    </body>
</html>

image.png

二.出现的几种情况

1.图片无法找到地址的话，那么就不会显示图片，会用破碎的图片来代表这样的效果

<!DOCTYPE html>
<html>
    <head>
        <title>
            我的网页
        </title>
    </head>
    <body>
        <img src= "地址不存在" alt = "没有其他信息" title="这是一个小姐姐" width="300px" height ="600px">
    </body>
</html>

效果如下图所示： image.png 2.title是当鼠标停止在图片的时候出现的文字提示

<!DOCTYPE html>
<html>
    <head>
        <title>
            我的网页
        </title>
    </head>
    <body>
        <img src= "./图片/1.小姐姐.jpg" alt = "没有其他信息" title="这是一个小姐姐" width="300px" height ="600px">
    </body>
</html>

下面的图片上述代码的展示效果:
image.png
这是一个提示的作用,能够让人较为清楚的了解该图片的基本信息。
3.width和height是用来控制展示图片的大小的，单元是像素(px)

三.个人总结

通过对image标签的了解，我能够熟悉的掌握如何在HTML制作中完成图片的展示，对于图片标签image的各种性质我也能够灵活的运用，还有一点就是image图像标签是不需要闭合操作的，也就是说image是单标签。

avatar
文章
阅读
粉丝