HTML：图像_html图像-CSDN博客

本文链接：https://blog.csdn.net/Thumb_/article/details/121799620

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
</head>
<body>
    <!-- 原图像显示 -->
    <img src="http://www.imooc.com/static/img/index/logo.png" />
    <!-- 设置宽、高 -->
    <img width="100px" height="20px" src="http://www.imooc.com/static/img/index/logo.png" />
    <!-- 在图像无法显示时，会显示alt的内容，告诉用户此处放了一个怎样的图像 -->
    <!-- 此处src故意写错，便于查看效果 -->
    <img alt="imooc-logo" src="http://www.imooc.com/static/img/index/logo.pn" />
</body>
</html>

输出：
在这里插入图片描述

通过非标签的方式插入图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <style>
        /* . 是为了匹配文档中指定类名的 */
        /* 非标签方式插入图像 */
        .imooc-logo {
            background: url("http://www.imooc.com/static/img/index/logo.png");
            width: 100px;
            height: 80px;
        }
    </style>

</head>
<body>
    <img alt="imooc-logo" src="http://www.imooc.com/static/img/index/logo.png" />
    <p class="imooc-logo"></p>

</body>
</html>

在这里插入图片描述

插入本地图像

使用绝对路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <style>
        /* . 是为了匹配文档中指定类名的 */
        /* 非标签方式插入图像 */
        .imooc-logo {
            /* 绝对路径 */
            background: url("E:/java_code/java_stream/animal.jpg");
            width: 300px;
            height: 200px;
        }
    </style>
 
</head>
<body>
    <img alt="imooc-logo" src="http://www.imooc.com/static/img/index/logo.png" />
    <p class="imooc-logo"></p>

</body>
</html>

在这里插入图片描述
相对路径：

/* 相对路径 */
background: url("../java_stream/animal.jpg");

在这里插入图片描述