你看我像不像学HTML的人（三）——HTML常用标签（图像标签）

最新推荐文章于 2024-02-21 22:21:06 发布

田小江爱分享

最新推荐文章于 2024-02-21 22:21:06 发布

阅读量480

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/third_/article/details/110848889

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 图像标签

1.1 图像标签的定义

在HTML标签中，<img> 标签用于定义HTML页面中的图像。

<img src="图像URL" />

单词image的缩写，意为图像。

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个图像标签的特性。

1.2 图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字。
title	文本	提示文本。鼠标放到图像上，显示的文字。
width	像素	设置图像的宽度。
height	像素	设置图像的高度。
border	像素	设置图像的边框粗细。

1.3 图像标签的使用

（1）src属性基本使用：

图片和html文件放在同一目录下：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld.img" />
</body>

</html>

执行效果如下：

（2）alt属性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld1.img" alt="这是一个坏掉的hello world图像" />
</body>

</html>

执行效果如下：

（3）title属性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" />
</body>

</html>

执行效果如下：

（4）width属性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" />
</body>

</html>

执行效果如下：

（5）height属性使用：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" height="10" />
</body>

</html>

执行效果如下：

宽度和高度一般情况修改一个就行了，另外一个让他自己等比例进行缩放。

（6）boder属性使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>图像标签的使用</title>
</head>

<body>
    <h4>图像标签的使用：</h4>
    <img src="helloworld.img" title="这是hello world图片鼠标移动上去后会显示的文字" width="300" border="15" />
</body>

</html>

执行效果如下：