用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

你可能感兴趣的:(用python实现todolist_开发“todolist“”项目及其自己的感悟)