一个简单的留言板源代码
使用 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复制代码
<!DOCTYPE html> <html> <head> <title>公司官网</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 CSS 文件 --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <div class="container"> <h1>公司名称</h1> <p>我们的标语</p> <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> </div> </header> <section id="banner"> <div class="container"> <img src="banner.jpg" alt="图片轮播"> <h2>最新产品发布</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="#" class="button">了解更多</a> </div> </section> <section id="services"> <div class="container"> <h2>我们的服务</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales bibendum nisi vitae finibus. Mauris commodo, nulla in rhoncus fringilla, urna massa dictum libero, sit amet dignissim elit turpis auctor nulla. Nullam consequat est vel sapien hendrerit lacinia.</p> <ul> <li> <h3>服务 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <h3>服务 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <h3>服务 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> </ul> </div> </section> <section id="about"> <div class="container"> <h2>关于我们</h2> <div class="column-left"> <img src="about.jpg" alt="公司介绍"> </div> <div class="column-right"> <h3>我们的历史</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales bibendum nisi vitae finibus. Mauris commodo, nulla in rhoncus fringilla, urna massa dictum libero, sit amet dignissim elit turpis auctor nul
