在HTML（PHP)中，我们可以使用许多种方法在HTML(PHP)添加背景音乐和图片，也可以添加其他的东西，比如视频等。
其中我们会用到许种类型的标签和属性，我把重要的标签会一一列出来。
温馨提示：背景音乐可能在其他的浏览器无法正常播放。
一、简介
什么是HTML？什么是PHP？
HTML的定义：
1.HTML是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现Web页面。
2.HTML称为超文本标记语言，是一种标识性的语言。
3.它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
PHP的定义：
1、PHP是Hypertext Preprocessor(超文本预处理语言)的缩写
2、PHP是一种在服务器端执行的HTML内嵌式的脚本语言
3、PHP语法简单、易于学习、功能强大、灵活易用（特点）
二、代码
看代码前，先了解一下其中重要的标签和属性
< meta >标签定义和用法
< meta >元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
< meta >标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。
< name >属性定义和用法
< name >属性规定 input 元素的名称。
< name >属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了< name >属性的表单元素才能在提交表单时传递它们的值。
< content >属性
< content >属性设置文本或图像出现（浮动）在另一个元素中的什么地方。
< style >标签定义和用法
< style >标签用于为 HTML 文档定义样式信息。
在 < style >中，您可以规定在浏览器中如何呈现 HTML 文档。
< stype >属性是必需的，定义< style >元素的内容。唯一可能的值是 “text/css”。
< style >元素位于< head >部分中。
< div> 标签定义和用法
< div > 可定义文档中的分区或节（division/section）。
< div > 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。
用法
< div >是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 < div > 固有的唯一格式表现。可以通过 < div > 的 class 或 id 应用额外的样式。
不必为每一个 < div > 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 < div > 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
margin属性定义和用法
< margin >属性设置元素的外边距。
该属性可使用 1 到 4 个值：
如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。
如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。
如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。
< img >标签定义和用法
< img >元素向网页中嵌入一幅图像。
请注意，从技术上讲，< img > 标签并不会在网页中插入图像，而是从网页上链接图像。< img > 标签创建的是被引用图像的占位空间。
< img> 标签有两个必需的属性：< src >属性 和< alt >属性
< src >标签定义和用法
< img >元素向网页中嵌入一幅图像。
请注意，从技术上讲，< img > 标签并不会在网页中插入图像，而是从网页上链接图像。< img > 标签创建的是被引用图像的占位空间。
< img > 标签有两个必需的属性：< src >属性 和< alt >属性
下面就是添加就是添加水平翻转的代码了：
放在< 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>
三、总结
- 什么是HTML？
- 什么是PHP？
- 了解并熟悉重要标签和属性的定义及用法。
- 做到多看多练习。