html中文档中怎么添加图片和文字

K-seo • 2024-01-16 02:25 • 网站运维 • 186 views

在HTML文档中添加图片，可以使用<img>标签。<img>标签的src属性用于指定图片的URL地址，alt属性用于为图片提供替代文本，以便在图片无法显示时提供有关图片的信息，还可以使用width和height属性来设置图片的宽度和高度。

下面是一个简单的示例：

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

在这个示例中，我们首先创建了一个HTML文档，然后在<body>标签内添加了一个标题、一段文字和一张图片，图片的URL地址是example.jpg,替代文本是“示例图片”，宽度设置为200像素，高度设置为150像素。

需要注意的是，如果图片的URL地址无法访问，浏览器将显示默认的图片(通常是一个圆角矩形),替代文本也会被显示出来，为了避免这种情况，建议确保图片的URL地址可以正确访问，或者使用绝对路径或相对路径。

相关问题与解答：

问题1:如何在HTML文档中插入多张图片？

答：要插入多张图片，可以在<body>标签内使用多个<img>标签，每个标签对应一张图片。

<!DOCTYPE html>
<html>
<head>
    <title>添加多张图片示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一段文字。</p>
    <img src="example1.jpg" alt="示例图片1" width="200" height="150">
    <img src="example2.jpg" alt="示例图片2" width="200" height="150">
    <img src="example3.jpg" alt="示例图片3" width="200" height="150">
</body>
</html>

问题2:如何设置图片的样式？

答：除了使用width和height属性设置图片的尺寸外，还可以使用CSS对图片进行样式设置，可以使用内联样式、内部样式表或外部样式表来设置图片的背景颜色、边框、阴影等样式，以下是一个使用内联样式设置图片背景颜色的示例：

<!DOCTYPE html>
<html>
<head>
    <title>添加带样式的图片示例</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一段文字。</p>
    <img src="example.jpg" alt="示例图片" style="background-color: lightblue;">
</body>
</html>

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/222108.html