HTML图像

最新推荐文章于 2023-06-11 23:59:49 发布

原创最新推荐文章于 2023-06-11 23:59:49 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了HTML中插入图片的相关知识，包括使用<img>标签插入图像，其属性有src和alt，支持PNG、JPEG等格式，还提到非标签方式background。同时讲解了插入网络图片的方法，以及引入路径概念，介绍用绝对路径和相对路径插入本地图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签：<img / > (只需单对即可)
作用：插入图像
属性：src，alt （替换文本）
贴士：(1)支持格式：PNG/JPEG/GIF/PDF (引入的PDF必须是单页的)
(2)非标签方式：background
1.插入网络图片

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <!--定义样式-->
    <style>
        /*<!--.是用来匹配文档中指定类名-->*/
        .imooc-logo{
            /*通过非标签的方式将图片插入到HTML中*/
            background: url(http://www.imooc.com/static/img/index/logo.png);
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <!--width和height用来设置图片的大小,alt的作用是在图片无法正常显示时给用户提供提示-->
    <img alt="imooc-logo" src="http://www.imooc.com/static/img/index/logo.png"/>
    <!--class:标识，用来指定标签的类名-->
    <p class="imooc-logo">

    </p>
</body>
</html>

上述代码分别通过标签和非标签的方法来插入网络图像，结果如下：
在这里插入图片描述

上述分别用标签和非标签插入网络图片，那么如何来插入本地图像？
2.插入本地图像
现在引入概念：路径——资源所处位置
（1）绝对路径
（2）相对路径

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <!--定义样式-->
    <style>
        /*<!--.是用来匹配文档中指定类名-->*/
        .imooc-logo{
            /*通过相对路径来插入本地图片*/
            background: url(./logo.png);
            width: 200px;
            height: 80px;
        }
    </style>
</head>
<body>
    <!--class:标识，用来指定标签的类名-->
    <p class="imooc-logo">

    </p>
</body>
</html>

上述代码是用相对路径来插入本地图像，结果如下：
在这里插入图片描述