快捷搜索: 王者荣耀 脱发

简单的留言板,导航页面和公司介绍html5页面源码。

一个简单的留言板源代码

使用 PHP 和 MySQL 数据库来存储和检索留言信息:

index.php:

html复制代码

<!DOCTYPE html> <html> <head> <title>留言板</title> <style type="text/css"> form { margin: 10px; padding: 10px; border: 1px solid gray; background-color: #f9f9f9; } label, textarea { display: block; margin-bottom: 5px; } textarea { width: 100%; height: 100px; } input[type=submit] { margin-top: 10px; } h2 { margin-left: 10px; } .message { margin: 10px; padding: 10px; border: 1px solid gray; background-color: #f9f9f9; } .author { font-weight: bold; } .date { color: gray; font-size: 0.8em; } </style> </head> <body> <h2>留言板</h2> <?php //连接数据库 $conn = mysqli_connect(localhost, username, password, database); if (!$conn) { die("连接失败: " . mysqli_connect_error()); } //处理表单提交 if (isset($_POST[author]) && isset($_POST[message])) { $author = $_POST[author]; $message = $_POST[message]; $date = date(Y-m-d H:i:s); $sql = "INSERT INTO messages (author, message, date) VALUES ($author, $message, $date)"; mysqli_query($conn, $sql); } //查询留言 $sql = "SELECT * FROM messages ORDER BY id DESC"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { echo <div class="message">; echo <span class="author"> . $row["author"] . </span>; echo <span class="date"> . $row["date"] . </span>; echo <p> . $row["message"] . </p>; echo </div>; } } else { echo "<p>还没有留言。</p>"; } mysqli_close($conn); ?> <form method="post"> <label for="author">姓名:</label> <input type="text" name="author" required> <label for="message">留言:</label> <textarea name="message" required></textarea> <input type="submit" value="提交"> </form> </body> </html>

在上面的代码中,我们首先连接到 MySQL 数据库,并使用表单来插入新的留言。然后,使用 SELECT 查询获取所有留言,并将它们显示在页面上。最后,使用 mysqli_close() 函数关闭数据库连接。

请注意,为了更安全,您应该对用户输入进行验证和清理,例如使用 htmlentities() 函数转义 HTML 实体字符,以防止 XSS 攻击。

一个简单的html5页面源码

以下是一个简单的 HTML5 导航页面示例,使用了无序列表和超链接来创建导航菜单:

html复制代码

<!DOCTYPE html> <html> <head> <title>网站导航</title> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f9f9f9; margin: 0; padding: 0; } nav { background-color: #333; color: #fff; padding: 10px; } ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin-right: 10px; } a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 3px; transition: background-color 0.3s ease; } a:hover { background-color: #666; } </style> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">博客</a></li> <li><a href="#">论坛</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </body> </html>

在上面的代码中,我们首先定义了一个名为 nav 的元素,并设置其背景颜色、字体颜色和内边距。然后,我们创建了一个无序列表 (ul) 和多个列表项 (li),每个列表项包含一个超链接 (a),指向网站的不同页面。最后,我们应用了一些 CSS 样式来设置导航菜单的外观和交互效果。

您可以根据自己的需要更改样式以及网站链接和标题等内容。

一个简单的公司介绍页面html5源码

以下是一个简单的 HTML5 公司官网首页示例,包括公司名称、标语、导航菜单、图片轮播和其他内容块:

html复制代码

经验分享 程序员 微信小程序 职场和发展