| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <!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>Document</title>
- </head>
- <body>
- <!--
- 图片标签用于向当前页面引入一个外部图片
- 使用img标签来引入外部图片，img标签是一个自结束标签
- img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
- 属性：
- src 属性指定的是外部图片的途径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
- 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
- width 图片的宽度（单位是像素）
- height 图片的高度（单位是像素）
- -宽度和高度中如果只修改了一个，则另一个会等比例缩放
- 注意：
- 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
- 但是在移动端，经常需要对图片进行缩放（主要是大图缩小）
- 图片的格式：
- jpeg（jpg）
- -支持的颜色比较丰富，不支持透明效果，不支持动图
- -一般用来显示照片
- gif
- -支持的颜色比较少，支持简单透明，支持动图
- -适合颜色单一的图片，动图
- png
- -支持的颜色丰富，支持复杂透明，不支持动图
- -颜色丰富，复杂透明的图片（专为网页而生）
- webp
- -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- -它具备其他图片格式的所有优点，而且文件还特别的小
- -缺点：兼容性不好
- base64
- -将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- -一般都是一些需要和网页一起加载的图片才会使用base64
- 效果一样，用小的
- 效果不一样用效果好的
- -->
- <img src="../img/zly.jpeg" alt="赵丽颖">
- <img width="600" src="https://img2.baidu.com/it/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="草坪">
- </body>
- </html>
|
