Download presentation
Presentation is loading. Please wait.
1
W3C标准网页制作 主讲教师：张 涛
2
第7讲、建立列表 7.1. 列表标记 有序列表 无序列表 7.4. 定义列表标记DL标签 7.5. 列表嵌套
3
7.1.列表标记 在HTML页面中，列表可以起到提纲挈领的作用。
列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。 ● 所谓有序，指的是按照数字或字母等顺序排列列表项目。 ● 所谓无序，是指以●、○、□等开头的,没有顺序的列表项目。 标 记 描 述 <UL> 无序列表 <OL> 有序列表 <LI> 列表项目的标记
4
7.2.有序列表 有序列表使用编号，而不是项目符号来编排项目。 列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<OL>和<LI>两个标记以及TYPE和START两个属性。 有序列表标记<OL> 基本语法 <OL> <LI>项目一 <LI>项目二 <LI>项目三 …… </OL> <HTML> <HEAD> <TITLE>建立有序列表</TITLE> </HEAD> <BODY> <H2>图像设计软件</H2> <OL> <LI>Photoshop <LI>Illustrator <LI>Freehand <LI>CorelDraw </OL> </BODY> </HTML>
5
7.2.有序列表 值 描 述 1 数字1，2，3…… ａ 小写字母a,b,c…… A 大写字母A，B，C…… ⅰ 小写罗马数字ⅰ,ⅱ,ⅲ…… I 大写罗马数字Ⅰ,Ⅱ,Ⅲ…… 有序列表的类型属性TYPE 基本语法 <OL TYPE=VALUE> </OL> 有序列表的起始属性start，在默认情况下，有序列表从数字1开始计数，这个起始值通过START属性可以调整，并且，英文字母和罗马数字的起始值也可以调整。 基本语法 <OL START=VALUE> </OL> <HTML> <HEAD> <TITLE>建立有序列表</TITLE> </HEAD> <BODY> <H2>图像设计软件</H2> <OL TYPE=a start=3> <LI>Photoshop <LI>Illustrator <LI>Freehand <LI>CorelDraw </OL> </BODY> </HTML>
6
7.3.无序列表 在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目
符号作为每个列表项的前缀。无序列表主要使用<UL>、<LI>几个标记和TYPE属性。 无序列表标记<UL> 基本语法 <UL> <LI>项目一 <LI>项目二 <LI>项目三 …… </UL> 无序列表的类型属性TYPE 在无序列表的默认情况下，使用●作为列表的开始， 我们可以通过TYPE属性将无序列表的类型设置为〇或□。 基本语法 <UL TYPE=VALUE> </UL> 值 描 述 disc ● circle 〇 square □ <HTML> <HEAD> <TITLE>设定无序列表编号类型</TITLE> </HEAD> <BODY> <H2>图像设计软件</H2> <UL Type=circle> <LI>Photoshop <LI>Illustrator <LI>Freehand <LI>CorelDraw </UL> </BODY> </HTML>
7
7.4. 定义列表标记DL标签
8
7.5. 列表嵌套
9
谢谢!
Similar presentations
