最近一直聽說起html5表白墻，特別好奇這個神奇的小程序。
于是小編打算自學一下html5表白墻的源代碼。
以下是小編學習中收集的html5表白墻源代碼，大家可以參考一下：
<html>
<head>
<meta charset="UTF-8">
<title>表白墻</title>
<style type="text/css">
.container {
width: 50%;
margin: 0 auto;
}
.input {
width: 100%;
height: 100px;
font-size: 20px;
}
.btn {
width: 80px;
height: 30px;
margin-top: 10px;
font-size: 16px;
background-color: #f44336;
color: #fff;
border: none;
}
</style>
</head>
<body>
<div class="container">
<form method="post">
<textarea class="input" name="content"></textarea>
<input class="btn" type="submit" value="放飛">
</form>
</div>
<?php
//數據庫配置
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "test";
//連接數據庫
$conn = new mysqli($servername, $username, $password, $dbname);
//檢測連接
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
//查詢數據
$sql = "SELECT id, content, create_time FROM love ORDER BY create_time DESC";
$result = $conn->query($sql);
//輸出數據
if ($result->num_rows >0) {
while($row = $result->fetch_assoc()) {
echo "<div>";
echo "<h3>第" . $row["id"]. "條表白信：</h3>";
echo "<p>" . $row["content"]. "</p>";
echo "<p>" . $row["create_time"]. "</p>";
echo "</div>";
}
} else {
echo "0 結果";
}
$conn->close();
?>
</body>
</html>以上就是html5表白墻的源代碼，經過學習后，小編解釋了以下幾點：
首先通過meta標簽設置UTF-8編碼，避免亂碼問題。
接著是容器樣式和輸入框樣式的設置。
最后是數據庫連接和輸出數據的處理，其中用到了mysqli連接數據庫的方法。
以上是小編對html5表白墻源代碼的學習和理解，希望能對廣大讀者有所幫助。