在接下来的视频里，我们一起去创建一个简单的可以记录笔记的小应用 … 这个小应用使用的是 Web SQL 数据库 … 在这个文本框里 … 输入一些内容 …

天气不错 … 点击 提交 .. 这样会把 内容 存储在用户本地的 Web SQL 数据库里面 …

在它的下面，会显示出在数据库里的所有的笔记内容 …

# 《 Peaky Blinders 》很好看 … 提交

每一条笔记会有笔记的内容，记录的时间 … 还有一个 删除 按钮，和一个 编辑 按钮 …

点击 删除 … 可以从 数据库 里面删除掉当前这条笔记 （# 《 Peaky Blinders 》很好看）… 点击 编辑 … 会把 笔记 的内容显示到 上面的 文本区域 里面 … 同时这个 提交 按钮 … 会变成 更新 按钮 …

在 文本框 里，可以输入修改之后的笔记内容 … 点击 更新 … 会 修改 这条笔记的内容 …

这些就是这个小应用能做的事儿 … 非常简单 …

不过它用到了一般的处理数据库数据的几个重要的步骤 … 创建内容，读取内容，更新内容，还有删除内容 … 在四个步骤可以简称为 C..R..U..D … crud …

C 表示 Create 创建 ，R 是 Read 读取 ，U 表示 Update ，更新… D 是 Delete 删除…

HTML

下面，我们先去看一下这个应用，用到的 HTML 代码 …

这个 HTML 文档用到的样式大部分是来自 Bootstrap … 另外还有一些自定义的样式 … 我把它放在了 style.css 这个样式表里 …

文档本身的结构也很简单 … 一个标题 …. 它的下面是一个提交笔记用的表单 … 这个表单里面，有一个文本区域 … 可以让用户输入笔记的内容 … 这个文本框我给它起了个名字 … 叫做 note-content …

最后还有一个发布笔记用的 提交 按钮 … 在它的上面，我定义了一个 ID … submit

另外这里还有一个 隐藏 的文本框 … 它的名字是 note-id … 在后面的视频里我会解释它的作用 …

然后在页面的底部，还有一个 script.js … 应用功能的主要的 JavaScript 都放在了这个文件里面 … 在后面的视频里，我们主要的工作都会在这个 script.js 文件上面 …