大约 3 分钟
多媒体标签：img
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的多媒体标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>多媒体标签：img</h1>
<!--
img标签
属性名 属性值
src 图片的地址、路径(相对和绝对)
width 图片的宽度(单位：像素) 100px 1366px px=pixel
height 图片的高度(单位：像素)注意：不推荐宽高同时设置
alt 图片加载失败时提示的信息
title 鼠标移入弹出信息
-->
<img src="./images4/2.jpg" width="500px" height="500px" title="范冰冰"/>
</body>
</html>图像中的热区
<!DOCTYPE html>
<html>
<head>
<title>图像中的热区</title>
<meta charset="utf-8" />
</head>
<body>
<h1>图像的热区</h1>
<!--
注意点：
1.图像是原大小
2.需要使用map定义一个地图
3.需要使用area定义地图的区域
img
属性名： 属性值
usemap 使用一个地图的id
map 地图
属性名： 属性值
id 定义一个标识(唯一的)
area 区域
属性名 属性值
shape 区域的形状(circle、rectangle)
coords 区域的坐标(rectange 左上角和右下角)
(circle 圆点坐标和半径宽度(都是像素))
-->
<!--1.引入原图片-->
<img src="./images4/5.jpg" usemap="#meinv"/>
<!--2.定义一个地图-->
<map id="meinv">
<!--3.定义一个区域-->
<area shape="rect" coords="240,90,540,415" onclick="alert('别看了，人家害羞！')"/>
</map>
</body>
</html>音频、视频标签
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的多媒体标签：音频、视频标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>音频、视频标签</h1>
<!--
音频标签：audio
属性名： 属性值：
controls controls(显示进度条)
src 引入一段音频的路径
autoplay autoplay当前页面加载完毕自动播放
-->
<audio controls="controls" src="./audio_video/sxgn.mp3"></audio>
<!--音频控制条-->
<audio controls="controls">
<!--加载多个资源-->
<source src="./audio_video1/wukong.mp3" />
<source src="./audio_video1/sxgn.mp3" />
<source src="./audio_video/apple.mp3" />
你的浏览器太破了！该换了！该扔了
</audio>
<!--
视频标签：video
属性名： 属性值：
controls controls(显示控制条)
src 引入一个视频文件的路径
width 修饰视频的宽度
autoplay 自动播放视频
poster 修改视频默认背景图片
-->
<video controls="controls" poster="./images4/88.jpg" width="500" src="./audio_video/pian.mp4"></video>
<!--视频控制条-->
<video controls="controls" width="500">
<!--加载多个视频资源-->
<source src="./audio_vide1o/pian.mp4" />
<source src="./audio_video/tezhong.mp4"/>
你的浏览器该扔了！！张翰 郑爽
</video>
<!--
引入一个插件 embed
-->
<embed src="./audio_video/haowan.swf" />
</body>
</html>HTML当中的表格：table
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的表格：table</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML当中的表格：table</h1>
<!--
table表格标签：
属性名： 属性值：
border 边框(单位：像素)
width 表格的宽度（单位：像素）
height 表格的高度（单位：像素）
cellspacing 单元格与单元格之间的间距（单位：像素）
cellpadding 文字与单元格之间的间距(单位：像素)
align 相对父级元素进行对齐
caption表体标签：
tr一行：<tr></tr>
属性名： 属性值：
align left、right、center
th表头：<th></th> th修饰的内容，自动居中，加粗
td单元格<td></td> td是一行当中的一个单元格
属性名： 属性值：
rowspan 跨行合并
colspan 跨列合并
align 对齐方式(left、right、center)
-->
<table border='1' width='500' cellspacing="0" cellpadding="10" align="center">
<caption>人民的艺术家</caption>
<tr>
<th>排名</th>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
<tr align="center">
<td rowspan="2">1</td>
<td>苍老师</td>
<td>18</td>
<td>157cm</td>
</tr>
<tr align="center">
<td>波老师</td>
<td>19</td>
<td>163cm</td>
</tr>
<tr align="center">
<td>3</td>
<td>小泽老师</td>
<td>20</td>
<td>160cm</td>
</tr>
<tr align="center">
<td>4</td>
<td>杨老师</td>
<td>21</td>
<td>165</td>
</tr>
<tr align="center">
<td colspan="2"></td>
<td align="right">平均身高：</td>
<td align="left">161.25</td>
</tr>
</table>
</body>
</html>