06-创建列表

本课案例

image.png

列表的定义

以统一形式呈现的一组相关内容。

列表的分类

无序列表、有序列表、定义列表和嵌套列表

列表的使用

1.无序列表（unordered list):<ul></ul>

无序列表：一组没有先后顺序的相关内容，即列表中的条目是不分先后。
示例：

<h4>常见饮料（排名不分先后）</h4>
 <ul type="disc"> <!-- ul : unordered list,声明无序列表 -->
　 <li>咖啡</li>   <!-- li : list item,声明列表项目 -->
 　<li>茶</li>
 　<li>牛奶</li>
 　<li>果汁</li>
</ul> 

注：

1. 属性 type = disc| square | circle 用于表示前面的项目符号，目前HTML4.01已经废弃。
   因为不同的浏览器的显示会有差异，实际应用中通常使用CSS中的背景图片来控制项目符号的距离和样式。

无序列表练习

• Apples
• Bananas
• Lemons
• Oranges

2.有序列表（ordered list):<ol></ol>

<h4>小写字母列表：</h4>
<ol type="a">  <!-- ol:ordered list,声明有序列表 -->
   <li>Apples</li>  <!-- li : list item,声明列表项目 -->
   <li>Bananas</li>
   <li>Lemons</li>
   <li>Oranges</li>
</ol>  

常用属性示例：

  <ol reversed = "reversed" > <!-- 反转编号 -->
  <li value="4" > <!-- 虽然不赞成使用value，不过暂时没有用来替代它的CSS方案 -->

不推荐OL使用的属性有（用其它办法解决解决）：
type = "1 | a | A | i | I " 规定了编号的样式，以后用CSS来解决。
start = " number " 规定了编号的起始值，用li的value属性来解决。
注：常见CSS代码为ol { list-style-type : upper-roman | lower-alpha | decimal-leading-zero | lower-greek; }

注意事项

ul+li以及ol+li是一个整体，因此ul和ol内部建议只使用li，li是一个容器，因而li内部可以则可以使用任何标签。具体见下面代码：

<ol>
   <p>虽然我能正常显示，但是不建议！</p>
   <li><h3>第一名<h3><p>Apples</p></li>
   <li><h3>第二名<h3><p>Bananas</p></li>
   <li><h3>第三名<h3><p>Lemons</p></li>
   <li><h3>第四名<h3><p>Oranges</p></li>
</ol>  

定义列表

工作中，假如需要先定义一个标题，下面再加以描述，此时就需要使用定义列表。

   <dl> <!-- definition list:定义列表 -->
        <dt>首都</dt> <!-- 定义标题：definition title-->
        <dd>国家的行政中心</dd> <!-- 定义描述：definition description-->
        <dd>首都也通常是一个国家的经济和文化中心</dd>
        <dt>省会</dt>
        <dd>省的行政中心</dd>
        <dt>首府</dt>
        <dd>少数民族自治地区的行政中心</dd>
    </dl>

具体效果如图：

image.png

注意事项：

1.由于dl和dt、dd是一个整体, 因而dl里面不建议放其它标签。
2.dd和dt和li标签一样都属于容器标签, 里面可以添加任意标签。
3.一个dt能对应多个dd, 但是不要多个dt对应一个dd是错误的, 因为dd的语义是描述它上面的那一个dt。

嵌套列表

有时，在列表项目中，还需要继续扩展列表，此时就需要嵌套列表。如下图

image.png

代码如下：

<h4>一个嵌套列表：常见饮料</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

注意事项

嵌套列表和定义列表很类似，其实认真想想，他们是有区别的。

• 最核心的区别是，嵌套列表是多个名词的集合，而定义列表是有名词有描述。
• 从表现形式上看，他们也有区别，嵌套列表有项目符号，定义列表每一个前面都没有项目符号。不过这一点不能作为辨别标准，因为项目符号在实际应用中通常用CSS清除掉。

思考

下图应该用定义列表还是嵌套列表？

image.png