《33水平线和列表.doc》由会员分享，可在线阅读，更多相关《33水平线和列表.doc（4页珍藏版）》请在金锄头文库上搜索。
1、3.3 水平线和列表教学课时：2教学目标：熟练掌握水平线和列表，包括无序列表、有序列表、嵌套列表和自定义列表 掌握水平线标签和列表的使用教学重点：列表的使用教学难点：嵌套列表的使用教学方法：讲授法、演示法教学过程：新课：引入：水平线和列表在网页中也会经常用到。在网页设计中使用水平线和列表将信息组织成各种不同形式，可以使网页内容排列得更清晰明了。新课：3.3.1 水平线在HTML文件中可以使用标签创建水平线，将不同的内容分开，从视觉上将网页分隔成多个部分，使各部分内容看起来清晰明了。标签的作用是换行并在该行下添加一条水平线，水平线的上下都会留出一定的空白。标签有size、align、color、
2、width、noshade等可选属性，创建水平线的语法结构如下：各属性的含义：size：设置水平线的粗细，以像素为单位，默认值2。width：设置水平线的长度，单位为像素或百分比，默认值100%。align：设置水平线的对齐方式，属性值为left、center（默认）、right。color：设置水平分线的颜色，默认值为black。noshade：表示水平线不显示3D阴影效果。例3-28水平线在网页中添加水平线春晓:春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。3.2.2 列表当网页中包含多项内容时，可以使用列表将这些内容进行合理组织。HTML中的列表可分为无序列表、有序列表、自定义列表3
3、种。1无序列表无序列表是用项目符号来表示一个没有特定顺序的相关条目的集合。用于说明文件中需要列出的项，可以按任意顺序显示出来，各个列表项之间没有顺序级别之分。通常会在每个列表项的前面添加一个项目符号，并且每行缩进相同的距离。无序列表使用一对标签定义，并且每个列表项都要使用标签进行定义。格式如下： 列表项 列表项 列表项 其中和必须成对出现，且必须放在标签之间，可以省略。省略变成单标签，在省略的无序列表中，下一个的出现，就表明上一个列表项的结束。type属性用于指定每个列表项的项目符号。type属性值为disc表示使用实心圆点（）作为项目符号，这是默认值；属性值为circle表示项目符号为空心圆
4、点（）；属性值为square表示使用实心方形（）作为项目符号。2有序列表有序列表用于说明文件中需要按特定顺序排列和显示的内容。有序列表在列表的每项前都加上编号。因此，浏览者可以清晰地了解各个项目的顺序。定义有序列表需要使用有序标签和列表项标签， 创建有序列表的语法格式如下： 第一个列表项 第二个列表项 第三个列表项顺序编号是由属性type和start来设置的。type表示标号的类型，type属性取值1表示列表项用数字（1，2，3）编号，是默认值；A表示列表项用大写英文字母（A，B，C）编号；a表示表示用小写英文字母（a，b，c）编号；I表示用大写罗马字母（I，II，III）编号；i表示列表项用
5、小写罗马字母（i，ii，iii）编号。start属性表示列表项目的编号从第几项开始，例如，type=1，start=1表示有序列表的序号类型为数字，从第一个项目开始编号。有序列表 数字列表：苹果香蕉柠檬 大写英文字母列表：苹果香蕉柠檬 小写英文字母列表：苹果香蕉柠檬 大写罗马字母列表：苹果香蕉柠檬 小写罗马字母列表：苹果香蕉柠檬 3嵌套列表将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表。HTML可以用层层嵌套的方式来实现嵌套列表。使用嵌套列表可以把网页的内容分为多个层次，增强内容的层次感，有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。嵌套列表一个嵌套列表： 咖啡 茶 红茶 绿茶 中国茶 非洲茶 牛奶 4自定义列表自定义列表是项目及其注释的组合。自定义列表用于比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以说明。创建自定义列表的语法格式如下： 自定义列表项目1 项目1的解释1 自定义列表项目2 项目2的解释1 其中，和之间的内容就是自定义列表的内容，由一系列用自定义列表项标签和解释项标签标识的列表项组成。在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。例定义列表 一个定义列表： 咖啡 黑色的热饮料 Milk 白色的冷饮料小结：水平线，无序列表，有序列表，自定列表，嵌套列表作业：完成上机任务
