HTML学习4：常用标签之列表标签 · Web前端HTML+CSS+JS初级入门

HTML 列表标签支持有序、无序和定义列表。列表标签表格： ![](https://box.kancloud.cn/2016-04-28_5721558722213.jpg) ### 一.无序列表无序列表是一个项目的列表。无序列表项开始于 < ul> 标签，结束于< /ul>标签。每个列表项开始于 < li>标签，结束于</ li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。 ~~~ <html> <head> <title>列表标签演示</title> </head> <body> <h1>这是一个无序列表标签演示</h1> <ul> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ul> </body> </html> ~~~ 浏览器结果显示为： ![](https://box.kancloud.cn/2016-04-28_5721558733a13.jpg) ### 二.有序列表同样，有序列表也是一列项目，列表项目使用数字，字母等进行标记。有序列表开始于 < ol> 标签，结束于< /ol>标签。每个列表项始于 < li> 标签，结束于< /li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 ~~~ <html> <head> <title>列表标签演示</title> </head> <body> <h1>这是一个有序列表标签演示</h1> <ol type="a"> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ol> </body> </html> ~~~ 浏览器结果显示为： ![](https://box.kancloud.cn/2016-04-28_572155874429a.jpg) ~~~ <html> <head> <title>列表标签演示</title> </head> <body> <h1>这是一个有序列表标签演示</h1> <ol type="1"> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ol> </body> </html> ~~~ 浏览器结果显示为： ![](https://box.kancloud.cn/2016-04-28_57215587553d8.jpg) ### 三.定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 < dl> 标签开始，结束于< /dl>标签。每个自定义列表项以 < dt> 开始，结束于< /dt>标签。每个自定义列表项的定义以 < dd> 开始，结束于< /dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 ~~~ <html> <head> <title>列表标签演示</title> </head> <body> <h1>这是一个定义列表标签演示</h1>  <dl> <dt>游戏名称</dt> <dd>红色警戒</dd> <dd>三国无双</dd> <dd>反恐精英</dd> <dd>街头篮球</dd> </dl> </body> </html> ~~~ 浏览器结果显示为： ![](https://box.kancloud.cn/2016-04-28_572155876609e.jpg) 对于列表标签，可以自己和自己嵌套，也可以和其他的列表标签嵌套。