0
点赞
收藏
分享

微信扫一扫

前端学习日志 Day3

天蓝Sea 2022-04-03 阅读 88
前端

1.图片标签

图片标签用于向当前页面中引入一个外部图片,使用img标签来引入外部图片,img标签是一个自结束标签,img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)

img标签属性

src    指定外部图片的路径

alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示这些描 述。搜索引擎也会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所 识别。

width 图片的宽度(单位为像素)

height   图片的高度 (图片宽度和高度如果只修改其中一个,则另一个会等比例缩放)

注意:一般在Pc端不建议修改图片大小,需要多大图片就裁多大。但是在移动端,经常需要对图片进行缩放(大图缩小)

图片的格式

jpeg(jpg)

-支持的颜色比较丰富,不支持透明效果,不支持动图

-一般用来显示照片

gif

-支持的颜色比较少,支持简单透明,支持动图

-适用于颜色单一的图片,动图

png

-支持的颜色丰富,支持复杂透明,不支持动图

-适用于颜色丰富,复杂透明的图片(专为网页而生)

webp

-谷歌新推出的专门用来表示网页中的图片的一种格式,具备其他图片格式所有优点,而且文件 还特别小,兼容性不好

base64

-将图片使用base64编码,这样可以将图片转换成字符,通过字符的形式引入图片。一般都是一些需要和网页同时加载的图片才会使用base64

百度搜索base64图片在线转换,将要转换的图片上传,这个工具就会将图片转化成字符,然后复制这个字符粘贴到img标签里作为src值,这样图片就会和网页同时加载

 运行结果:

 

2.内联框架:用于向当前页面中引入一个其他页面

<iframe>

   src        指定要引入的网页的路径

frameborder  指定内联框架的边框 (值为0或1)

 

运行结果:

 

3.音视频标签

<audio>    用来向页面中引入一个外部的音频文件的。音频文件引入时,默认情况下不允许用户自己控制播放停止

属性

controls   是否允许用户控制播放,无值(有这个属性用户就能控制播放)

autoplay   音频是否自动播放,无值(如果设置了autoplay属性则音频在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音频进行播放)

loop  音乐是否循环播放,无值

src  引入音频路径 

 

 除了通过src指定外部文件的路径以外,还可以通过嵌套source标签来指定文件路径

 source标签和audio标签组合使用时可插入多个音视频和文字,浏览器解析时会按顺序解析这些音频,当能解析到一个音频时,其他音频就不会被识别不会在网页显示出来。若这些音频浏览器都不支持则会显示文字。(一定程度解决浏览器兼容性问题)

<embed>标签用于ie8版本浏览器的用于引入音频

 

 <video>      用于向网页引入一个视频,使用方式基本和audio一样

引入视频时也可使用<iframe>标签,这种方式不占用本地服务器存储空间,节约成本 

 在腾讯视频上找到一个视频复制他的链接:

 运行结果:

 

 

举报

相关推荐

0 条评论