Web前端开发HTML5 CSS3教案HTML列表标记教案.doc

课程名称 WEB前端开发（1） 课次 5 任务、项目、课题名称 HTML列表标记 课时 2学时 教学内容 HTML列表标记：无序列表、有序列表、自定义列表、列表的嵌套 教学目标 理解HTML列表标记的作用、掌握其使用 教学重点 HTML列表标记：无序列表、有序列表、自定义列表 教学难点 列表的嵌套 教学活动及主要环节 学生活动 复习提问：（3分钟） HTML标题标记有哪些？ 导入新课：（2分钟） 列表是一种最常用的组织信息的方式，HTML提供了用于实现列表的标记。列表样式有无序列表、有序列表、自定义列表，这节课我们来学习一下HTML列表标记。 新授： （教师通过案例贯穿讲解有序列表、无序列表、列表的嵌套、自定义列表，实现教学做一体化） 有序列表（10分钟） 常用格式： ol type=”符号类型” start=”起始值” li列表项1/li li列表项2/li 　　li列表项3/li /ol 说明：type属性用来设置数字序列样式。 属性值可以为：1(默认值),A,a,I,i。Start属性设置序列的起始值，可以是任意整数。 无序列表(unordered list)（10分钟） 常用格式： ul type=”符号类型” li列表项1/li li列表项2/li 　　li列表项3/li /ul 说明：type属性用来设置项目符号的类型。 属性值可以为：disc(默认值),circle,square,分别表示实心圆点、空心圆点和方块。 列表嵌套（10分钟） 有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。参考课本25页。 课堂练习：列表嵌套的案例（10分钟） 自定义列表（10分钟） 自定义列表项前没有任何项目符号。 语法如下： dl dt标题1/dt dd数据1/dd dd数据2/dd dt标题2/dt dd数据1/dd dd数据2/dd … /dl 小结：（3分钟） 有序列表 无序列表 列表的嵌套 自定义列表 作业： 超星作业 超星平台利用“随机选人”功能，学生回答问题 学生独立思考，做完找老师签字 超星平台利用“随机选人”功能，学生回答问题