1.图片标签
图片标签用于向当前页面中引入一个外部图片,使用img标签来引入外部图片,img标签是一个自结束标签,img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
img标签属性:
src 指定外部图片的路径
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示这些描 述。搜索引擎也会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所 识别。
width 图片的宽度(单位为像素)
height 图片的高度 (图片宽度和高度如果只修改其中一个,则另一个会等比例缩放)
注意:一般在Pc端不建议修改图片大小,需要多大图片就裁多大。但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
jpeg(jpg)
-支持的颜色比较丰富,不支持透明效果,不支持动图
-一般用来显示照片
gif
-支持的颜色比较少,支持简单透明,支持动图
-适用于颜色单一的图片,动图
png
-支持的颜色丰富,支持复杂透明,不支持动图
-适用于颜色丰富,复杂透明的图片(专为网页而生)
webp
-谷歌新推出的专门用来表示网页中的图片的一种格式,具备其他图片格式所有优点,而且文件 还特别小,兼容性不好
base64
-将图片使用base64编码,这样可以将图片转换成字符,通过字符的形式引入图片。一般都是一些需要和网页同时加载的图片才会使用base64
百度搜索base64图片在线转换,将要转换的图片上传,这个工具就会将图片转化成字符,然后复制这个字符粘贴到img标签里作为src值,这样图片就会和网页同时加载
运行结果:
2.内联框架:用于向当前页面中引入一个其他页面
<iframe>
src 指定要引入的网页的路径
frameborder 指定内联框架的边框 (值为0或1)
运行结果:
3.音视频标签
<audio> 用来向页面中引入一个外部的音频文件的。音频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放,无值(有这个属性用户就能控制播放)
autoplay 音频是否自动播放,无值(如果设置了autoplay属性则音频在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音频进行播放)
loop 音乐是否循环播放,无值
src 引入音频路径
除了通过src指定外部文件的路径以外,还可以通过嵌套source标签来指定文件路径
source标签和audio标签组合使用时可插入多个音视频和文字,浏览器解析时会按顺序解析这些音频,当能解析到一个音频时,其他音频就不会被识别不会在网页显示出来。若这些音频浏览器都不支持则会显示文字。(一定程度解决浏览器兼容性问题)
<embed>标签用于ie8版本浏览器的用于引入音频
<video> 用于向网页引入一个视频,使用方式基本和audio一样
引入视频时也可使用<iframe>标签,这种方式不占用本地服务器存储空间,节约成本
在腾讯视频上找到一个视频复制他的链接:
运行结果: