052 列表.ppt

HTML/CSS/JavaScript 标准教程实例版（第3版） 第 章 5 本书编委会 编著 第5章 建立和使用列表 5.1 列表类型 5.2 嵌套列表 5.3 小实例——列表在网页中的使用 5.4 习题 HTML/CSS/JavaScript 标准教程实例版（第3版） 第五章 建立和使用列表 页面中，列表是重要的数据显示形式 用于提供结构化的、容易阅读的消息格式，可以帮助访问者方便地找到信息，并引起访问者对重要信息的注意。 学习目标： 定义列表 无序列表 编号列表 嵌套列表 * 列表符号 使用的主要标签： * 标签 含义 ul 无序列表 ol 编号列表 li 列表项目的标签 dir 目录列表 menu 菜单列表 dl 定义列表 dtdd 定义列表的标签 5.1.1 定义列表 定义列表用于提供两级信息，两级信息可以分别看作是词条和定义,即定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。 基本语法如下： dl dt名词一dd定义一 dt名词二dd定义二 dt名词三dd定义三 /dl * 定义列表举例dl.htm * HTML HEAD TITLE学习 HTML/TITLE /HEAD BODY DL DTHTML/DT DD超文本标记语言/DD DT互联网/DT DD网络的网络/DD /DL /BODY /HTML 5.1.2 无序列表 * … BODY H1星期中的每一天/H1 UL type=disc||circle||square LI星期日 LI星期一 LI星期二 LI星期三 LI星期四 LI星期五 LI星期六 /UL /BODY … 无序列表也称为“项目列表” 使用标签ul…/ul声明列表， 使用标签li声明列表中的每个项 Type属性的三个取值 Disc：? Circle： ? Square： ? Type属性也可用于标签li中，但没有意义 5.1.5 有序/编号列表 * … BODY H1星期中的每一天/H1 OL LI星期日 LI星期一 LI星期二 LI星期三 LI星期四 LI星期五 LI星期六 /OL /BODY … 在编号列表中，主要使用ol和li 两个标签及其start和type属性 编号列表的属性 OL TYPE = 1 OL TYPE = i OL TYPE = I OL TYPE = A OL TYPE = a OL START = n 5.2 嵌套列表 5.2.1 嵌套定义列表 使用dldtdd定义没有符号的嵌套列表 将图中所示列表形式的符号和编号去掉，使用嵌套定义列表实现效果。 * 5.2 嵌套列表 5.2.2 嵌套无序和编号列表 重复使用olul标签可以组合出多种嵌套列表形式 练习:列表 暗夜巧用战争古树MF的操作和细节，部分专用术语讲解 誓死守卫-Insomnia的倔强，CS史上最具影响力 HeatoN专访“CS将成为大众化的游戏” CS新手最经常问的十五大问题全面解析 乾坤大挪移NoA时代的精品Rush战术 * 不好的示例 第五章小结 列表符号： 普通列表标签ulli…/ul 属性type取值：disc||circle||square，该属性可应用于ul和li标签中 定义列表（不显示符号的分层次的列表）dldt…dd… dt…dd…/dl 编号列表olli…/ol 属性type和start取值 嵌套列表 嵌套定义列表 嵌套无序和编号列表 * 作业练习提交要求 邮箱： 电商1班 WEBDESIGN2011@QQ.COM 电商2班 XUJC_PHP@QQ.COM 网经 XUJC_WEB@QQ.COM 文件名和邮件标题规则： 周次_学号_姓名_课程章节名 02_ECM000000_张三_HTML文件的整体结构 * * 演示： TG4-Source文件夹中“无序列表“用例 * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。 HTML/CSS/JavaScript 标准教程实例版（第3版） 第 章 5 * * 演示： TG4-Source文件夹中“无序列表“用例 * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。