用python实现todolist_开发“todolist“”项目及其自己的感悟

一，项目题目: 实现“todolist项目”

该项目主要可以练习js操控dom事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存、固定。

二，todolist简介

ToDoList是一款非常优秀的任务管理软件，用户可以用它方便地组织和安排计划。该软件短小精悍，仅有一个 数百 KB 的可执行文件就能完成所有功能，并且界面设计优秀，初级用户也能够快速上手。

todolist具体功能

ToDoList 帮你把要做的事情列出来，一项一项，类似思维导图。

最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成，提高效率。

当然了习惯是需要慢慢养成了，开始使用 ToDoList 这样的软件会觉得很费劲，但坚持下来你就能体会到管理软件带来的便捷了。所以需要坚持。

三，项目需求：

本项目参考了http://www.todolist.cn/点击打开链接，对代码进行了一些精简，并添加了一些功能。在实现项目的过程中，首先是实现最基本的功能，然后不断地添加增强功能和美化。

参考链接http://www.todolist.cn/

1.将用户输入添加至待办项

2.可以对todolist进行分类(待办项和已完成组)，用户勾选既将待办项分入已完成组

3.todolist的每一项可删除和编辑

4.下方有clear按钮，并清空所有todolist项

四，小编所做的静态页面

最终成型的结果：丑是丑了点，将就着看呗

五，基础HTML和CSS准备

5.1：input元素标签的用法

一个简单的HTML表单，包含两个文本输入框，一个提交按钮。

总结Input的标签：(input标签用于搜集用户信息)

Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等。

1，type=text

输入类型是text，这是我们见的最多也是使用最多的，

比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。

当然这也是Input的默认类型。

参数name：同样是表示的该文本输入框名称。

参数size：输入框的长度大小。

参数maxlength：输入框中允许输入字符的最大数。

参数value：输入框中的默认值

特殊参数readonly：表示该框中只能显示，不能添加修改。

代码格式：

your name:

测试代码：

各种input的测试

姓名1：

姓名2：

2，type=password

此密码输入框，就是输入的信息是保密字符。

3, input中的placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password

期间又提及到一个表单标签form，下面继续介绍表单标签。

5.2，表单标签

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

其中上面又提到了提交按钮，我学一下。

5.3，button标签的用法

就是下面代码标记了一个按钮

Click Me!

定义和用法

标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

5.4，id属性

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚(link anchor)，通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

5.5，Span标签

在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 划分成好几个区域，从而实现某种特定效果。

使用元素对文本的一部门进行着色。也就是说被元素包含的文本，既可以使用css对其定义样式，或者使用JavaScript对其进行操作。

本身没有任何属性。

在CSS定义中属于一个块级元素

可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用

会自动换行，使用 就会保持同行。

5.6，label标签

标签为input元素定义标注。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

for功能：表示这个lable是为哪个控件服务的，lable标签要绑定for指定HTML元素的ID或name属性，你点击的时候，所绑定的元素将获取焦点。

用法：姓名

accesskay：(一般很少用)

功能：定义访问这个控件的热键。

用法：姓名

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

5.7，textarea 标签

标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" (回车/换行)进行分隔。

提示：可以通过 标签的 wrap 属性设置文本输入区内的换行模式

5.8，input新增的三个属性autocomplete   autocapitalize  autocorrect

autocomplete

默认为on，其含义代表是否让浏览器自动记录自谦输入的值。

很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到。可以在input中加入autocomplete = "off"来关闭记录，系统需要保密的情况下可以使用此参数。

autocapitalize

自动大小写

autocorrect

纠错

5.9，section标签

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

section的真正应用只是很少，主要是article里面的标签，例如

这样语义化才有效，如果无缘无故把div改为section，反而是误导了搜索引擎。当然，这要看情况而定，但到底还是代表章节，至于什么才属于‘章节’就有自己去判断了。

section和div的异同

1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。

2、section内部必须有标题，标题也代表了section的意义所在。

六：代码

项目结果：

HTML代码&#x