上课笔记三

笔记三

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（不然第二次打开时，播放器会缩小）

注：若在audio和source间有文字，浏览器不支持时会显示文字，支持时会显示播放器

兼容性问题：不同浏览器支持不同的格式，所以写两行source：mp3和ogg（一行不写就另一行）

5、视频
（使用方式与audio差不多）
以上多为相对路径

补充：因资金问题，音频、视频一般不直接放在服务器中，买第三方产品负责托管音频、视频（成本较少）；
或是把音频、视频文件传进视频网站，可自行引入（自行设置播放界面大小）；
或是引入其他网站的视频