5.1　新建列表

HTML列表结构可以分为两种基本类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。

5.1.1　无序列表

视频讲解

无序列表是一种不分排序的列表结构，使用<ul>标签定义，在<ul>标签中可以包含多个<li>标签定义的列表项目。

【示例1】下面示例使用无序列表定义一元二次方程的求解方法，预览效果如图5.1所示。

无序列表可以分为一级无序列表和多级无序列表，一级无序列表在浏览器中解析后，会在每个列表项目前面添加一个小黑点的修饰符，而多级无序列表则会根据级数调整列表项目修饰符。

【示例2】下面示例在页面中设计了三层嵌套的多级列表结构，浏览器默认解析时显示效果如图5.2所示。

图5.1　定义无序列表

图5.2　多级无序列表的默认解析效果

通过观察图5.2，可以发现无序列表在嵌套结构中随着其所包含的列表级数的增加而逐渐缩进，并且随着列表级数的增加而改变不同的修饰符。合理使用列表结构能让页面的结构更加清晰。

    <ul>
           <li>列表项目1</li>
           <li>列表项目2</li>
           <div>错误的无序列表嵌套结构</div>
    </ul>

    <ul>
           <li>列表项目1</li>
           <ul>
               <li>错误的无序列表嵌套结构</li>
           </ul>
    </ul>

    <ul>
           <li><ul>
                    <li>嵌套列表项目</li>
           </ul></li>
    </ul>

    <ul>
           <li>列表项目1
           <ul>
                <li>错误的无序列表嵌套结构</li>
           </ul>
           <li>列表项目2</li>
    </ul>

5.1.2　有序列表

视频讲解

有序列表是一种在意排序位置的列表结构，使用<ol>标签定义，其中包含多个<li>列表项目标签构成。

一般网页设计中，列表结构可以互用有序或无序列表标签。但是，在强调项目排序的栏目中，选用有序列表会更科学，如新闻列表（根据新闻时间排序）、排行榜（强调项目的名次）等。

【示例1】列表结构在网页中比较常见，其应用范畴比较宽泛，可以是新闻列表、产品列表，也可以是导航、菜单、图表等。下面示例显示3种列表应用样式，效果如图5.3所示。

    <h1>列表应用</h1>
    <h2>百度互联网新闻分类列表</h2>
    <ol>
        <li>网友热论网络文学：渐入主流还是刹那流星？</li>
        <li>电信封杀路由器? 消费者质疑：强迫交易</li>
        <li>大学生创业俱乐部为大学生自主创业助力</li>
    </ol>
    <h2>焊机产品型号列表</h2>
    <ul>
        <li>直流氩弧焊机系列 </li>
        <li>空气等离子切割机系列</li>
        <li>氩焊/手弧/切割三用机系列</li>
    </ul>
    <h2>站点导航菜单列表</h2>
    <ul>
        <li>微博</li>
        <li>社区</li>
        <li>新闻</li>
    </ul>

【示例2】有序列表也可分为一级有序列表和多级有序列表，浏览器默认解析时都是将有序列表以阿拉伯数字表示，并增加缩进，如图5.4所示。

图5.3　列表的应用形式

图5.4　多级有序列表默认解析效果

<ol>标签包含3个比较实用的属性，这些属性同时获得HTML5支持，且其中reversed为新增属性。具体说明如表5.1所示。

表5.1　<ol>标签属性

【示例3】下面示例设计有序列表降序显示，序列的起始值为5，类型为大写罗马数字，效果如图5.5所示。

    <ol type="I" start="5" reversed >
        <li>黄鹤楼 <span>崔颢</span> </li>
        <li>送元二使安西 <span>王维</span> </li>
        <li>凉州词（黄河远上） <span>王之涣</span> </li>
        <li> 登鹳雀楼 <span>王之涣</span> </li>
        <li> 登岳阳楼 <span>杜甫</span> </li>
    </ol>

图5.5　在Firefox浏览器中预览效果

5.1.3　描述列表

视频讲解

描述列表是一种特殊的结构，它包括词条和解释两块内容。包含的标签说明如下：

　<dl>...</dl>：标识描述列表。

　<dt>...</dt>：标识词条。

　<dd>...</dd>：标识解释。

【示例1】下面示例定义了一个中药词条列表。

在上面结构中，“丹皮”是词条，而“为毛茛科多年生落叶小灌木植物牡丹的根皮。产于安徽、山东等地。秋季采收，晒干。生用或炒用。”是对词条进行的描述（或解释）。

【示例2】下面示例使用描述列表显示两个成语的解释。

    <h1>成语词条列表</h1>
    <dl>
       <dt>知无不言，言无不尽</dt>
       <dd>知道的就说，要说就毫无保留。</dd>
       <dt>智者千虑，必有一失</dt>
       <dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误。</dd>
    </dl>

    <dl>
          <dt>描述列表标题</dt>
          <dd>描述列表内容</dd>
    </dl>

    <dl>
          <dt>描述列表标题1</dt>
          <dd>描述列表内容1.1</dd>
          <dd>描述列表内容1.2</dd>
    </dl>

    <dl>
          <dt>描述列表标题1</dt>
          <dd>描述列表内容1</dd>
          <dt>描述列表标题2</dt>
          <dd>描述列表内容2</dd>
    </dl>

【示例3】同一个dl元素中可以包含多个词条。例如，在下面这个描述列表中包含了两个词条，介绍花圃中花的种类，列表结构代码如下。

