Html中实现简单的初音未来-CFANZ编程社区

Html中实现简单的初音未来

首先简单准备一下所需要的材料（完整代码在文尾）

1.一首动听的歌曲

2.一个新建的文本

3.还有公主殿下的一张美图

接下来开始敲代码

<title>Hatsune Miku -sekai deichiban'ohimesama</title>

首先利用<title> 标签定义文档的标题。

title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

<style>
p.miku {
  text-align: center;
  color: #39C5BB;
  font-size: 300%;
}
</style>

再利用css来描述接下来下文要显示的字体，并定义为miku类

其中#39C5BB（葱绿）为官方定义的初音未来配色

<body background="miku.jpg">
<p class="miku">世界第一公主殿下</p>

定义网页的背景图片以及输出语句“世界第一公主殿下”（ワールドイズマイン）

<div style="position:fixed; bottom:0; right:0;">
<audio controls="controls">
<source src="世界第一公主殿下.mp3" type="audio/mpeg">
</audio>
</div>

定义audio播放器的位置，用于输出歌曲

<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

最后看下成品

点击播放按钮即可开始播放音乐

最后附上所有代码

<!DOCTYPE html> 
<html>
<head>
<title>Hatsune Miku -sekai deichiban'ohimesama</title>
<style>
p.miku {
  text-align: center;
  color: #39C5BB;
  font-size: 300%;
}
</style>
</head>
<body background="miku.jpg">
<p class="miku">世界第一公主殿下</p>
<div style="position:fixed; bottom:0; right:0;">
<audio controls="controls">
<source src="世界第一公主殿下.mp3" type="audio/mpeg">
</audio>
</div>
</body> 
</html>

0 条评论