笔记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转换。
第一优先效果,第二优先内存占用。