HTML多媒体标签

相对路径：

描述从网页出发，如何找到图片。随着网页和图片的位置关系不同，插入图片的代码随之改变。如果需要回退层级，使用“../”这样的写法。

<img src="./images/gugong.jpg">

绝对路径：

描述图片精准地址。不管网页在哪里，绝对路径不需要改变。

<img src="https://www.arbor.com/static/img/index/logo-recommended.png">

图片 <img>

<img>标签用来在网页中插入图片，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中。

图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传。

• <img>标签的src属性，是source(来源)的缩写，参数是图片的存储目录和完整文件名。
• <img>标签的alt属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的。如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本。供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本。
• <img>标签的width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位。如果省略其中一个属性，则表示按原始比例缩放图片。

网页上支持的图片格式：

<img src="./images/tupian.jpg" alt="这是一个图片">
<img src="./images/tupian.jpg" alt="这是一个图片" width="200" title="这是图片的标题">

超级链接 <a>

超级链接是将网页和网页连结到一起的方法，是互联网成“网”的原因，使用<a>标签制作超级链接。

• href属性支持相对路径和绝对路径
• title属性用于设置鼠标的悬停文本
• target属性设置为blank，即可在新标签页中打开网页，HTML4代，blank之前有一个下划线
• 图片也可以设置超级链接，只需要用<a>标签包裹img标签即可
• 较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”，当网址后面添加#时，页面将自动滚动到锚点所在位置，其他页面的超级链接，可以链接到指定锚点

<h1 id="wuxi">无锡美景</h1>
<a href="./lvyou.html#wuxi">看无锡美景</a>

• 指向exe、zip、rar等文件格式的链接，将自动成为下载链接
• 有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件

<a href="mailto:me@test.com">给小编发邮件</a>

• 有tel:前缀的链接是电话连接，系统将自动打开拨号盘

<a href="tel:12306">打电话买火车票</a>

音频 <audio>

在浏览器中插入音频需要使用

• controls：显示播放控件

<audio controls src="./音频地址">
抱歉，您的浏览器不支持audio标签，请升级浏览器  <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</audio>

• autoplay属性：声明autoplay属性，音频会自动播放，常用的浏览器为了不打扰用户，可能会不允许自动播放音乐，必须让用户手动点击之后才能播放
• loop属性：声明loop属性，将循环播放音频

视频 <video>

在浏览器中插入视频需要使用<video>标签，兼容到IE9。常用音频格式是mp4、ogv、webm等格式。

• controls：显示播放控件

<video controls src="./视频地址" loop autoplay>
抱歉，您的浏览器不支持video标签，请升级浏览器  <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</video>

• autoplay属性：声明autoplay属性，视频会自动播放
• loop属性：声明loop属性，将循环播放视频
• muted：静音
• poster：预览图像

<video src="./video.mp4" poster="xxx.jpg">
  <source src="./media/7.mp4" type="video/mp4">
  <p> 您的浏览器不支持视频播放 </p>
  <!-- 兼容性写法 -->
</video> 

区块标签

HTML5推出了众多新的区块标签。