由于留言编号我们程序可以自动天生,以是不用输入。
页面就先是三个可以填写留言信息的输入框,紧接着是一个提交按钮,点击提交按钮之后,程序会把留言信息记录下来,并不才方把所有的留言都罗列出来。
我们先来看看我们要做到的静态效果:

留言板页面

下面我们来写代码实现页面,先利用 vscode 编辑器打开站点下面的 index.html 文件。
由于这个index.html 文件用不到了,把里面的代码全部删除,更换成下面的代码。

html网页留言板教程  从零开端开辟一个PHP留言板三页面制造 React

&lt;!DOCTYPE html&gt;<html lang="zh-CN"><head> <meta charset="utf-8"> <title>我的留言板</title></head><body> <h2>请写下你的留言</h2> <form method="post"> <p> 您的姓名: <input type="text" name="username"> </p> <p> 留言标题: <input type="text" name="title"> </p> <p> 留言内容: <textarea name="content"></textarea> </p> <button>提交</button> </form> <hr> <p>1. </p> <p> 姓名:小PHP </p> <p> 标题:我是标题1 </p> <p> 内容:我是内容 </p> <hr></body></html>

更换后,在浏览器中输入 localhost/index.html 打开,就能看到此时浏览器给我们展示三个输入框,和留言列表。
我们写的这些便是 HTML 代码,这里大略先容一下基本知识:

HTML(Hyper Text Markup Language)称为超文本标记措辞,是一种标记措辞。
它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以解释笔墨、图形、动画、声音、表格、链接等。

HTML的基本构造包括:

<html>标签:HTML文档的根元素。
<head>标签:包含了所有的头部标签元素,如<title>、<meta>、<link>等。
<body>标签:包含了所有的主体标签元素,如<h1>、<p>、<a>等。

HTML的基本语法包括:

标签:HTML元素由标签来表示,标签成对涌现,如<p>和</p>。
属性:用于供应有关元素的附加信息,如href属性用于指定链接的目标地址。
注释:利用<!-- -->来注释内容。
HTML标签可以描述笔墨、图像、动画、声音、表格、链接等。
例如:<h1>到<h6>标签表示标题,数字越小,字号越大;<p>标签表示段落;<a>标签表示链接;<img>标签用于插入图片;<ul>、<ol>和<li>标签分别表示无序列表、有序列表和列表项。

我们比拟这些知识点来看我们的代码,我们在代码中一共利用了哪些些知识:

<!DOCTYPE html>:这个标签见告浏览器这是一个HTML5文档。
<html lang="zh-CN">:定义全体HTML文档的开始,并设置其措辞为简体中文。
<head>:这个标签用于包含文档的元数据,如标题、字符集等。
<meta charset="utf-8">:定义文档的字符集为UTF-8,这样就可以支持多种措辞字符。
<title>我的留言板</title>:设置网页的标题为“我的留言板”。
<body>:这个标签定义了文档的主体部分,即用户在浏览器中看到的部分。
<h2>请写下你的留言</h2>:这是一个二级标题,内容为“请写下你的留言”。
<form method="post">:定义一个HTML表单,method="post"表示这个表单提交数据的办法是POST。
<p>:定义一个段落。
<input type="text" name="username">:创建一个文本输入框,用于用户输入他们的名字。
<input type="text" name="title">:创建一个文本输入框,用于用户输入留言的标题。
<textarea name="content"></textarea>:创建一个文本区域,用于用户输入留言的内容。
<button>提交</button>:创建一个按钮,显示“提交”,当用户点击时,会触揭橥单的提交操作。
</form>:结束表单标签。
<hr>:创建一个水平线,常日用于分隔内容。
接下来的部分是一个留言,它显示了留言人的姓名、留言标题和留言内容。
</body> 和 </html>:分别结束body和html标签,表示HTML文档的结束。

现在浏览器中的这个页面的内容是固定的,我们提交之后会跳转到一个缺点页面。
后面两篇我们就来开拓设计数据表和利用 PHP 代码,让这个页面中的留言能真实的保存和显示留言。