《移动Web前端开发》教学讲义 第05讲.docVIP

《移动WEB前端开发》 配套教学教案 第05讲 课时内容 认识更多HTML标签 授课时间 90分钟 课时 2 教学目标 认识更多HTML标签 掌握HTML的文本控制标签 掌握HTML的列表标签 教学重点 ? 文本控制标签 ? 列表标签 教学难点 格式化标签 教学设计 1．教学思路：通过制作“西游文学”页面，使学生熟悉HTML标签的相关知识，能够利用标签制作简单页面。 2．教学手段：（1）演示法，通过软件操作帮助学生掌握制作方法；（2）讲授法，通过知识讲解帮助学生掌握教学重点。 教学内容 演示案例引入新课： 本案例中，将会制作“西游文学”页面，以此为例，介绍HTML常用标签。 案例效果 知识讲解：具体可结合本项目的PPT课件进行配合讲解。 1．文本控制标签 文字在页面制作中占据重要位置，在HTML中，我们会用到一系列的文本控制标签。 1）标题标签 HTML提供了6个标题标签，分别是h1、h2、h3、h4、h5、h6。其中，h1 定义一级标题、h2 定义二级标题，以此类推。其基本语法格式如下： hn标题内容/hn 其中，n=1/2/3/4/5/6，标识标题类型。 2）段落标签 段落标签标记的是一个段落，其基本语法格式如下： p align=对齐方式段落内容/p 段落常用的对齐方式有3种：left（左对齐、默认方式）、right（右对齐）、center（居中对齐）。 3）水平线标签 水平线标签hr在浏览器上显示为一条水平线，常常作为标题、段落之间的分割线，在视觉上将页面分割开来。其基本语法格式如下： hr 属性=属性值/ 常用的属性值有：align（对齐方式）、color（颜色）、size（高度）、width（宽度）。 2．列表标签 为了使网页内容排列有序，我们引入了列表标签。常用的列表标签有3类：定义列表、有序列表、无序列表。 定义列表，dl标签，项目及其注释的结合，其基本语法格式如下： dl dt项目1/dt dd项目1注释/dd dt项目2/dt ?dd项目2注释/dd /dl 有序列表，ol标签，其基本语法格式如下： ol li1/li li2/li li3/li /ol 无序列表，ul标签，其基本语法格式如下： ul li1/li li2/li li3/li /ul 3．引用外部文件标签 引用外部文件标签用于定义文档与外部资源的关系，最常见的用途是链接样式表，一个页面可以链接多个外部文件。其基本语法格式如下： link 属性=属性值/ 4．注释标签 注释标签是HTML标签中比较特殊的一种标签，在标签内的注释语句对代码有解释说明的作用，但不会显示在浏览器上。其基本语法格式如下： !--注释语句-- 小结 1．认识更多HTML标签。 2．掌握HTML的文本控制标签。 3．掌握HTML的列表标签。 作业 1．格式化 “西游人物”页面（xyrw.html），要求用到列表的嵌套。 2．新建页面case2-4.html，设计文本元素的效果为：宋体、5号、加粗。 3．继续编辑case2-4.html，设计图片原色的效果为：高度300px、宽度400px。 4．继续编辑case2-4.html，要求在文本和图片之间加入水平线，效果为：红色、左对齐。