在本章节中，我们将结合前面所学的 HTML 知识，通过一步一步的实战指导，教你如何创建一个简单但功能完整的个人博客网页。这不仅能巩固你的 HTML 基础，还能让你体验到完成一个项目的成就感。

章节内容

  1. 项目介绍与规划
  2. 页面结构与布局
  3. 内容填充与样式美化
  4. 部署与发布

1. 项目介绍与规划

项目目标

我们的目标是创建一个包含以下几个主要页面的个人博客：

  • 主页
  • 关于我
  • 博客文章列表
  • 单篇文章详情

功能需求

  • 主页：展示博客的简介和最新文章的链接。
  • 关于我：介绍博主的个人信息和背景。
  • 博客文章列表：按发布时间或分类展示所有文章。
  • 单篇文章详情：显示单篇文章的全文内容。

技术需求

  • HTML：用于构建页面的结构。
  • CSS：用于美化页面（本章节不详细讲解，但会给出简单示例）。
  • JavaScript：实现一些交互功能（本书不涉及，但读者可以自行扩展）。

2. 页面结构与布局

主页布局

首先，我们来设计主页的 HTML 结构。主页主要包含网站的标题、导航栏、博客简介和最新文章列表。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>我的个人博客</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h1>欢迎来到我的个人博客</h1>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="blog.html">博客文章</a></li>
  17.         </ul>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <section>
  22.         <h2>博客简介</h2>
  23.         <p>欢迎光临我的个人博客，这里记录了我的学习心得和生活杂记。</p>
  24.       </section>
  25.       <section>
  26.         <h2>最新文章</h2>
  27.         <ul>
  28.           <li><a href="post1.html">文章标题1</a></li>
  29.           <li><a href="post2.html">文章标题2</a></li>
  30.           <li><a href="post3.html">文章标题3</a></li>
  31.         </ul>
  32.       </section>
  33.     </main>
  34.     <footer>
  35.       <p>&copy; 2024 我的个人博客</p>
  36.     </footer>
  37.   </body>
  38. </html>

关于我页面布局

接下来是关于我页面，这个页面主要展示博主的个人信息。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>关于我</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h1>关于我</h1>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="blog.html">博客文章</a></li>
  17.         </ul>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <section>
  22.         <h2>个人信息</h2>
  23.         <p>你好，我是XXX，一个热爱编程和写作的博主。</p>
  24.       </section>
  25.     </main>
  26.     <footer>
  27.       <p>&copy; 2024 我的个人博客</p>
  28.     </footer>
  29.   </body>
  30. </html>

博客文章列表页面布局

博客文章列表页面用于展示所有博客文章的标题和简介。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>博客文章</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h1>博客文章</h1>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="blog.html">博客文章</a></li>
  17.         </ul>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <section>
  22.         <h2>所有文章</h2>
  23.         <ul>
  24.           <li>
  25.             <h3><a href="post1.html">文章标题1</a></h3>
  26.             <p>文章简介1...</p>
  27.           </li>
  29.           <li>
  30.             <h3><a href="post1.html">文章标题1</a></h3>
  31.             <p>文章简介1...</p>
  32.           </li>
  33.           <li>
  34.             <h3><a href="post2.html">文章标题2</a></h3>
  35.             <p>文章简介2...</p>
  36.           </li>
  37.           <li>
  38.             <h3><a href="post3.html">文章标题3</a></h3>
  39.             <p>文章简介3...</p>
  40.           </li>
  41.         </ul>
  42.       </section>
  43.     </main>
  44.     <footer>
  45.       <p>&copy; 2024 我的个人博客</p>
  46.     </footer>
  47.   </body>
  48. </html>

单篇文章详情页面布局

单篇文章详情页面用于展示单篇文章的完整内容。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>文章标题1</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h1>文章标题1</h1>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="blog.html">博客文章</a></li>
  17.         </ul>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <article>
  22.         <h2>文章副标题</h2>
  23.         <p>这是文章的内容...</p>
  24.         <p>更多内容...</p>
  25.       </article>
  26.     </main>
  27.     <footer>
  28.       <p>&copy; 2024 我的个人博客</p>
  29.     </footer>
  30.   </body>
  31. </html>

