三、HTML基础之列表

3.1 无序列表的设计

3.1.1 无序列表标记——ul

无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。

语法：<ul>

       <LI>第一项

       <LI>第二项

       ..........

      </ul>

说明：使用<ul></ul>标记表示这一个无序列表的开始和结束，而<L1>则表示这是个列表项的开始。

3.1.2 无需列表的符号类型——type

默认情况下，无序列表的项目符号是

而通过type参数可以调整无序列表的项目符号

语法：<ul type=符号类型>

       <LI>第一项

       <LI>第二项

       ..........

      </ul>

说明：无序列表的其他属性不变，type属性决定了列表项开始的符号，类型值共有三个，disc

Circle  

Square

3.2 有序列表的设计

3.2.1 有序列表标记——ol

有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。

语法：<ol>

     <LI>第一项

     <LI>第二项

       ..........

      </ol>

说明：默认情况下，采用数字序号进行排列

3.2.2 有序列表的符号类型——type

默认情况下，有序列表的序号是数字的，通过type可以调整序号的类型。

语法：<ol type=符号类型>

       <LI>第一项

       <LI>第二项

       ......

      </ol>

说明：序号类型分五种

 

3.2.3 有序列表的起始数值——start

默认情况下，有序列表的列表项是数字1开始的，通过start参数可以调整起始数值，这个数值可以对数字起作用，也可以作用于英文字母或罗马数字

语法：<ol start=起始数值>

      <LI>第一项

      <LI>第二项

       ......

      </ol>

说明：起始数值只能是数字，但是同样可以对字母和罗马数字起作用。例：<ol type=A start=5>页面中显示的是E

3.3定义列表标记——dl

主要用于解释名词，包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释

语法：<dl>

         <dt>名词1<dd>解释1

         <dt>名词2<dd>解释2

          .........

       </dl>

说明：作为解释的内容在显示时会自动缩进

3.4 菜单列表标记——menu

菜单列表主要用于设计单列的菜单列表，菜单列表在浏览器中的显示效果和无序列表是相同的

语法：<menu>

      <LI>列表项1

      <LI>列表项2

       ......

     </menu>

3.5 目录列表——dir

目录列表一般用来创建多列的目录列表，在浏览器的显示效果与无序列表相同

语法：<dir>

      <LI>列表项1

      <LI>列表项2

       ......

     </dir>

3.6 列表的高级应用

3.6.1 列表的简化

当制作的列表清单过长时，可能需要滚动条才能看到全部内容，为了节省空间，避免过多的留白。

语法：<dl compact></dl>

3.6.2 列表文字的颜色

语法：<LI><font color=”颜色代码”>列表项的内容</font></LI>

说明：列表项的颜色就变成了设置后的颜色，但是也可以在列表中进行整体颜色的设置

3.7 列表的嵌套

最常见的列表嵌套模式就是有序列表和无序列表的嵌套，可以重复的使用<ol>和<ul>标记组合实现