另发表于Levi.Blog和oschina
HTML包含专门用于创建项目列表的元素。可以创建普通列表、编号列表、符号列表以及描述列表，可以在一个列表中嵌套另外一个或多个列表。所有的列表都是有父元素和子元素构成的。父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型。
| 列表类型 | 父元素 | 列表项 |
|---|---|---|
| 有序列表 | ol | li |
| 无序列表 | ul | li |
| 描述列表 | dl | dt和dd分别代表dl中的术语和描述 |
上面三种列表类型中，无序列表是万维网上最为常见的列表，它也是对大多数类型的导航进行标记的事实标准。
上面这个列表使用默认的阿拉伯数字创建带编号的有序列表。可以使用CSS对此进行修改。有序列表和无序列表在显示时默认都会进行缩进。 无序列表恰好相反，且应用更普遍。
...<body><h1 class="hdg">PRoduct Features</h1><ul> <li>One-click page layout.</li> <li>Spell-checker for 327 languages.</li> <li>Image retouching tool.</li> <li>Unlimited undos and redos.</li></ul></body></html>创建列表
输入<ol>（有序列表）或<ul>（无序列表）。对于有序列表，可以包含start、type和reversed这三个可选的属性。输入<li>以开始第一个列表项目。对于有序列表，可以包含可选的value属性。添加要包含在列表项目内的内容（如文本、链接、img元素等）。输入</li>以结束列表项目。对于每个新的列表项目，重复第2步至第4步。输入</ol>或</ul>以结束列表。body { font-family: sans-serif;}.hdg { font-size: 1.5em; margin-bottom: 0;}.hdg + ul,.hdg + ol { /* works for either ul or ol because of two selectors */ margin-top: .5em; /* 8px/16px */}ul { /* reduce indentation */ margin-left: 0; /* for <=IE7 (that is, IE7 and earlier versions) */ padding-left: 18px; /* or 1.125em because 18px/16px = 1.125 */}ul li { /* space between each item in list */ margin-top: .4em; /* 6px/16px */} 第二条和第三条规则定义了标题与列表之间的间距，最后一条规则定义了每个列表项目之间的间距。第四条规则减小了缩进。不一定非要使用em为单位，如果用em的话，要记住em值是相对于父元素的字体大小的。
使用列表标记链接组时，大多数情况下均可以使用无序列表，如主导航链接、指向一组视频或相关报道的链接、页脚中的一组链接等。像面包屑导航等顺序有意义的，应该使用有序列表。
创建列表时，无论有序列表还是无序列表，都可以选择出现在列表项目左侧的标记类型。除了下面介绍的标记以外，还有大量的其他标记类型可用，不过浏览器对不同标记类型的支持情况不同。
选择标记 在样式表中，输入list-style-type: market，这里的market是以下属性值中的一种。
| 属性值 | 标记类型 |
|---|---|
| disc | 实心圆点 |
| circle | 空心圆圈 |
| square | 方块 |
| decimal | 数字，1、2、3… |
| upper-alpha | 大写字母，A、B、C… |
| lower-alpha | 小写字母，a、b、c… |
| upper-roman | 大写罗马数字，Ⅰ、Ⅱ、Ⅲ … |
| lower-roman | 小写罗马字母，ⅰ、ⅱ、ⅲ… |
显示无标记列表 在样式表，输入list-style-type: none。可以通过list-style-type对ol和ul设置任何标记样式。换句话说，可以对ol使用方块标记，也可以对ul使用数字标记。 可以在HTML中通过type属性为有序里列表指定标记类型，但推荐做法是尽可能在CSS中定义列表样式类型。type属性可接受的值包括A、a、Ⅰ、ⅰ、和1。例如，<ol type="Ⅰ">表示使用大写罗马数字作为编号。
也可以使用图像创建自己定制的标记，只需要修改CSS。 如果想为列表中的一个或几个项目应用定制的标记，可以为其添加一个类，再为这个类定义样式规则。 因可定制的标记太多，且因人而异，如有所需请自行在网络上查找相关资料。
设置整个列表编号方案的初始值 在ol开始标签中输入start="n"，这里的n表示列表的初始值。
修改有序列表中某列表项目的编号 在目标li项目内输入value="n"，这里的n代表该列表项目的值。
提示 如果使用start和type，请始终使用数字。即便决定使用字母或罗马数字对列表进行编号，也应使用数字。通过CSS或者type属性会显示预期的标记。value属性的值会覆盖start属性的值。
控制标记位置的步骤
在目标列表或列表项目的样式表规则中，输入list-style-position:。输入inside让标记缩在文本块内，或者输入outside让标记显示在列表项目文本的左边（这是默认的设置，需要这种样式则不需设置）。 list-style-position可应用于ul、ol或li。结果是一样的，除非针对特殊的li（如某一类的li）设置不同的样式，从而在一个列表中同时拥有内部标记和外部标记。 如果列表项目中的文本显得较为拥挤，则可以通过设置line-height增大文本行间距。；例如可以设置li { line-height: 1.3; }。不要将行高设置与列表项目间距（由对li设置的margin-top或margin-bottom控制）弄混。例如li { margin-bottom: .5em; }。
同background、border、font、outline等属性一样，CSS也为list-style提供了简写形式。如下面例程，它将list-style-type、list-style-position和较少使用的list-style-image放到了一条属性中。
同时设置所有的列表样式属性的步骤
输入list-style:。如果需要，指定应出现在列表项目旁边的标记类型。如果需要，指定标记应悬挂在列表段落之外或缩进在文本快内。如果需要，指定列表项目所用的定制图像标记。为嵌套列表设置样式的步骤
要设置最外层列表的样式，输入toplevel li {style_rules}，其中toplevel是最外层列表的类型（如ol、ul），style_rules是要应用的样式。对于第二级列表，输入toplevel 2ndlevel { style_rules }，其中toplevel是对应于第一步中的toplevel，2ndlevel是第二级列表的类型。style_rules是它需要应用的样式。对于第三级列表，输入toplevel 2ndlevel 3rdlevel { style_rules }，其中toplevel是最外层列表的类型，2ndlevel是第二级列表的类型，3rdlevel是第三级列表的类型，style_rules是它需要应用的样式。对于要设置样式的每个嵌套列表，继续以上述方法进行设置。注：可以在每个选择器末尾包含li，从而直接定位列表项目，例如第三步中的代码可以写为toplevel 2ndlevel 3rdlevel li { style_rules }。<body><h1 class="hdg">The Great American Novel</h1><ol> <li>Introduction <ol class="level2"> <li>Boy's childhood</li> <li>Girl's childhood</li> </ol> </li> <li>Development <ol class="level2"> <li>Boy meets Girl</li> <li>Boy and Girl fall in love</li> <li>Boy and Girl have fight</li> </ol> </li> <li>Climax <ol class="level2"> <li>Boy gives Girl ultimatum <ol class="level3"> <li>Girl can't believe her ears</li> <li>Boy is indignant at Girl's indignance</li> </ol> </li> <li>Girl tells Boy to get lost</li> </ol> </li> <li>Denouement</li> <li>Epilogue</li></ol></body></html> 由于列表项目（li元素）可以嵌套在其他列表项目内，因此在使用相对值指定字体大小时需要留心。如果使用像li {font-size: .75em;}这样的样式规则，那么最外层列表项目的字体便是其父元素的75%，所以会导致后级字太小。一种解决方案为添加li {font-size: 1em;}，或者将1em替换为100%。这样嵌套列表项目就总是与顶级列表项目一样大。
每个列表都包含在dl中，其中的每个名-值组都有一个或多个dt元素（名称或术语）以及一个或多个dd元素（它们的值）。在默认情况下，名称（dt）向左对齐，而值（dd）则有缩进。
dt同一个dd是最常见的情形。一个dt同多个dd元素。多个dt元素同一个dd。多个dt元素同多个dd元素。可以使用dfn元素包围dt中的名称，指出该列表是用于定义术语的。创建描述列表的步骤
输入<dl>。输入<dt>。输入需要描述或定义的单词或短语，包括任何额外的语义元素（如dfn）。输入</dt>以完成名-值组中的名称部分。如果名-值组中有一个以上的名称或术语，可根据需要重复第2至第4步。输入<dd>。输入第3步中输入的术语或名称的描述。输入</dd>以完成名-值组中的描述（值）部分。如果名-值组中有一个以上的定义值，可根据需要重复第6至第8步。对每个由术语和描述构成的组，重复第2步至第9步。输入</dl>以完成整个描述列表。HTML and CSS 读书笔记
本文为本人原创，采用 知识共享 “署名-非商业性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”许可协议 进行许可。 本作品可自由复制、传播及基于本作品进行演绎创作。如有以上需要，请通过E-mail等方式告知，并在文章开头明显位置加上署名 [ 丁学文.Blog ] 、原文链接及许可协议信息，并明确指出修改（如有），不得用于商业用途。谢谢合作。 详情请点击查看许可协议及版权声明具体内容。
博主联系方式： E-mail： xuewending1995@Gmail.com [ 请注明来意 ] GitHub： Levi.GitHub
新闻热点
疑难解答
