<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML有序列表</title> </head> <body> <!-- 有序列表 --> <ol> <li>先将水煮沸</li> <li>加入一勺米</li> <li>搅拌均匀</li> </ol> </body> </html>在浏览器中运行效果如图所示:
图1:HTML 有序列表
提示:在使用 <ol> 时,它一般和 <li> 配合使用,不会单独出现。而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML无序列表</title> </head> <body> <!-- 无序列表 --> <ul> <li>鸡蛋</li> <li>牛奶</li> <li>面包</li> </ul> </body> </html>浏览器运行结果如图所示:
表2:HTML 无序列表
●
符号表示;提示:<ul> 一般和 <li> 配合使用,不会单独出现。而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。
<dl>
<dt>定义标题<dt>
<dd>定义描述<dd>
<dd>定义描述<dd>
<dd>定义描述<dd>
</dl>
请读者注意此处的 <dt>、<dd> 是同级标签,都是 <dl> 的子标签。
具体使用场景如下示例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML定义列表</title> </head> <body> <!-- 定义列表 --> <dl> <dt>Web前端简介</dt> <dd>HTML(超文本标记语言)</dd> <dd>CSS(层叠样式表)</dd> <dd>JavaScript(脚本语言)</dd> </dl> <dl> <dt>C语言中文网</dt> <dd>HTML教程</dd> <dd>CSS教程</dd> <dd>JavaScript教程</dd> </dl> </body> </html>浏览器运行效果如下图:
图3:定义列表
提示:<dl> 一般与 <dt> 或 <dd> 配合使用,不会单独出现。不建议在 <dl> 中直接使用除 <dt>、<dd> 之外的其他标签。
列表分类 | 说明 |
---|---|
有序列表 | <ol> 表示有序列表,<li> 表示列表中的每一项,默认使用阿拉伯数字编号。 |
无序列表 |
<ul> 表示无序列表,配合 <li> 实现,默认使用● 符号显示。 |
定义列表 | <dl> 与<dt>、<dd> 配合实现,<dt> 充当列表的标题,<dd> 是对 <dt> 的解释说明。 |
本文链接:http://task.lmcjl.com/news/14823.html