3. 内容填充与样式美化

在我们完成了页面的基本结构和布局之后，现在我们来填充内容并使用 CSS 进行样式美化。

添加 CSS 样式

我们将创建一个名为 styles.css 的文件，并在其中添加基本的样式规则。

styles.css

  1. body {
  2.   font-family: Arial, sans-serif;
  3.   margin: 0;
  4.   padding: 0;
  5.   background-color: #f4f4f4;
  6. }
  8. header {
  9.   background-color: #333;
  10.   color: #fff;
  11.   padding: 1rem 0;
  12.   text-align: center;
  13. }
  15. header h1 {
  16.   margin: 0;
  17. }
  19. nav ul {
  20.   list-style: none;
  21.   padding: 0;
  22. }
  24. nav ul li {
  25.   display: inline;
  26.   margin: 0 1rem;
  27. }
  29. nav ul li a {
  30.   color: #fff;
  31.   text-decoration: none;
  32. }
  34. main {
  35.   padding: 20px;
  36.   max-width: 800px;
  37.   margin: 0 auto;
  38. }
  40. main h2 {
  41.   font-size: 1.5rem;
  42.   color: #333;
  43. }
  45. footer {
  46.   background-color: #333;
  47.   color: #fff;
  48.   text-align: center;
  49.   padding: 1rem 0;
  50.   position: fixed;
  51.   bottom: 0;
  52.   width: 100%;
  53. }

更新 HTML 文件

确保所有的 HTML 文件都引用了 styles.css，以应用我们定义的样式。

例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>我的个人博客</title>
  7.     <link rel="stylesheet" href="styles.css" />
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h1>欢迎来到我的个人博客</h1>
  12.       <nav>
  13.         <ul>
  14.           <li><a href="index.html">主页</a></li>
  15.           <li><a href="about.html">关于我</a></li>
  16.           <li><a href="blog.html">博客文章</a></li>
  17.         </ul>
  18.       </nav>
  19.     </header>
  20.     <main>
  21.       <section>
  22.         <h2>博客简介</h2>
  23.         <p>欢迎光临我的个人博客，这里记录了我的学习心得和生活杂记。</p>
  24.       </section>
  25.       <section>
  26.         <h2>最新文章</h2>
  27.         <ul>
  28.           <li><a href="post1.html">文章标题1</a></li>
  29.           <li><a href="post2.html">文章标题2</a></li>
  30.           <li><a href="post3.html">文章标题3</a></li>
  31.         </ul>
  32.       </section>
  33.     </main>
  34.     <footer>
  35.       <p>&copy; 2024 我的个人博客</p>
  36.     </footer>
  37.   </body>
  38. </html>

4. 部署与发布

将项目托管到 GitHub

  1. 创建一个新的 GitHub 仓库。
  2. 将项目推送到 GitHub 仓库。
  1. git init
  2. git add .
  3. git commit -m "Initial commit"
  4. git remote add origin <your-repository-url>
  5. git push -u origin master

使用 GitHub Pages 部署博客

  1. 在 GitHub 仓库的设置中，找到 “GitHub Pages” 部分。
  2. 选择 “main” 分支作为源，然后保存。
  3. 访问提供的 GitHub Pages URL，查看你的网站。

使用 Netlify 或 Vercel 进行部署

  1. 创建一个 Netlify 或 Vercel 账号。
  2. 连接你的 GitHub 仓库。
  3. 部署项目，Netlify 和 Vercel 将自动生成并提供一个 URL。

通过这一章的学习，你已经掌握了如何从零开始创建一个个人博客网页。希望这个实战项目能帮助你巩固所学知识，提升实际开发能力。接下来，我们将继续深入学习 HTML 的最佳实践，提高你的编码水平和开发效率。