HTML学习笔记(三)

阅读数: 次 2022-01-06

图片标签
图片格式
内联框架
音视频

图片标签

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

属性：
* src 属性指定的是外部图片的路径(路径规则和超链接是一样的)

<!-- 引入内部图片 -->
<img src="./图片/20200219035605_ejpkt.gif">
<!-- 引入外部网页上的图片，一般不建议直接引用 -->
<img src="https://img0.baidu.com/it/u=2314600222,1003014148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" >

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

1 2	<!-- 如果图片的路径错误无法显示时，会显示对图片的描述 --> <img src="./图片/20200219035605_ejpkt2.gif" alt="松鼠">

如上代码在网页中的呈现结果为：

* width 图片的宽度(单位是像素)
* height 图片的高度
宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意：
一般在pc端，不建议修改图片的大小，需要多大的图片就通过绘图工具裁剪多大，但在移动端，经常需要对图片进行缩放(大图缩小)

图片格式

jpeg(jpg):支持的颜色比较丰富，不支持透明效果，不支持动图(一般用来显示照片)

gif:支持的颜色比较少，支持简单透明，支持动图(一般用来颜色单一的图片，动图)一般比较小

png:支持的颜色丰富，支持复杂透明，不支持动图(颜色丰富，复杂透明图片，专为网页而生)

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

base64：将图片使用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的，效果不一样，用效果好的

内联框架

用于向当前页面中引入一个其他页面(相当于在一个网页中嵌套了另一个网页)
使用标签iframe

属性：

src 指定要引入网页的路径

frameborder 指定内联框架的边框，0表示无缝隙，1表示有缝隙

1	<iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>

## 音频 audio 标签用来向页面中引入一个外部的音频文件,音视频文件引入时，默认情况下不允许用户自己控制播放停止 >属性： >* controls 是否允许用户控制播放 >* autoplay 音频文件是否自动播放，如果设置autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放 >* loop 音乐是否循环播放

1	<audio src="./source/audio.mp3" controls autoplay loop>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件

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

## 视频 video 标签用来向网页中引入一个视频，使用方式和video基本一样

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

src也可以指向外部文件：