HTML中img标签

最新推荐文章于 2023-05-29 13:35:47 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-05-29 13:35:47 发布

阅读量1.1k

点赞数 3

本文链接：https://blog.csdn.net/qq_37805832/article/details/106580250

版权

第一种img方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" />
</body>
</html>

在这里插入图片描述第二种img方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" width="300" height="478" />
</body>
</html>

在这里插入图片描述第三种方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" width="100" height="478" />

</body>
</html>

在这里插入图片描述第四种方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" width="100"  />

</body>
</html>

在这里插入图片描述
第五种方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" height="178"  />

</body>
</html>

在这里插入图片描述
第六种：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./1.jpg" width="100" title="贵哥的编程之路"  />

</body>
</html>

在这里插入图片描述第七种：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="./11.jpg" width="100" alt="贵哥的编程之路"  />

</body>
</html>

在这里插入图片描述

3.注意点

和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行
如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形

4.img中的其它属性
width: 宽度
height: 高度
所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高, 那么系统会按照指定的宽高来显示

title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容

–>

贵哥的编程之路(热爱分享)

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML中img标签

第一种img方式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <img src="./1.jpg" /></body></html>第二种img方式：<!DOCTYPE html><
复制链接

扫一扫