如何在HTML中插入图片|极客笔记

如何在HTML中插入图片

在网页开发中，插入图片是非常常见的操作，能够让页面内容更加生动和吸引人。在HTML中，我们可以使用<img>标签来插入图片，下面我们就来详细介绍如何在HTML中插入图片。

在HTML中插入本地图片

在HTML中，我们可以插入本地存储的图片文件。我们可以先将图片文件保存在本地的某个目录下，然后使用<img>标签指定src属性来引入这张图片。

<!DOCTYPE html>
<html>
<head>
    <title>Insert local image</title>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，我们使用<img>标签来插入一个名为how2html.png的本地图片，alt属性用来定义图片的替代文本。

在HTML中插入网络图片

除了本地图片，我们还可以在HTML中插入网络上的图片。同样使用<img>标签，只需指定src属性为网络图片的URL地址即可。

<!DOCTYPE html>
<html>
<head>
    <title>Insert online image</title>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="How2HTML Logo">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，我们插入了一个来自网络的图片，URL地址为https://how2html.com/wp-content/themes/dux/img/logo.png。

设置图片的宽度和高度

通过width和height属性，我们可以自定义图片在网页中的显示尺寸。这两个属性可以使用像素值或百分比来指定图片的大小。

<!DOCTYPE html>
<html>
<head>
    <title>Set image width and height</title>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo" width="200" height="100">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，我们设置了图片的宽度为200像素，高度为100像素。

在图片周围添加边框

通过CSS样式，我们可以为图片添加边框效果。使用border属性可以设置图片的边框样式、颜色和宽度。

<!DOCTYPE html>
<html>
<head>
    <title>Add border to image</title>
    <style>
        img {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="How2HTML Logo">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，我们为图片添加了一个黑色实线边框。

图片添加超链接

在HTML中，我们可以将图片设置为超链接，让用户在点击图片时跳转到指定的链接地址。可以将<img>标签放在<a>标签内来实现这一功能。

<!DOCTYPE html>
<html>
<head>
    <title>Make image a link</title>
</head>
<body>
    <a href="https://www.how2html.com">
        <img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="How2HTML Logo">
    </a>
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，当用户点击图片时，会跳转到https://www.how2html.com这个链接地址。

设置图片的对齐方式

可以使用align属性来设置图片在文档中的对齐方式，可以选择左对齐、右对齐或居中对齐。

<!DOCTYPE html>
<html>
<head>
    <title>Set image alignment</title>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo" align="center">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，我们将图片设置为居中对齐。

响应式图片

响应式图片会根据浏览器窗口大小自动调整尺寸，以适应不同设备的屏幕。可以使用CSS样式设置图片的最大宽度为100%。

<!DOCTYPE html>
<html>
<head>
    <title>Responsive image</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，图片的宽度会自动调整为最大100%，高度会根据宽度等比例缩放。

图片的懒加载

在一些情况下，页面包含大量图片时可能会影响页面加载速度。可以使用loading="lazy"属性来实现图片的懒加载，只有当图片即将进入视口时才会加载。

<!DOCTYPE html>
<html>
<head>
    <title>Lazy load image</title>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo" loading="lazy">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，图片会在用户滚动页面使其进入视口时才会加载。

设置图片的标题

可以使用title属性为图片设置一个提示性的标题，当用户将鼠标悬停在图片上时会显示该标题。

<!DOCTYPE html>
<html>
<head>
    <title>Add title to image</title>
</head>
<body>
    <img src="C:/Users/hp/Desktop/tmp/zsl/reviewed/logo.png" alt="How2HTML Logo" title="Learn HTML with How2HTML">
</body>
</html>

Output:

如何在HTML中插入图片

在上面的示例代码中，当用户将鼠标悬停在图片上时，会显示Learn HTML with How2HTML这个标题。

使用base64编码插入图片

除了引用外部图片文件，我们还可以将图片以base64编码的形式直接插入到HTML文件中，减少HTTP请求次数。

<!DOCTYPE html>
<html>
<head>
    <title>Insert image with base64</title>
</head>
<body>
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJR...">
</body>
</html>

Output:

如何在HTML中插入图片