HTML--图像-优快云博客

本文详细介绍了HTML中如何使用<img>标签展示图像，并通过设置属性如src、alt、align和width,height来调整图像的显示位置和大小。此外，文章还讲解了如何将图像作为背景应用到网页中，以及如何在文本中排列图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

直接上代码，如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <img src="http://192.168.2.67:8080/Resource/caren/User/1000000001/20151102162609468bg.png" width="128" height="128">
</body>
</html>

图像标签<img>和源属性src

HTML中，图像由<img>标签定义，<img>是个空标签，它只有开始标签，没有闭合标签。

要在页面上显示图像，我们需要使用源属性(src)，源属性的值是图像的URL地址。

定义图像的语法是

<img src="url"/>

url指定图像存储的位置。

2.替换文本属性(Alt)

alt属性用来为图片定义一串可替换的文本。替换的内容是由用户自定义的。

<img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="128" height="128" alt="图片加载失败，请稍后再试" />

3.背景图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body background="file:///D:/caren/User/1000000001/20151102162609468bg.png">
    <h2>测试背景图片</h2>
    <p>如果图片小于背景页面，图像会重复显示</p>
</body>
</html>

图片如下

4.在文字中排列图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h2>未设置对齐方式的图像，默认是底部</h2>
    <p>图像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png"> 在文本中</p>
    <h2>已设置对齐方式的图像</h2>
    <p>图像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="bottom"> 在文本中，设置图像属性为bottom</p>
    <p>图像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="middle"> 在文本中，设置图像属性为middle</p>
    <p>图像 <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" align="top"> 在文本中，设置图像属性为top</p>
</body>
</html>

5.图像显示在左右边

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>
        图像属性设置为left，图像显示在文字的左边
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20" align="left">
    </p>
        图像属性设置为right，图像显示在文字的右边
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20" align="right">
    <p>
    </p>
</body>
</html>

6.调整图像尺寸

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>
        图像属性宽高30/20
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="30" height="20">
    </p>
    <p>
        图像属性宽高90/60
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="90" height="60">
    </p>
    <p>
        图像属性宽高180/120
        <img src="file:///D:/caren/User/1000000001/20151102162609468bg.png" width="180" height="120">
    </p>
</body>
</html>

转载于:https://my.oschina.net/u/2312022/blog/533274