可替换元素的规则及使用
一、图片
想要在页面上展示图片使用img标签
img （ 空元素、自闭合元素） 没有元素内容和结束标记
<img src="../IMG/tounao.jpg" alt="帅" title="帅的一匹"
src：属性值是图片的地址
title：为属性时，鼠标移入图片，会展示title的属性值
alt： 当图片无法展示时，alt的属性值会显示到页面上（用户体验 当引用不同的重置文件时alt会不显示）
图片语义化：
figure是父元素
img是子元素
figcaption是子元素（代表的是图片说明）
<figure> <img src="./IMG/miqi.jpg" alt="我是米奇"> <!-- 图片说明 --> <figcaption> 我是米奇XXXXXXXX </figcaption> </figure>
一张图片上，点击不同区域时，跳转到不同页面
map父元素
area区域
step1:img与map相关联
img的usemap属性值与map的name或id相同
step2:添加area标签
进行区域的划分
shape属性的取值： 圆形 circle 矩形 rectangle多边形 poly
step3:设置coords坐标
当shape的值是circle:先给中心点坐标（XY轴），现在圆的半径
当shape的值是rectangle:
A方案： 一共设置4个值，前2个是左上角的坐标，后2个是右下角的坐标
B方案：一共设置4个值，前2个是右上的坐标，后2个是左下角的坐标
注：对角线即可实现距形区域
当shape的值是poly:每个连接点的XY轴
step4:添加不同区域的跳转地址，即设置href的属性值。
<img src="../Demo" alt="" usemap="#F68"> <map name="F68" id="F68"> <area shape="circle" coords="450,215,37" href="../HTML/列表.html"> <area shape="rectangle" coords="108,423,42,500"href="../HTML/语义化.html"> <area shape="poly" coords="666,433,694,424,725,436,728,476,697,499,665,473" href="../HTML/样式.html">
</map>
为了解决兼容性：
有一些浏览器usemap关联的是name的值，还有一些浏览器关联的是id的值
二、audio音频
audio音频
<audio src="../gotime.mp3" controls loop autoplay muted></audio>
属性 src=“音频的地址”
controls在页面上显示音频的播放控件
loop当前音频循环播放
atuoplay当前音频自动播放 （Google为了提升用户体验）
muted 当前音频为静音状态（为了实现自动播放，必须添加 muted ，否者自动播放无效）
三、video视频
<video src="./Video/herocute.mp4" controls autoplay muted></video>
属性 src=“视频的地址”
controls在页面上显示音频的播放控件
loop当前音频循环播放
atuoplay当前音频自动播放 （Google为了提升用户体验）
muted 当前音频为静音状态（为了实现自动播放，必须添加 muted ，否者自动播放无效）
注：当前的HTML及CSS代码只能实现基础的页面展示，进阶版和高阶版需等待JS（交互效果）来实现。