HTML5 第012篇 列表【主】

前言：列表在前端中是一个非常重要的组成部分，主要功能体现在：导航栏以及列举一系列相关性的事件时使用。

>1 <li></li>标签

• <li> 标签定义列表项目。
• <li> 标签可用在有序列表（<ol></ol>）、无序列表（<ul></ul>）和菜单列表（<menu></menu>）中。
• <li> 标签的属性在HTML5中虽然还可以使用，但是HTML5中主张样式与html文档分离，这里不在列举原有的type属性，其属性在CSS3中使用：list-style-type 属性来代替。

---

>2 有序列表 <ol></ol>标签

1. <ol> </ol>标签定义了一个有序列表. 用一系列的有顺序的数字、字母或者罗马数字进行表示。
2. 使用<li></li> 标签来定义列表选项。
3. 有序列表，默认使用阿拉伯数字开始排序。

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

运行结果：

a、列表嵌套

【注意】在列表中，可以进行嵌套，但是请不要错位嵌套，会出现错误！在这里举个例子，无序列表的嵌套相同，就不再列举了。

嵌套的实现就是对一个好的导航的初步规划！

嵌套的规范写法：

其他的方法也有，但是希望你能记得最原始的方法！

            <ol>
				<li>你好</li>
				<li>世界</li>
				<li>很高兴</li>
				<li>与你</li>
				<li>相遇在此
					<ol>
						<li>你好</li>
						<li>世界</li>
						<li>很高兴</li>
						<li>与你</li>
						<li>相遇在此</li>
					</ol>
				</li>
			</ol>

运行结果：

b、属性

属性	值	描述
compact	compact	HTML5中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
reversed	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不赞成使用。请使用样式取代它，规定列表中的起始点。
type	1 A a I i	规定列表的类型。不赞成使用，请使用样式代替。

---

>3 无序列表<ul></ul>标签

• <ul></ul> 标签定义无序列表。
• 将 <ul></ul> 标签与 <li></li> 标签一起使用，创建无序列表。
• 默认使用实心黑色小圆点。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 运行结果：

a、属性

属性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。
type	disc   实心黑色小圆点 square 实心黑色小正方形 circle  空心小圆点	HTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。

---

>4 定义列表<dl></dl>标签

<dl></dl>标签代表一个描述列表。该标签的常用用途是实现词汇表或显示元数据（键值对列表）。

• <dl></dl> 标签定义一个描述列表。
• <dl></dl> 标签与 <dt></dt>（定义项目/名字）和 <dd></dd>（描述每一个项目/名字）一起使用。
• <dl></dl>标签必须有开始标签和结束标签。
• <dd></dd>标签中的内容是对<dt></dt>标签中内容的解析/意思。

<dl>
    <dt>十面埋伏</dt>
    <dd>意思是设伏兵于十面以围歼敌军。</dd>
    <dt>八方支援</dt>
    <dd>意思是形容各方面都支持、援助。</dd>
</dl>

运行结果：

---

一直在路上，自律，坚持