如何在html页面插图片和文字

在HTML页面中插入图片是很常见的需求，无论是为了美化页面还是为了展示内容，本文将详细介绍如何在HTML页面中插入图片，包括使用img标签、CSS样式以及JavaScript等方法。

（图片来源网络，侵删）

1、使用img标签插入图片

img标签是HTML中专门用于插入图片的标签，其基本语法如下：

<img src="图片地址" alt="图片描述" />

src属性用于指定图片的地址，可以是相对路径或绝对路径；alt属性用于为图片提供替代文本，当图片无法显示时，浏览器会显示这个替代文本。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>插入图片示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一张美丽的风景照片：</p>
    <img src="风景照片.jpg" alt="美丽的风景照片" />
</body>
</html>

2、使用CSS样式设置图片大小和位置

除了使用img标签插入图片外，我们还可以使用CSS样式来设置图片的大小和位置，需要在HTML文件中引入CSS样式表，然后在style标签内编写CSS代码。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>插入图片示例</title>
    <style>
        img {
            width: 300px; /* 设置图片宽度 */
            height: 200px; /* 设置图片高度 */
            position: absolute; /* 设置图片位置 */
            top: 50%; /* 设置图片距离顶部的距离 */
            left: 50%; /* 设置图片距离左侧的距离 */
            transform: translate(50%, 50%); /* 调整图片中心点与容器中心点对齐 */
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一张美丽的风景照片：</p>
    <img src="风景照片.jpg" alt="美丽的风景照片" />
</body>
</html>

3、使用JavaScript动态加载图片

我们需要根据用户的操作或者页面内容的变化来动态加载图片，这时，可以使用JavaScript来实现，以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态加载图片示例</title>
    <script>
        function loadImage() {
            var img = document.createElement('img'); // 创建一个新的img元素
            img.src = '新的风景照片.jpg'; // 设置图片地址
            document.body.appendChild(img); // 将新创建的img元素添加到页面中
        }
    </script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一张美丽的风景照片：</p>
    <button onclick="loadImage()">点击加载新图片</button>
</body>
</html>

在这个示例中，我们创建了一个名为loadImage的函数，当用户点击按钮时，这个函数会被调用，函数内部创建了一个新的img元素，并设置了其src属性为新的风景照片地址，然后将这个新创建的img元素添加到页面中，这样，用户就可以通过点击按钮来动态加载新的风景照片了。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/366222.html

如何在html页面插图片和文字

相关推荐

发表回复