本课案例
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>
注：
- 属性 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
网友评论