网页插入图片代码大全

1. 基本的图片插入（img标签）

使用 <img> 标签在网页中插入图片，这是最基本的方法。
            <!DOCTYPE html>
            <html lang="en">







< img src="image.jpg" alt="这是一张图片">




其中，src 属性指定图片的路径，可以是相对路径或绝对路径，alt 属性是图片无法加载时显示的替代文本。

2. 带有宽度和高度属性的图片插入
                    <!DOCTYPE html>
            <html lang="en">






< img src="image.jpg" alt="这是一张图片" width="300" height="200">




使用 width 和 height 属性来指定图片的显示尺寸，单位是像素。注意，修改尺寸可能会导致图片变形，最好根据原始图片比例调整。

3. 图片链接
        将图片放在 <a> 标签内，使其成为可点击的链接。
                    <!DOCTYPE html>
            <html lang="en">











点击图片将跳转到 href 指定的链接地址。

4. 使用 CSS 设置图片样式
        在 HTML 中添加内联 CSS 样式来设置图片样式，如边框、阴影等。
                    <!DOCTYPE html>
            <html lang="en">






< img src="image.jpg" alt="这是一张图片" style="border: 2px solid black; box-shadow: 2px 2px 5px rgba(0,0,0,0.3);">




5. 响应式图片（使用 srcset 属性）
        对于不同设备屏幕分辨率，提供不同尺寸的图片。
                    <!DOCTYPE html>
            <html lang="en">






< img src="image-small.jpg"
srcset="image-small.jpg 320w, image-medium.jpg 640w, image-large.jpg 1024w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
alt="这是一张响应式图片">




其中，srcset 列出不同尺寸图片及其宽度描述，sizes 定义在不同屏幕宽度下图片的显示尺寸。

6. 背景图片（使用 CSS）
        将图片设置为元素的背景。
                    <!DOCTYPE html>
            <html lang="en">











这里使用内联 CSS 将 div 元素的背景设置为指定图片，并设置了背景尺寸和位置。