HTML——图像标签及多媒体标签

一、图像标签（在网页中插入图片）

图片------属性标签

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬浮在图片上的时候显示文字
width	图片宽度	值为数字，没有单位
height	图片高度	值为数字，没有单位

例子：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <!-- 当网速不好或图片路径错误是显示 -->
    <img src="./pluto1.jpg" alt="冥王星">

    <img src="./pluto.jpg" title="冥王星">

    <!-- 浏览器缩放图片默认等比例缩放 -->
    <img src="./pluto.jpg" width="100">
    <img src="./pluto.jpg" height="500">
</body>
</html>

注：图片文件应与html文件放于同一文件夹 时，src使用相对路径

若图片文件应与html文件不在同一文件夹 时，src使用绝对路径

二、超链接标签（点击跳转到其他页面）

<a href="需要跳转的地址"> $自定义文本$ </a>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <a href="https://www.baidu.com/">跳转到百度</a>

    <!-- target属性可以新建一个窗口显示 -->
    <a href="./图像标签.html" target="_blank">跳转到图像标签</a>
</body>
</html>

三、多媒体标签

1、音频标签

属性	作用	特殊说明
src	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提高用户体验，浏览器一般会禁用自动播放功能

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<body>
    <!-- 若没有controls属性，显示的网页上是空白的 -->
    <audio src="./pluto.ogg" controls loop autoplay></audio>
</body>
</html>

2、视频标签

autoplay	自动播放	为了提高用户体验，浏览器支持在静音状态下自动播放

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<body>
    <video src="./1.mp4" controls loop muted autoplay></video>
</body>
</html>