html怎么加图片

K-seo • 2024-01-28 13:28 • 网站运维 • 153 views

在HTML中，插入图片主要有两种方式：使用<img>标签和使用<picture>、<source>和<img>标签的组合，下面将详细介绍这两种方法，并在末尾提供一个相关问题与解答的栏目。

1. 使用<img>标签插入图片

<img>标签是HTML中最简单的图片插入标签，它的基本语法如下：

<img src="图片地址" alt="图片描述" width="图片宽度" height="图片高度">

src属性用于指定图片的URL地址；

alt属性用于为图片提供一个简短的描述，当图片无法显示时，会显示这个描述；

width和height属性分别用于设置图片的宽度和高度。

下面是一个使用<img>标签插入图片的示例：

<!DOCTYPE html>
<html>
<head>
    <title>插入图片示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一段文字。</p>
    <img src="example.jpg" alt="示例图片" width="200" height="150">
</body>
</html>

2. 使用<picture>、<source>和<img>标签插入图片

<picture>标签允许你在一个统一的容器中定义多个不同尺寸的图片，然后通过CSS来控制哪个图片被选中显示，这种方法可以实现响应式布局，让图片根据屏幕尺寸自动调整大小，下面是一个使用<picture>、<source>和<img>标签插入图片的示例：

<!DOCTYPE html>
<html>
<head>
    <title>使用<picture>、<source>和<img>标签插入图片示例</title>
    <style>
        img[data-srcset] {
            display: none;
        }
        img[data-srcset][srcset] {
            display: block;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一段文字。</p>
    <picture>
        <source media="(min-width: 768px)" srcset="example-768px.jpg, example-1440px.jpg">
        <source media="(min-width: 480px)" srcset="example-480px.jpg">
        <img src="example.jpg" alt="示例图片" data-srcset="example-768px.jpg, example-1440px.jpg" width="200" height="150">
    </picture>
</body>
</html>

在这个示例中，我们首先使用CSS隐藏了默认的图片(即没有添加任何媒体查询的图片),然后通过添加data-srcset属性来指定不同设备下的图片源，我们使用一个普通的<img>标签作为占位符，它的src属性值设置为默认图片的URL地址，而它的data-srcset属性值则设置为包含多个设备下图片源的字符串，当浏览器解析到这个带有data-srcset属性的<img>标签时，会根据当前设备的屏幕尺寸选择合适的图片源进行显示。