龙空技术网

教程 | 从零开始开发一个PHP留言板(三)——页面制作

与PHP有关的一切 86

前言:

此时兄弟们对“html留言板怎么做”大体比较珍视,兄弟们都想要剖析一些“html留言板怎么做”的相关文章。那么小编在网摘上搜集了一些对于“html留言板怎么做””的相关内容,希望同学们能喜欢,我们快快来学习一下吧!

我们大致思考一下,留言信息会包括:

留言人的名字留言标题留言的内容留言编号

所以我们布局如下:

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

留言板页面

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

<!DOCTYPE html><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 代码,让这个页面中的留言能真实的保存和显示留言。

标签: #html留言板怎么做 #php留言本 #html制作一个留言板 #html写留言板按顺序排放 #htmlbuttonphp