HTML 学习记录（五）

图片标签：将外部图片引入页面中

img 标签：自结束标签  属于替换元素（介于块元素和行内元素之间）显示的不是img本身，而是img所引入的外部资源

src 属性：图片路径，内部图片与超链接的路径规则一样

        外部图片粘贴图片的绝对路径（右键点击复制图片链接/地址，涉及到版权问题）

alt 属性：图片的描述，默认情况下不会显示在页面上，有的浏览器会在图片无法加载时显示

        搜索引擎会根据alt里的内容来识别图片的内容，如果没有这个属性，搜索引擎不会收录

width 属性：指定图片的宽度

height 属性：指定图片的高度 单位都是像素

如果宽度和高度只修改了一个，另一个会等比例修改，一般情况下不建议修改图片的大小（大图缩小，浪费内存；小图放大，图片失真；最好是要多大裁剪多大，但是在移动端经常要进行缩放）

图片的格式：

原则：效果一样用小的，效果不同用效果好的

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

gif:             支持的颜色比较少，支持简单透明，支持动图           ----颜色单一图片、动图

png:           支持的颜色丰富，支持复杂透明度，不支持动图            ----适用于网页

 webp:       谷歌新推出专门用来表示网页中的图片的格式   ----具备以上优点且很小，兼容差

base64：  对图片进行编码，可以直接将图片转换为字符，通过字符的方式来引用到页面

                一般都是一些需要与网页一起加载的图片才使用base64

内联框架：向当前页面中引入一个其他页面

iframe 标签：其中的网站不会被搜索引擎检索到

src：指定要引入的网页的路径

frameborder：内联框架的边框

音频视频：引入外部的音视频文件

audio标签：音频引入，默认情况下是不允许用户自己播放和停止的，所以看不见

src属性：        指定音频的路径

controls属性：是否允许用户控制播放，不用给值，默认为FALSE

autoplay属性：设置自动播放，但是目前大部分浏览器均不支持自动播放，基本没啥用

loop属性：        循环播放

除了使用src指定外部音频的路径，还可以通过source，这样子的好处是，在不支持播放的浏览器里，只会忽略到播放器，但是不会忽略掉文字，这样就可以起到提示作用，也可以指定多个source（可以解决不同的浏览器支持的视频音频格式不同的问题，会优先使用有效的第一个）。写法如下

 

audio的兼容性

video标签:向页面中引入视频，使用方式与audio基本一样

在网上做一个服务器或者一个固定的IP，都需要自费，比较方便的方式是去‘’XX云的供应商去买服务器，主要包括服务器和带宽（网络），宽带和机器都是需要收费的项目。买的带宽和磁盘空间都是有限的，但是音视频文件占用的内存空间都比较大，且为了避免卡顿也需要一个比较快的宽带，因此就要投入更多的资金。因此音视频不会直接放到自己的服务器中，而是通过购买一些第三方产品进行托管自己的音视频文件，如此一来成本降低了很多。另一种方式是通过把音视频传到类似于优酷这种的视频软件，然后把视频的网址引入到页面中就可以。

 直接将复制后的内容插入到页面中就可以，这时候就是访问对应视频的服务器，不占用自己的。