HTML标签img插入图片

HTML 标签插入图像

内容:
1.图像格式
2.插入图像image标签
3.绝对路径与相对路径

图像格式
JPG
有损压缩的图像格式,色彩丰富图片
去掉一些不太关键的信息,文件压缩

GIF
简单动画,背景透明

PNG
无损压缩,透明,交错,动画

透明:
可以给图片指定一种颜色,使其不被显示而成为透明

交错
在显示图片的过程中可以从概念逐渐变化到全貌,看上去也就是清晰度的大小

路径:
绝对路径:
以根目录为基准查找

相对路径:
以该文档所在位置为基准查找

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>image插入图像</title>
</head>

<body>
	<h1>Website常用站点</h1>
	<h2>目录</h2>
	<p>百度一下</p>
	<p>谷歌官网</p>
	<p>腾讯官网 </p>
	<p>微信官网</p>
	<hr />
	<p><img src="images/Baidu.png" width="300px" height="200px" alt="403"><a href="https://www.baidu.com/">百度一下</a></p>
	<img src="images/Google.png" width="300px" height="200px" alt="403"><a href="https://www.google.cn/">谷歌官网</a></p>
	<p><img src="images/Tencent.png" width="300px" height="200px" alt="403"><a href="https://www.qq.com/">腾讯官网 </a></p>
	<img src="images/Weixin.png" width="300px" height="200px" alt="403"><a href="https://weixin.qq.com/">微信官网</a></p>
	<hr/>
	<h6>made by One of three_tigers</h6>
</body>
</html>

网页效果:
在这里插入图片描述

发布了100 篇原创文章 · 获赞 56 · 访问量 4864

猜你喜欢

转载自blog.csdn.net/weixin_44307065/article/details/103722433