HTML（PHP)添加水平翻转图片和背景音乐

苑同学爱编程

已于 2022-02-06 23:06:17 修改

阅读量1.4k

点赞数 6

文章标签： php html 前端

于 2022-02-06 00:06:09 首次发布

本文链接：https://blog.csdn.net/weixin_59064057/article/details/122794180

版权

在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？
了解并熟悉重要标签和属性的定义及用法。
做到多看多练习。

苑同学爱编程

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML（PHP)添加水平翻转图片和背景音乐

在HTML（PHP)中，我们可以使用许多种方法在HTML(PHP)添加背景音乐和图片，也可以添加其他的东西，比如视频等其中我们会用到许种类型的标签和属性，我把重要的标签会一一列出来温馨提示：背景音乐可能在其他的浏览器无法正常播放...
复制链接

扫一扫