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

myzbx 2024-12-14 13:50 51 浏览

我们大致思考一下，留言信息会包括：

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

所以我们布局如下：

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

下面我们来写代码实现页面，先使用 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 字符集

上一篇：Java 18为什么要指定UTF-8为默认字符集
下一篇：MySQL 9.1正式发布，有哪些值得关注的新特性?

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

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