一,项目题目: 实现“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对其进行操作。
本身没有任何属性。
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