多媒体标签-CSDN博客

本文链接：https://blog.csdn.net/xjj19999272/article/details/115873769

多媒体标签

<img>标签

<img>标签用于在网页中插入图片。看一段示例代码：

<body>
    <h1>美丽风景图片</h1>
    <p>
        <img src="images/shanshui.jpg" alt="山水图像" width="50%">
    </p>
    <p>
        <img src="images/riluo.jpg" alt="日落" width="300">
    </p>
    <p>
        <img src="images/hushui.jpg">
    </p>  
    <p>
        <img alt="优美风景画" src="https://img01.jituwang.com/201103/170742-2011031U44215.jpg">   
    </p>  
</body>

img是image（图片）的缩写，src是source来源的缩写，所以src的值应是图片的存储目录和完整的文件名且必须加上图片的后缀名。比如上面文件的后缀全是.jpg。

网页上支持的格式有.bmp、.gif、.jpg、.png、.svg、.webp。

需要注意的是，图片一定要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中。

绝对路径与相对路径

以上述图片为例相对路径是描述从网页出发如何找到图片。随着网页和图片的位置关系不同，插入图片的代码随之改变，如果需要回退层级，使用“…/”这样的写法，回退几层写几个“…/”。比如下面这行代码显示的就是相对路径。

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

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

<img alt="优美风景画" src="https://img01.jituwang.com/201103/170742-2011031U44215.jpg">

<img>标签的alt属性

alt 属性是alternate“替代品”的缩写，它是对图像的文本描述，不是强制性的.如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本。

<img>标签的width、height属性

width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位。可以直接写值，也可以输入比例。如：

<img src="images/shanshui.jpg" alt="山水图像" width="50%">
<img src="images/riluo.jpg" alt="日落" width="300">

可以看到上面只设置了宽度没有设置高度，这是因为如果省略其中一个属性，则表示按原始比例缩放图片。

超级链接

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

<a>标签

看一行示例代码：

<a href="text1.html">去我的优美图片网页</a>

可以看到，<a>标签有一个href属性，a是anchor（锚）的缩写，href是英文hypertext reference （超文本引用）的缩写。代码效果如下：
在这里插入图片描述
href属性同样支持相对路径和绝对路径，上面代码显示就是相对路径，下面示例代码显示就是绝对路径。

<a href="https://www.baidu.com">去百度网站</a>

<a>标签第二个属性是title属性，title属性用于设置鼠标的悬停文本。示例代码如下：

<a href="https://www.baidu.com" title="百度一下，你就知道">去百度网站</a>

代码效果如下：
在这里插入图片描述
<a>标签的还有一个target属性，target属性设置为blank，即可在新标签页中打开网页。示例代码如下：

<a href="shuiguo.html" target="_blank">水果</a>

页面内描点

较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”。当网址后面添加#时，页面将自动滚动到锚点所在位置。示例代码如下：

<h2 id="shanshui">山水景观</h2>

其他页面的超级链接，可以链接到指定锚点。示例代码如下：

<a href="text1.html#shanshui">去看山水景观</a>

下载链接、邮箱链接、电话链接

1、指向exe、zip、rar等文件格式的链接，将自动成为下载链接，示例代码如下：

<a href="zip">普通下载</a>

2、有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件，示例代码如下：

<a href="mailto：123456@qq.com">给这个人发邮件</a>

3、有tel:前缀的链接是电话连接，系统将自动打开拨号盘，示例代码如下：

<a href="tel:123456789">给他打电话</a>

音频和视频

以前，在网页中插入音频和视频需要借助Flash，你应该遇到过在浏览器中播放视频提示你需要下载flash插件，但因为安全问题，flash创建的网站、游戏及其他项目，很容易被攻破，造成资料泄露、财产损失等，还有Flash加载内容过多，会导致页面打开的速度变慢。今天，Flash技术已经快要被淘汰，被更开放的HTML5所取代，HTML5可以轻松在网页中插入音频和视频。

<audio>标签

在浏览器中插入音频需要使用<audio>标签，兼容到IE9，示例代码如下：

<audio controls src="../- Soler - 风的季节.mp3" autoplay loop>抱歉，您的浏览器不支持audio标签，请升级浏览器</audio>

controls 属性规定浏览器应该为音频提供播放控件。如果设置了该属性，则规定不存在作者设置的脚本控件。src是source来源的缩写，这里src的值跟图片一样需要存储目录和完整的文件名且必须加上音频的后缀名。常用音频格式是mp3和ogg格式。

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

声明loop属性，将循环播放音频。

<video>标签

在浏览器中插入视频需要使用<video>标签，兼容到IE9，示例代码如下：

<video src="../2 毛不易 - 像我这样的人 (Live).mp4" controls>抱歉，您的浏览器不支持video标签，请升级浏览器</audio>

<video>标签的几个属性跟<audio>是一样的，常用视频格式是mp4、ogv、webm等格式。

需要注意的是，对于不同格式的视频，也有不同的要求，比如mp4格式的视频，需要编码格式为h264才行。