HTML与PHP联手：从零搭建个人博客全攻略

嘿，想要用HTML和PHP搭建一个个人博客吗？没问题，我来帮你！ ### 编写HTML部分 HTML部分主要负责页面的结构和内容。你可以创建一个简单的`index.html`文件作为博客的首页。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人博客</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>欢迎来到我的博客</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于我</a></li> <li><a href="contact.html">联系我</a></li> </ul> </nav> </header> <main> <section> <h2>最新文章</h2>  <div id="posts">  </div> </section> </main> <footer> <p>© 2023 我的个人博客. 版权所有.</p> </footer> </body> </html> ``` ### 编写PHP部分 PHP部分主要负责从数据库获取数据并展示在HTML页面上。你需要创建一个`index.php`文件，并连接数据库。 ```php <?php // 连接数据库 $servername = "localhost"; $username = "root"; $password = ""; $dbname = "my_blog"; $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 从数据库获取文章 $sql = "SELECT id, title, content, created_at FROM posts ORDER BY created_at DESC LIMIT 5"; $result = $conn->query($sql); if ($result->num_rows > 0) { // 输出数据 while($row = $result->fetch_assoc()) { echo "<article>"; echo "<h2>" . $row["title"] . "</h2>"; echo "<p>" . substr($row["content"], 0, 200) . "...</p>"; // 仅显示前200个字符 echo "<small>发布于: " . $row["created_at"] . "</small>"; echo "</article>"; } } else { echo "没有文章"; } $conn->close(); ?> ``` ### 整合HTML和PHP 将PHP代码插入到HTML的对应位置。修改`index.html`为`index.php`，并在`<div id="posts">`中插入PHP代码。 ```php <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人博客</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>欢迎来到我的博客</h1> <nav> <ul> <li><a href="index.php">首页</a></li> <li><a href="about.html">关于我</a></li> <li><a href="contact.html">联系我</a></li> </ul> </nav> </header> <main> <section> <h2>最新文章</h2> <div id="posts"> <?php // 连接数据库 $servername = "localhost"; $username = "root"; $password = ""; $dbname = "my_blog"; $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 从数据库获取文章 $sql = "SELECT id, title, content, created_at FROM posts ORDER BY created_at DESC LIMIT 5"; $result = $conn->query($sql); if ($result->num_rows > 0) { // 输出数据 while($row = $result->fetch_assoc()) { echo "<article>"; echo "<h2>" . $row["title"] . "</h2>"; echo "<p>" . substr($row["content"], 0, 200) . "...</p>"; // 仅显示前200个字符 echo "<small>发布于: " . $row["created_at"] . "</small>"; echo "</article>"; } } else { echo "没有文章"; } $conn->close(); ?> </div> </section> </main> <footer> <p>© 2023 我的个人博客. 版权所有.</p> </footer> </body> </html> ``` ### 注意事项 1. **数据库安全**：在实际应用中，要保护好数据库连接信息，不要将用户名和密码硬编码在代码中。可以使用配置文件或环境变量。 2. **SQL注入**：上面的代码没有处理SQL注入问题。在生产环境中，务必使用预处理语句来防止SQL注入。 3. **错误处理**：在实际应用中，要添加更详细的错误处理逻辑，以便更好地调试和维护代码。这样，你就拥有了一个简单的个人博客啦！祝你玩得开心！ ######[AI写代码神器 | 1394点数解答 | 2024-11-27 16:01:55]

服务商

更多选项

快捷项

自定义