用代码表达爱意：HTML5表白网页制作教程

创作时间:

2025-01-22 02:39:28

作者:

@小白创作中心

用代码表达爱意：HTML5表白网页制作教程

七夕节即将到来，你是否还在为如何向心爱的TA表白而烦恼？不妨试试制作一个充满心意的表白网页吧！利用HTML5的

HTML5音频视频标签入门

在开始制作表白网页之前，我们先来了解一下HTML5中音频和视频标签的基本用法。

音频标签

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

controls属性：显示音频播放控件
src属性：指定音频文件的URL
type属性：指定音频文件的MIME类型

视频标签

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

width和height属性：设置视频显示区域的尺寸
controls属性：显示视频播放控件
src属性：指定视频文件的URL
type属性：指定视频文件的MIME类型

创意表白网页设计

有了基本的标签知识，接下来我们来看看如何设计一个创意表白网页。

爱情树表白页面

这个页面以一棵爱情树为主题，背景音乐是《独家记忆》。页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>爱情树表白页面</title>
    <style>
        body {
            background-image: url('tree.jpg');
            background-size: cover;
        }
        .content {
            text-align: center;
            color: white;
            font-size: 24px;
            padding-top: 200px;
        }
    </style>
</head>
<body>
    <div class="content">
        <p>亲爱的TA，</p>
        <p>你是我生命中最美的遇见，</p>
        <p>愿我们的爱情像这棵树一样，</p>
        <p>枝繁叶茂，长长久久。</p>
        <p>你愿意和我一起浇灌这棵爱情树吗？</p>
    </div>
    <audio autoplay loop>
        <source src="music.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

表白爱心页面

这个页面以一颗跳动的心脏为主题，背景音乐是《告白气球》。页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表白爱心页面</title>
    <style>
        body {
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .heart {
            width: 200px;
            height: 200px;
            background-image: url('heart.gif');
            background-size: contain;
            background-repeat: no-repeat;
            animation: heartbeat 1s infinite;
        }
        @keyframes heartbeat {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="heart"></div>
    <audio autoplay>
        <source src="balloon.mp3" type="audio/mpeg">
    </audio>
</body>
</html>