在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 >之间的代码:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-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><bodybgcolor="#000000"><div><imgsrc="191729-163230944924ea.jpg"alt=""height="676"width="1202"><imgsrc="012219-1643563339f065.jpg"alt=""height="676"width="1202"></div></body></html>
下面就是添加背景音乐的代码:
下面是全部的代码:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-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><bodybgcolor="#000000"><audioautoplay="autoplay"loop="loop"preload="auto"controls="controls"src="Strictlyviolin荀博 - 无感.mp3"></audio><div><imgsrc="191729-163230944924ea.jpg"alt=""height="676"width="1202"><imgsrc="012219-1643563339f065.jpg"alt=""height="676"width="1202"></div></body></html>
三、总结
- 什么是HTML?
- 什么是PHP?
- 了解并熟悉重要标签和属性的定义及用法。
- 做到多看多练习。
版权归原作者 谢君@不负梦想 所有, 如有侵权,请联系我们删除。