HTML学习:图片标签
作者:互联网
图片标签:
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点)
属性:
src 属性指定的是外部图片的路径( 路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所检测
width 图片的宽度 height 图片的高度 -宽度和高度如果只修改一个,则另一个会等比例缩放
注意:一般情况下在pc端,不建议修改图片的大小,需要多大的图片就裁剪多大 但是在移动端,经常需要对图片进行缩放(大小缩放)
图片的格式: jped(jpg) - 支持的颜色比较丰富,不支持透明效果,不支持动图 -一般用来显示照片 gif - 支持的颜色比较少,支持简单透明,支持动图 -颜色单一的图片,动图 png - 支持的颜色丰富,支持复杂透明,不支持动图 -颜色丰富,复杂透明图片(专为网页而生) webp -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 -它具备其他图片格式的所有优点,而且文件还特别小 -缺点:兼容性不好 base64 -将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片 -一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的 效果不一样,用效果好的
-->
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所检测
width 图片的宽度 height 图片的高度 -宽度和高度如果只修改一个,则另一个会等比例缩放
注意:一般情况下在pc端,不建议修改图片的大小,需要多大的图片就裁剪多大 但是在移动端,经常需要对图片进行缩放(大小缩放)
图片的格式: jped(jpg) - 支持的颜色比较丰富,不支持透明效果,不支持动图 -一般用来显示照片 gif - 支持的颜色比较少,支持简单透明,支持动图 -颜色单一的图片,动图 png - 支持的颜色丰富,支持复杂透明,不支持动图 -颜色丰富,复杂透明图片(专为网页而生) webp -这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 -它具备其他图片格式的所有优点,而且文件还特别小 -缺点:兼容性不好 base64 -将图片使用base64进行编码,这样可以将图片转换为字符,通过字符的形式来引入图片 -一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的 效果不一样,用效果好的
-->
标签:动图,缩放,标签,base64,支持,HTML,alt,图片 来源: https://www.cnblogs.com/boy-ke/p/15693179.html