图像标签（1）

最新推荐文章于 2023-10-04 22:40:06 发布

爱吃火锅的小boy

最新推荐文章于 2023-10-04 22:40:06 发布

阅读量651

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_42900834/article/details/121962140

版权

1.在HTML标签中，<img>标签可以用来定义HTML中的图像

写法：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
        图片标签的使用
        <img src="bg1.png"/>
</body>
</html>

运行效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
        <h4>图片标签的使用</h4>
        <img src="bg1.png"/>
</body>
</html>

2.图像标签的其他属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
        <h4>alt 替换文本  图像显示不出来的时候用文本替换</h4>
        <img src="bg.png"  alt="风景"/>
</body>
</html>

运行效果：

因为项目文件中没有bg.png的照片，所以只能显示文字

3.title为提示文本，当鼠标放到图像上时，显示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
        <h4>title为提示文本  当鼠标放到图像上，提示文字</h4>
        <img src="bg1.png"  alt="风景" title="这是一张图片"/>
</body>
</html>

爱吃火锅的小boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图像标签（1）

1.在HTML标签中，<img>标签可以用来定义HTML中的图像写法：src是<img>标签的必须属性，它用于指定图像文件的路径和文件名所谓属性：简单理解就是属于这个图像标签的特性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE.
复制链接

扫一扫