8、img标签
2022-05-24 本文已影响0人
小黄不头秃
一、img标签介绍
图片用于向当前页面引入一个外部的图片
用img标签来实现引入图片，img是一个自结束的标签，所以不是成对的。
img标签属于替换元素，基于块和行内元素之间
属性：
- src属性指定的外部的图片的路径(规则与超链接一样,可以使用相对路径也可以使用网页链接。)
相对路径
./（默认）表示当前文件的目录
../表示上一级目录 - alt属性是对图片的描述，这个描述默认情况下隐藏，没显示图片出来显示
- width图片的宽度
- height图片的高度
宽度和高度中若只修改了一处，另外一个会等比例缩放
在pc段不建议修改图片的大写；需要多大裁剪多大。但是在移动端需要对图片进行缩放（大图缩小）
二、网页中常用的图片格式
- jpg(jpeg):色彩丰富，不支持动图，不支持透明效果，一般显示照片；
- gif:色彩比较少，支持简单透明，支持动图；
- png:支持的色彩丰富，支持复杂透明，不支持动图，转为网页而生；
-
webp:谷歌新推出的表示网页中的一种格式；
显示效果一样用文件内存小的。
三、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片</title>
</head>
<body>
<h1>Small yello man</h1>
<p>相对路径</p>
<img width="800" src="../photo/1.jpg" alt="小黄人">
<br>
<h1>夏目友人帐</h1>
<p>网页链接</p>
<img width="800" src="https://c-ssl.duitang.com/uploads/item/201510/04/20151004141633_kKUjw.thumb.700_0.jpeg" alt="猫咪老师">
</body>
</html>
