HTML--图像

时间 2019-11-20

标签 html 图像栏目 HTML 繁體版

原文原文链接

直接上代码，以下html

<!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>是个空标签，它只有开始标签，没有闭合标签。url

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

定义图像的语法是htm

<img src="url"/>

url指定图像存储的位置。图片

2.替换文本属性(Alt)utf-8

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

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

3.背景图片class

<!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>

图片以下file

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>