1.图片格式
jpeg（jpg）
支持的颜色比较丰富
不支持透明效果
不支持动图
一般用来显示照片
gif
支持的颜色比较单一
支持简单透明
支持动图
png
支持的颜色丰富
支持复杂透明
不支持动图
专为网页而生
webp
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
具备其他图片格式的所有优点，而且文件还特别的小
缺点：兼容性不好
内联格式
内联框架iframe，用于向当前页面中引入一个其他页面，
src指定要引入的网页的路径
frameborder指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0" ></iframe>
2.音频
audio 标签用来向页面中引入一个外部的音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls：是否允许用户控制播放
autoplay：音频文件是否自动播放
如果设置了autoplay，则音乐打开页面时会自动播放
但是目前来讲大部分浏览器不会打开对音乐进行播放
loop音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
source
除了通过src属性来指定外部文件的路径以外，还可以通过<source>元素来指定文件的路径
<audio controls autoplay loop> 对不起，您的浏览器不支持播放音频！请升级浏览器！ <source src="./source/audio.mp3" /> <source src="./source/audio.ogg" /> </audio>
embed
IE8 下不支持audio元素，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容。
这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。
<embed src="./source/audio.mp3" />
3.视频
使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的
4.综合使用案例(table)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>青春不常在</h1> <table width="500"> <!-- 第一行性别 --> <tr> <td> 姓名 </td> <td> <input type="text"> </td> </tr> <!-- 第二行生日 --> <tr> <td>性别：</td> <td> <label><input type="radio" name="gender"> <img src="imagesss/men.png" alt=""> 男</label> <label><input type="radio" name="gender"> <img src="imagesss/women.jpg" alt=""> 女</label> </td> </tr> <!-- 第三行所在地区 --> <tr> <td>生日：</td> <td><select> <option>--清选择年份--</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> </select> <select> <option>--请选择月份--</option> <option>一月</option> <option>二月</option> <option>三月</option> <option>四月</option> <option>五月</option> <option>六月</option> </select> <select> <option>--请选择日--</option> <option>一号</option> <option>二号</option> <option>三号</option> <option>四号</option> <option>五号</option> <option>号</option> </select> </td> </tr> <!-- 第四行 --> <tr> <td> 所在地区 </td> <td> <select> <option>北京</option> <option>上海</option> <option>南京</option> <option>河北</option> <option>河南</option> <option>西藏</option> </select> </td> </tr> <tr> <td> 婚姻状况 </td> <td> <label><input type="radio" name="som">离异</label> <label><input type="radio" name="som">已婚</label> <label><input type="radio" name="som">未婚</label> </td> </tr> <tr> <td>学历</td> <td><select> <option>小学</option> <option>中学</option> <option>大学</option> <option>研究生</option> <option>博士</option> </select></td> </tr> <tr> <td>中意的类型</td> <td><input type="checkbox">可爱 <label><input type="checkbox">性感</label> <input type="checkbox">清纯 <input type="checkbox">动人 </td> </tr> <tr> <td> 自我介绍： </td> <td> <textarea cols="100" rows="15"></textarea> </td> </tr> <tr> <td>
