如何在HTML中添加图片|极客笔记

如何在HTML中添加图片

在网页设计中，向页面中添加图片是非常常见的操作，可以让页面更加生动和吸引人。在HTML中，我们可以使用<img>标签来实现向页面添加图片的功能。本文将详细介绍如何在HTML中添加图片，并提供一些示例代码。

1. 使用`<img>`标签添加图片

在HTML中，我们使用<img>标签来向页面中添加图片。<img>标签有几个属性，其中src属性用于指定图片的URL，alt属性用于指定图片的描述文字。下面是一个基本的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加图片示例</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="这是一张图片">
</body>
</html>

Output:

如何在HTML中添加图片

在上面的示例中，将src属性替换为实际的图片URL，页面就会显示对应的图片了。

2. 指定图片的宽度和高度

我们可以使用width和height属性来指定图片的宽度和高度。这对于控制图片在页面中的大小非常有用。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>指定图片大小示例</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="这是一张图片" width="200" height="150">
</body>
</html>

Output:

如何在HTML中添加图片

在上面的示例中，width属性指定图片的宽度为200像素，height属性指定图片的高度为150像素。

3. 在页面中居中显示图片

要在页面中居中显示图片，我们可以使用CSS来实现。可以在<style>标签中设置图片的样式，使其可以水平居中显示。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>居中显示图片示例</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="这是一张图片">
</body>
</html>

Output:

如何在HTML中添加图片

在上面的示例中，通过设置display: block;和margin: 0 auto;，实现了图片在页面中水平居中显示的效果。

4. 给图片添加链接

有时候我们希望点击图片后可以跳转到另一个页面，这时可以给图片添加链接。在<a>标签中嵌套<img>标签即可实现这个功能。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片链接示例</title>
</head>
<body>
    <a href="目标页面URL">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="这是一张图片">
    </a>
</body>
</html>

Output:

如何在HTML中添加图片

在上面的示例中，点击图片后会跳转到指定的页面。

5. 处理图片显示不全问题

有时候图片大小超出了父元素的尺寸，导致图片显示不全。我们可以使用CSS的object-fit属性来解决这个问题。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>处理图片显示不全示例</title>
    <style>
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="这是一张图片">
</body>
</html>

Output:

如何在HTML中添加图片