HTML常用标签

最新推荐文章于 2023-09-28 22:59:55 发布

FG.

最新推荐文章于 2023-09-28 22:59:55 发布

阅读量120

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_54418006/article/details/115496499

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML常用标签

4.6图像标签(重要)

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

<img src="图像URL"/>

<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>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg"/>
</body>
</html>

在这里插入图片描述

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

<!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="img.jpg" alt="动漫"/>
</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> title 提示文本</h4>
    <img src="img.jpg" alt="我是冬离" title="我是冬离"/>
</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> width 给图像设定宽度</h4>
    <img src="img.jpg" alt="我是冬离" title="我是冬离" width="500"/>
</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> width 给图像设定高度</h4>
    <img src="img.jpg" alt="我是冬离" title="我是冬离" width="500" height="100"/>
</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> width 给图像设定边框：</h4>
    <img src="img.jpg" alt="我是冬离" title="我是冬离" width="500" border="15"/>
</body>
</html>