笔记html3 图片

笔记html3 图片

图片标签

图片标签用于向当前页面中引入一个外部的图片。

使用img标签

（一个自结束标签）引入外部图片；

使用src属性

确定外部图片的路径。

src导入的路径规则是一样的。

使用alt属性

添加对图片的描述。

​ alt作用：浏览器通过alt的内容来识别图片。

​ alt的使用使得图片可以被搜索引擎所收录。

（默认情况下不会显示，不过一些浏览器会在图片没显示出来的时候显示）。

使用width height标签

改变图片的宽度和高度（单位为像素）

宽度和高度只修改一个，另一个便会等比例缩放。

tips

一般情况下 比建议在pc端修改图片的大小(一切以美观为主)

但在移动端经常需要对图片进行缩小

 <img width="100" height="100" src="./1.png" alt="诗词">

替换元素

——某种意义上img属于一种替换元素。（不独占一行）

替换元素介于块元素与替换元素之间。

在此img不显示元素本身，而是显示外部资源所代表的图片。

图片的格式

常见格式：

• jpg 支持的颜色比较丰富，不支持透明效果，不支持动图——照片

• gif 支持颜色较少，支持简单透明，支持动图——颜色单一，动图

• png 支持颜色丰富，支持复杂透明，不支持动图——专为网页而生（最常用）

• webp

  谷歌新推出的专门用来表示网页图片的格式——具备前三者所有优点，并且文件大小小

  问题：兼容性不好

• base64 格式可以将图片使用base64进行编码，以此将图片转换为字符，用字符形式引入图片，一般需要和网页一起加载的图片才使用base64。

  其他图片格式的加载会涉及到别的文件或者网页的引用，需要多次向服务器发送请求。

  而base64格式可以避开这点，大幅降低网页的加载速度。

  一般在网上找网页进行base64转换。

第一优先效果，第二优先内存占用。