我们粗略地想一下。消息信息将包括：

所以我们的布局如下：

因为消息编号可以由我们的程序自动生成，所以不需要输入。页面首先有三个输入框，用于填写消息信息，然后是一个提交按钮。点击提交按钮后，程序会记录消息信息，并在下面列出所有消息。我们先看一下我们要实现的静态效果：

留言板页面

接下来，让我们编写代码来实现该页面。首先，使用编辑器打开站点下的.html文件。因为这个.html文件不再使用，所以把里面的代码全部删除，换成下面的代码。

请写下你的留言

1.

姓名：小PHP

标题：我是标题1

内容：我是内容

替换完后，在浏览器中输入/.html打开，你会看到浏览器给我们展示了三个输入框和一个消息列表。这些是我们编写的 HTML 代码。下面简单介绍一下基础知识：

HTML（Text）全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以统一网络上的文档格式，将分散的资源连接成一个逻辑整体。 HTML 文本是由 HTML 命令组成的描述性文本。 HTML命令可以描述文本、图形、动画、声音、表格、链接等。

HTML的基本结构包括：

HTML 的基本语法包括：

我们通过这些知识点来对比一下我们的代码，看看我们在代码中用到了哪些知识：

：这个标签告诉浏览器这是一个文档。 ：定义整个HTML文档的开头，并将其语言设置为简体中文。 ：该标签用于包含文档的元数据，如标题、字符集等。 ：定义文档的字符集为UTF-8，这样可以支持多种语言字符。我的留言板：将网页标题设置为“我的留言板”。 ：该标签定义文档的主要部分，即用户在浏览器中看到的内容。请写下您的消息：这是一个二级标题，内容为“请写下您的消息”。 ：定义一个HTML表单，“post”表示表单通过POST方式提交数据。

：定义一个段落。 ：创建一个文本输入框供用户输入姓名。 ：创建一个文本输入框，供用户输入消息标题。 ：创建一个文本区域，供用户输入消息内容。提交：创建一个显示“提交”的按钮。当用户点击时，会触发表单提交操作。 : 结束表单标签。 ：创建一条水平线，通常用于分隔内容。接下来的部分是消息，显示了留言者的姓名、消息标题和消息内容。 and：分别结束body和html标签，表示HTML文档的结束。

现在浏览器中这个页面的内容就固定了，提交后我们会跳转到错误页面。在接下来的两篇文章中，我们将开发设计数据表，并使用PHP代码，让这个页面的消息能够真正的保存和显示消息。