前端-HTML5学习笔记四

日期：2021/12/26

所看视频链接：B站尚硅谷

内容：

P23_图片标签

<img src="" alt="" />

        自结束标签（替换元素——基于块与行内元素之间，具有两种元素的特点）
1.作用
        用于向当前页面中引入一个外部图片
2.属性：
        src        属性指定的是外部图片的路径（路径规则和超链接是一样的）
        alt         图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
                     搜索引擎会根据alt中的内容来识别图片，不写alt属性图片就不会被搜索引擎所收录
        width     图片的宽度（单位是像素px）
        height    图片的高度
                      宽度和高度只修改一个，另一个会等比例缩放
        注：
                一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁剪多大
                但是在移动端，经常需要对图片进行缩放（大图缩小）

P24_图片的格式

<img src="" alt=""/>

1.格式
        jpeg(jpg)
                支持的颜色比较丰富，不支持透明效果，不支持动图
                一般用来显示照片
        gif
                支持的颜色比较少，支持简单透明，支持动图
                颜色单一的图片、动图
        png
                支持的颜色丰富，支持复杂透明，不支持动图
                颜色丰富，复杂透明图片（专为网页而生）
        webp
                谷歌新推出的专门用来表示网页中的图片的一种格式
                具备其他图片格式的所有优点，而且文件还特别小
                缺点：兼容性不好
        base64
                将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
                一般都是一些需要和网页一起加载的图片才会使用base64
        注：
                一般网页加载时先加载网页的代码，然后加载图片之类的，有一定的延迟
                base64是让图片和代码一起加载
2.选择方法
        效果一样，用小的
        效果不一样，用效果好的

P25_内联框架

<iframe src="" frameborder="0"></iframe>

1.作用：
        用于向当前页面中引入一个其他页面
2.属性：
        src                      指定要引入的网页的路径
        width                   宽度
        height                  高度
        frameborder        指定内联框架的边框（‘0’无，‘1’有）

P26_音视频播放

1.音频

	<audio src=""></audio>

        1.作用：
                用来向页面中引入一个外部的音频文件
        2.引入时，默认情况下不允许用户自己控制播放停止
        3.属性：
                src                   音频文件路径
                controls           是否允许用户控制播放,显示进度条（没有值，只要存在即可）
                autoplay          音频文件是否自动播放（没有值，只要存在即可）
                                        如果设置了，则音乐正在打开页面时会自动播放；
                                        但是目前来讲大部分浏览器都不会自动对音乐进行自动播放
                loop                 音乐是否循环播放（没有值，只要存在即可）

	<audio>
		<source src=""/>
	</audio>

        1.作用：
                同上
        2.显示进度条

		<audio controls>
			<source src=""/>
		</audio>

        3.在不兼容的浏览器上不显示
        但是，

		<audio controls>
			对不起，您的浏览器不支持播放音频，请升级浏览器！
			<source src=""/>
		</audio>

                会在不兼容的浏览器上显示文字
        4.不知道浏览器兼容mp3或ogg时，可以这样

		<audio controls>
			对不起，您的浏览器不支持播放音频，请升级浏览器！
			<source src="xxx.mp3"/>
			<source src="xxx.ogg"/>
		</audio>

                不会同时出现mp3、ogg和文字，支持mp3会显示mp3；支持ogg会显示ogg；都不支持会显示文字

	<embed src="" type=""/>

        1.作用：
                同上
        2.任何版本浏览器均可使用，自动播放；样式windows的video
        3.必须设置width和height
        4.属性：
                type         音频 audio/mp3(ogg)
                                视频 video/mp4
        5.浏览器兼容（顺序）

		<audio controls>
			<source src="./source/xxx.mp3"/>
			<source src="./source/xxx.ogg"/>
			<embed src="./source/xxx.mp3" type="audio/mp3" width="xx" height="xx"/>
		</audio>

2.视频

	<video>
		<source src=""/>
	</video>

        1.作用：
                向网页中引入一个视频
        2.显示进度条

		<video controls>
			<source src="./source/xxx.mp4"/>
		</video>

        3.视频格式
                webm        谷歌新推出视频格式，清晰度高，内存小
        4.浏览器兼容（顺序）

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