当前位置：首页 > 行业动态 > 正文

如何在html中使用标记加图片

admin
行业动态
2024-04-01
2218

在HTML中，我们可以使用<img>标记来插入图片。<img>标记有一个必需的属性src，它定义了图像的URL，还可以使用一些可选的属性来控制图像的行为和外观。

以下是如何在HTML中使用<img>标记加图片的详细步骤：

1、打开一个文本编辑器，如Notepad、Sublime Text或Visual Studio Code。

2、创建一个新的HTML文件，并将其保存为index.html。

3、在HTML文件中，输入以下基本结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>图片示例</title>
</head>
<body>
    <!在这里插入图片 >
</body>
</html>

4、在<body>标签内，添加<img>标记并设置src属性，将src属性的值设置为要显示的图片的URL。

<img src="https://via.placeholder.com/150" alt="示例图片">

这里，我们使用了Placeholder提供的一张示例图片，你可以将其替换为你自己的图片URL。

5、添加alt属性，这是一个可选属性，用于为图像提供替代文本，当图像无法加载时，浏览器将显示这个替代文本。

<img src="https://via.placeholder.com/150" alt="示例图片">

6、保存HTML文件，并在浏览器中打开它，你应该能看到插入的图片。

除了基本的src和alt属性外，还可以使用其他一些属性来控制图片的行为和外观：

width和height属性：可以设置图片的宽度和高度。

<img src="https://via.placeholder.com/150" alt="示例图片" width="300" height="200">

class和id属性：可以为图片添加类名和ID，以便在CSS和JavaScript中引用它们。

<img src="https://via.placeholder.com/150" alt="示例图片"  id="myimage">

style属性：可以直接在HTML中设置图片的一些样式，如边框、边距等。

<img src="https://via.placeholder.com/150" alt="示例图片" >

loading属性：可以控制图片何时开始加载，有3个值可供选择：auto（默认值，浏览器决定何时加载）、eager（立即加载）和lazy（延迟加载）。

<img src="https://via.placeholder.com/150" alt="示例图片" loading="eager">

7、若要在页面上水平或垂直对齐图片，可以使用CSS的textalign和verticalalign属性。

<style>
    .center {
        textalign: center; /* 使图片水平居中 */
        display: block; /* 将行内元素转换为块级元素 */
    }
</style>
<div >
    <img src="https://via.placeholder.com/150" alt="示例图片">
</div>

或者，可以使用Flexbox布局来实现垂直居中：

<style>
    .container {
        display: flex; /* 启用Flexbox布局 */
        flexdirection: column; /* 垂直排列子元素 */
        justifycontent: center; /* 水平居中子元素 */
        height: 100vh; /* 容器占据整个视口高度 */
    }
</style>
<div >
    <img src="https://via.placeholder.com/150" alt="示例图片">
</div>

以上就是在HTML中使用标记加图片的方法，通过这些方法，你可以轻松地在网页上插入、控制和样式化图片。