前端-Day-04

一、图片标签

用于向当前页面引入一个外部图片

<!--
	使用img标签来引入外部图片，img标签是一个自结束标签
	img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
	属性：
		src 指定的是外部图片的路径（路径规则和超链接是一样的）
		alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片 ，如果不写alt属性则图片不会被搜索引擎所引用
		width 图片的宽度（单位是像素）
		height 图片的高度
			-宽度和高度中如果只修改了一个，则另一个会被等比例缩放
		注意：
			一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
			但是在移动端，经常需要对图片进行缩放（大图缩小）
-->
<img width="200" src="./img/benwu.jpg" alt="吴思贤">
	

二、图片的格式

<!--
	图片的格式：
	jpeg（jpg）：
		-支持颜色比较丰富，不支持透明效果
		-一般用来显示照片
		
	gif：
		-支持的颜色比较少，支持简单透明，支持动图
		-颜色单一的图片，动图
		
	png：
		-支持的颜色丰富，支持复杂透明，不支持动图
		-颜色丰富，复杂透明图片（专为网页而生）
		
	webp：
		-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
		-它具备其他格式的所有优点，而且文件还特别小
		-缺点：兼容性不好
		
	base64:
		-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
		-应用于一些需要和网页一起加载的图片

	规则：
		-效果一样，用小的
		-效果不一样，用效果好的
-->

三、内联框架

iframe：用于向当前页面中引入一个其他页面

<!--
	src 指定要引入的网页的路径
	frameborder 指定内联框架的边框
		-0为透明
		-1为显示
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

四、音频播放

1、audio 标签用来向页面中引入一个外部的音频文件
音视频引入时，默认情况下不允许用户控制播放或停止

<!--
	属性：
		controls 是否允许用户控制播放
		autoplay 音频文件是否自动播放
			-如果设置了autoplay，则音乐会在打开页面时自动播放
			-但目前来讲大部分浏览器不会自动播放音乐
		loop 音乐是否循环播放
-->
<audio src="./source/audio.mp3" controls autoplay loop></audio>

2、source 指定文件路径

<!--
	可以同时写多个source，但有且只会执行一个（从上到下），当都不能执行时，则显示文字。
-->
<audio controls>
	对不起，您的浏览器不支持播放音频！请升级浏览器！
	<source src="./source/audio.mp3">
	<source src="./source/audio.ogg">
</audio>

3、embed
几乎所有浏览器都支持embed，embed是自动播放的。

<!--
	type 的书写格式：文件的大类型/文件的具体格式
	注意：
	使用该标签来播放音频时通常需要写上 width 和 height
-->
	
<embed src="./source/audio.mp3" type="audio/mp3" width="200" height="50">

五、视频播放

1、video 标签来向页面引入一个视频文件
使用方式和audio基本是一样的

<video controls>
	<source src="./source/flower.webm">
	<source src="./source/flower.mp4">
	<embed src="./source/flower.mp4" type="video/mp4">
</video>