在HTML（PHP)中，我们可以使用许多种方法在HTML(PHP)添加背景音乐和图片，也可以添加其他的东西，比如视频等。
其中我们会用到许种类型的标签和属性，我把重要的标签会一一列出来。

文章目录

一、简介
二、代码
三、总结

一、简介

什么是HTML？什么是PHP？

二、代码

看代码前，先了解一下其中重要的标签和属性

< meta >标签定义和用法

< name >属性定义和用法

< content >属性

< style >标签定义和用法

< div> 标签定义和用法

margin属性定义和用法

< img >标签定义和用法

< src >标签定义和用法

下面就是添加就是添加水平翻转的代码了：
放在< head >和< /head >之间的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>又EMO了吧</title>
    <style>
        /* backface-visibility */
        
        div {
            width: 1202px;
            height: 676px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            width: 1202px;
            height: 676px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
			}
    </style>
</head>
<body bgcolor="#000000">
    <div>
        <img src="191729-163230944924ea.jpg" alt="" height="676" width="1202">
        <img src="012219-1643563339f065.jpg" alt="" height="676" width="1202">
        
    </div>
</body>
</html>

下面就是添加背景音乐的代码：
在这里插入图片描述
下面是全部的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>又EMO了吧</title>
    <style>
        /* backface-visibility */
        
        div {
            width: 1202px;
            height: 676px;
            margin: 100px auto;
            position: relative;
        }
        
        div img {
            width: 1202px;
            height: 676px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        
        div:hover img {
            transform: rotateY(180deg);
        }
			}
    </style>
</head>
<body bgcolor="#000000">
        <audio autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="Strictlyviolin荀博 - 无感.mp3">
        </audio>
    <div>
        <img src="191729-163230944924ea.jpg" alt="" height="676" width="1202">
        <img src="012219-1643563339f065.jpg" alt="" height="676" width="1202">
        
    </div>
</body>
</html>