3.24web笔记(文本排版、列表……)
一、文本控制排版
任务04使用表单制作页面
4.1任务概述
“新时代、新技能、新梦想”,当前我国大力弘扬劳模精神、劳动精神、工匠精神,旨在激励更多劳动者,特别是青年一代走技能成才、技能报国之路。“新云课堂”项目就是为广大学习者打造的学习知识和技能的平台。
本任务将介绍如何用表单制作“新云课堂”信息登记页面、用户登录页面和用户注册页面。表单对于用户而言是数据录入和提交的界面;表单对于网站而言是获取用户信息的途径。通过在网页中添加表单元素,可以实现如会员注册、登录,问卷调查,在线考试,论坛分享、评论等功能。表单涉及信息的交互,自然离不开数据验证,数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5规范新增了对表单内容的简单验证功能,这一功能大大提升了用户的体验,我们应对其有一个初步的了解。
“新云课堂”项目的用户登录页面、用户注册页面及信息登记页面就需要使用本任务的表单与表单验证来实现。
4.2任务目标
素质目标
- 培养学生的劳动精神和工匠精神。
- 培养学生适应时代要求、主动获取新知识和新技能的意识。
知识目标
- 了解表单元素的定义。
- 掌握语义化表单的制作。
- 了解HTML5属性初步验证表单的功能。
二、列表 1.无序列表:
2.默认标签列表为一个实心小黑点
3.circle为空心圆,square为实心小正方形
ul.two{
list-style-type: circle;
}
ul.three{
list-style-type: square;
}
把无序标签的修饰符改为任意的样子
ul,li{
list-style-image: url(img/butterfly.png);
}
下载自己喜欢的图标,大小选择16,剪切到img中
2.有序列表:
2.默认标签列表前面有顺序标记
把有序列表换成带括号的样子