无序列表
没有序列的一组内容。
(1)语法
<ul> <li>苹果</li> <li>香蕉</li> ... </ul>
(2)语义
无序列表,用于将没有数字顺序的一组数据或内容进行分组。
(3)默认样式(演示)
-
默认间距(外边距、内边距)
-
列表样式:实心圆
(4)典型应用
-
新闻列表
-
产品列表
-
导航、分页、选项止
(5)type属性
-
disc列表样式实心圆
-
circle 列表样式空心圆
-
square列表样式为小方块
<ul type="square"> <li>苹果</li> <li>香蕉</li> </ul>
注意:type属性不常用,通常使用css属性替代。
有序列表
(1)语法
<ol> <li>出门</li> <li>右转</li> ... </ul>
(2)语义
无序列表,用于将顺序是有意义的一组数据或内容进行分组
(3)默认样式(演示)
-
默认间距
-
列表样式:数字编号
(4)典型应用 (图示)
-
烹饪食谱中的各个步骤
-
指路时的各处转弯方向
-
营养信息标签上 按含量排序的成分列表
-
面包屑导航
(5)type属性(了解)
-
a
: 小写字母 -
A
: 大写字母 -
i
: 小写罗马数字 -
I
: 大写罗马数字 -
1
: 数字<ol type="I"> <li>步骤一</li> <li>步骤二</li> </ol>
注意:type属性不常用,通常使用css属性替代。
定义列表
(1)语法
<dl> <dt>定义</dt> <dd>描述 </dd> ... </dl>
(2)语义
-
包含术语定义以及描述的列表
-
dl自定义列表、dt 自定义列表项、dd自定义列表项的注释(描述)
-
用于将一组项目及其相关的描述进行分组
(3)默认样式
-
默认dl,dd带有间距
(4)典型应用
-
名词解释、分类(大分类-细节的类别)
-
键-值对列表 (内存:100M)
注意:
允许使用多条项目定义与描述。
<dl> <dt>姓名</dt> <dd>李美丽</dd> <dt>生日</dt> <dd>1990</dd> </dl>
允许使用带有多个描述的单个项目定义。
<dl> <dt>加入我们</dt> <dd>社会招聘</dd> <dd>校园招聘</dd> <dd>国际招聘</dd> </dl>