html网页制作添加图片

admin 33 0

在HTML网页中添加图片,你可以使用``标签,下面是一个基本的例子:

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <img src="my_image.jpg" alt="我的图片">
</body>
</html>

在这个例子中,``标签用于插入图片,`src`属性定义了图片的来源,可以是相对路径(如上例所示)或绝对URL,`alt`属性提供了图片无法显示时的替代文本,这对于网页的可访问性和搜索引擎优化(SEO)非常重要。

如果你想要控制图片的大小,你可以使用`width`和`height`属性。

<img src="my_image.jpg" alt="我的图片" width="500" height="600">

这将把图片的宽度设置为500像素,高度设置为600像素,请注意,如果你同时设置了`width`和`height`,并且它们的比例不符合原始图片的比例,那么图片可能会变形,如果你只想设置宽度或高度的一个值,而让另一个值自动缩放以保持图片的比例,你可以只设置一个值,然后让另一个值保持为空。

你也可以使用CSS来控制图片的大小和样式。

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        .my_image {
            width: 500px;
            height: auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <img src="my_image.jpg" alt="我的图片" class="my_image">
</body>
</html>

在这个例子中,我们创建了一个CSS类`my_image`,并将其应用于``标签,这个类将图片的宽度设置为500像素,高度设置为自动(以保持图片的比例),并添加了一个黑色的边框。