笔记三
1、图片标签
用于引入一个外部图片
(1)使用img标签引入,img 标签是一个自结束标签
img没有独占一行属于替换元素(行内元素和块元素的特点之和)
(2)src属性:指定外部图片的路径(路径规则和超链接规则一样)路径之间用“/”隔开
若要直接引用:复制图片地址
(3)alt:图片的描述
默认情况不会显示,有些浏览器会在图片无法加载时显示
主要用于搜索引擎对图片内容的识别 (若没有alt属性,图片不会被搜索引擎收录)
(4)width:图片宽度(以像素为单位)
(5)height:图片高度
注:宽度和高度若只改一个,则另一个会等比缩放(建议就改一个)
一般情况下不建议修改图片大小,但在移动端,经常对图片进行缩放(大图缩小),
2、图片格式
(1)常见的图片格式:
- jpeg(jpg):支持颜色丰富的图片,不支持透明效果,不支持动图
- 一般用于显示
照片
- gif:支持颜色较少,简单透明,动图
- png:支持颜色丰富,复杂透明(专为网页设置),不支持动图
- webp:谷歌新推出的专门用来表示网页图片中的一种格式,具备其它图片格式的所有优点,颜色丰富,支持复杂、透明、动图,且所占内存小
缺:兼容性不好 - base64:将图片进行编码(将数据加密,将图片转换成字符,通过字符的形式来引入图片), 一般是一些需要和网页一起加载的图片才会使用base64(与网页加载同步,需要图片加载快)
效果一样用小的
效果不同用效果好的 (考虑所占内存!)
3、内联框架(iframe)
替换(一般不会被浏览器解析,所以很少使用)
用于在当前页面中引入其他页面
(1)src:指定引入网页的路径
(2)frameborder:指定内联框架的边框
4、音视频播放:audio(替换元素)
用于引入外部音频文件
。音视频文件引入时,默认情况下不允许用户自己控制播放终止
属性:
通过src指定外部文件的路径
- 标签
- controls:是否允许拥护控制播放(不用给值,只要看有没有)
- autoplay:音频文件是否自动播放
若设置了autoplay,在打开页面时会自动播放,但大部分浏览器第一次不会自动对音乐进行播放,播放过后再刷新就可以 - loop:音乐是否循环播放
- source也可用来指定路径(效果一样,有些浏览器可识别)
- embed (放audio里,放source最后)
:一般浏览器都支持,音频都会自动播放(不易关闭自动播放)
要写width,height(不然第二次打开时,播放器会缩小)
兼容性问题:不同浏览器支持不同的格式,所以写两行source:mp3和ogg(一行不写就另一行)
5、视频
(使用方式与audio差不多)
以上多为相对路径
补充:因资金问题,音频、视频一般不直接放在服务器中,买第三方产品负责托管音频、视频(成本较少);
或是把音频、视频文件传进视频网站,可自行引入(自行设置播放界面大小);
或是引入其他网站的视频