HTML写一个云笔记展示页面,要求有标题、内容、新增时间、修改时间字段
时间: 2024-06-06 16:07:10 浏览: 19
<!DOCTYPE html>
<html>
<head>
<title>云笔记展示页面</title>
</head>
<body>
<h1>云笔记展示页面</h1>
<div>
<h2>标题:</h2>
<p>这是一个云笔记的标题</p>
</div>
<div>
<h2>内容:</h2>
<p>这是一个云笔记的内容</p>
</div>
<div>
<h2>新增时间:</h2>
<p>2021-01-01 12:00:00</p>
</div>
<div>
<h2>修改时间:</h2>
<p>2021-01-02 08:00:00</p>
</div>
</body>
</html>
相关问题
HTML写一个云笔记页面,要求有标题、内容、新增时间、修改时间字段
<!DOCTYPE html>
<html>
<head>
<title>云笔记</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
background-color: #fff;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.note {
background-color: #fff;
border-radius: 5px;
padding: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.note h2 {
font-size: 24px;
margin: 0;
color: #333;
}
.note p {
color: #666;
margin-top: 10px;
}
.note .time {
font-size: 12px;
color: #999;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>云笔记</h1>
<form method="post" action="">
<label>标题</label>
<input type="text" name="title" required>
<label>内容</label>
<textarea name="content" rows="10" required></textarea>
<input type="submit" value="保存笔记">
</form>
<?php
// 连接数据库并创建表
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "notes";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("连接失败:" . mysqli_connect_error());
}
$sql = "CREATE TABLE IF NOT EXISTS notes (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if (mysqli_query($conn, $sql)) {
echo "";
} else {
echo "创建表失败:" . mysqli_error($conn);
}
// 保存笔记
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$title = $_POST["title"];
$content = $_POST["content"];
$sql = "INSERT INTO notes (title, content) VALUES ('$title', '$content')";
if (mysqli_query($conn, $sql)) {
echo "<p>笔记已保存。</p>";
} else {
echo "保存失败:" . mysqli_error($conn);
}
}
// 显示笔记
$sql = "SELECT * FROM notes ORDER BY updated_at DESC";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='note'>";
echo "<h2>" . $row["title"] . "</h2>";
echo "<p>" . $row["content"] . "</p>";
echo "<div class='time'>创建时间:" . $row["created_at"] . "<br>修改时间:" . $row["updated_at"] . "</div>";
echo "</div>";
}
} else {
echo "<p>暂无笔记。</p>";
}
mysqli_close($conn);
?>
</body>
</html>
在Django框架下,用html写一个新增笔记页面,要求包含标题,内容及提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增笔记</title>
</head>
<body>
<h1>新增笔记</h1>
<form method="POST" action="{% url 'add_note' %}">
{% csrf_token %}
<label for="title">标题:</label>
<input type="text" name="title" id="title" required>
<br>
<label for="content">内容:</label>
<textarea name="content" id="content" rows="10" cols="50" required></textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)