HTML标签结构1.2（媒体标签：图片标签、音频标签、视频标签）

在讲标签前介绍一下路径。

场景：页面需要加载图片、音频等，需要先找到对应图片。

一般情况下大多使用相对路径。

 注：        ./  当前

                 ../  上一级 

                 ../../  上两级

1，图片标签（单标签）

使用场景：在网页中显示图片

代码：

    <!-- 当前目录 两个等效 --><img src="目标图片.jpg" ><img src="./目标图片1.jpg" ><!-- 上一级目录 --><img src="../目标图片2.jpg" ><!-- 上两级目录 --><img src="../../目标图片3.jpg" >

 属性名：src  属性值：“路径”

展示效果：

 这里的width和height为图片宽度和高度，如果只设置了一个，另一个变量会等比例缩放。若同时设置，设置不当此图片可能会变变形，影响美观。

图片标签其他属性：

alt：替换文本。图片加载失败时显示alt文本，图片加载成功则不会显示。比如路径错误无法显示图片。

展示效果：

 由于当前目录不存在目标图片1所以图片无法加载。

title：提示文本。当鼠标悬停时，才显示的文本。

 2，音频标签

使用场景：在网页中插入音频。

标签常见属性：

 注意点：音频标签目前支持的三种形式：MP3、Wav、Ogg

代码：

 网页展示效果：

 3，视频标签

使用场景：在页面中插入视频。

标签常见属性：

注：视频标签播放目前支持的三种形式：MP4、WebM、Ogg

代码：

页面展示效果：