当列表结构的内容集中时，可以适当添加一个标题，描述列表内部主要通过定义标题以及定义内容项帮助浏览者明白该列表中所存在的关系以及相关介绍。

当介绍花圃中花的品种时，先说明主题，其次再分别介绍花的种类以及针对不同种类的花进行详细介绍，演示效果如图5.6所示。

图5.6　描述列表结构分析图

dl、dt和dd元素不仅仅是为了解释词条，在语义结构中，不再把描述列表看作是一种词条解释结构。至于dt元素包含的内容是一个真正意义上的词条，还是dd元素包含的是一个真正意义上的解释，对于和搜索引擎来说都不重要了。

一般来说，搜索引擎仅认为dt元素包含的是抽象、概括或简练的内容，对应的dd元素包含的是与dt内容相关联的具体、详细或生动说明。

【示例4】下面代码使用<ul>标签设计一个列表结构。

【示例5】从结构分析，示例4的代码设计没有问题，在表现效果上也许会更容易控制。不过从语义角度来考虑，对于这类的信息使用定义结构会更恰当一些。

对于“<li>软件大小：2431 KB </li>”这个项目，它实际上包含了两部分信息：第一部分是信息的名称（即“软件大小”），第二部分是信息的具体内容（即“2431 KB”）。对于描述列表来说，当自动检索到“<dt>软件大小</dt>”时，立即知道它是一个标题，而检索到“<dd>2431 KB</dd>”时就知道它是上面标题对应的具体信息。

5.1.4　菜单列表

视频讲解

HTML5重新定义了被HTML4弃用的<menu>标签。使用<menu>标签可以定义命令的列表或菜单，如上下文菜单、工具栏，以及列出表单控件和命令。<menu>标签中可以包含<command>和<menuitem>标签，用于定义命令和项目。

【示例1】下面示例配合使用<menu>和<command>标签，定义一个命令，当单击该命令时，将弹出提示对话框，如图5.7所示。

    <menu>
        <command onclick="alert('Hello World')">命令</command>
    </menu>

<command>标签可以定义命令按钮，如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的，否则不会显示这个元素，但是可以用它定义键盘快捷键。

目前，只有IE 9（更早或更晚的版本都不支持）和最新版本的Firefox支持<command>标签。

<command>标签包含很多属性，专门用来定制命令的显示样式和行为，说明如表5.2所示。

表5.2　<command>标签属性

【示例2】下面示例使用<command>标签各种属性定义一组单选按钮命令组，演示效果如图5.8所示。目前还没有浏览器完全支持这些属性。

   <menu>
       <command icon="images/1.png" onclick="alert('男士')" type="radio" radiogroup="group1" label="男士">男
士</command>
       <command icon="images/2.png" onclick="alert('女士')" type="radio" radiogroup="group1" label="女士">女
士</command>
       <command icon="images/3.png" onclick="alert('未知')" type="radio" radiogroup="group1" label="未知">未
知</command>
   </menu>

图5.7　定义菜单命令

图5.8　定义单选按钮命令组

<menu>标签也包含两个专用属性，简单说明如下：

　label：定义菜单的可见标签。

　type：定义要显示哪种菜单类型，取值说明如下。

　list：默认值，描述列表菜单。一个用户可执行或激活的命令列表（li元素）。

　context：定义上下文菜单。该菜单必须在用户能够与命令进行交互之前被激活。

　toolbar：定义工具栏菜单。活动式命令，允许用户立即与命令进行交互。

【示例3】下面示例使用type属性定义了两组工具条按钮，演示效果如图5.9所示。

图5.9　定义工具条命令组

5.1.5　快捷菜单

视频讲解

<menuitem>标签用来定义菜单项目，这些菜单项目仅用作弹出菜单的命令，方便用户快捷调用。

目前，仅有Firefox 8.0+版本浏览器支持<menuitem>标签。

【示例1】menu和menuitem元素一起使用，将把新的菜单合并到本地的上下文菜单中。例如，给body添加一个“Hello World”的菜单。

    <style type="text/css">
    html, body{ height:100%;}
    </style>
    <body contextmenu="new-context-menu">
    <menu id="new-context-menu" type="context">
       <menuitem>Hello World</menuitem>
    </menu>

在上面示例代码中，包含的基本属性有id、type和contextmenu，指定了菜单类型是context，同时也指定了新的菜单项应该被显示的区域。在本示例中，当右击后，新的菜单项将出现在文档的任何地方，效果如图5.10所示。

【示例2】也可以通过在特定的元素上给contextmenu属性赋值，来限制新菜单项的作用区域。下面示例将为<h1>标签绑定一个上下文菜单。

    <h1 contextmenu="new-context-menu">使用<menuitem>标签设计弹出菜单</h1>
    <menu id="new-context-menu" type="context">
        <menuitem>Hello World</menuitem>
    </menu>

当在Firefox中查看时，会发现新添加的菜单项被添加到右键快捷菜单最顶部。

【示例3】为快捷菜单添加子菜单和图标。子菜单由一组相似或相互的菜单项组成。下面示例演示如何使用menu添加4个子菜单，演示效果如图5.11所示。

图5.10　为body添加上下文菜单

图5.11　为图片添加子菜单项目

<menuitem>标签包含很多属性，具体说明如表5.3所示。

表5.3　<menuitem>标签属性

【示例4】下面示例使用icon属性在菜单的旁边添加图标，演示效果如图5.12所示。

图5.12　为菜单项目添加图标