HTML支持有序,无序和定义列表
========================================= 实例1、无序列表
代码: <!DOCTYPE html> <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 效果如图:
实例2、有序列表 代码:
<!DOCTYPE html> <html> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> 效果如下:
========================================= 一、HTML无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用 <ul> 标签 <ul> <li>Coffee</li> <li>Milk</li> </ul> 浏览器显示如下:
二、HTML有序列表 同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 列表项项使用数字来标记。 <ol> <li>Coffee</li> <li>Milk</li> </ol> 浏览器中显示如下: - Coffee
- Milk
三、HTML自定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> 浏览器显示如下: - Coffee
- - black hot drink
- Milk
- - white cold drink
注意事项 - 有用提示提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 - =========================================
- 实例1、不同类型的有序列表
- 代码:
<!DOCTYPE html> <html> <body> <h4>Numbered list:</h4> <ol> <li>apples</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>apples</li> <li>oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>apples</li> <li>oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>apples</li> <li>oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>apples</li> <li>oranges</li> </ol> </body> </html> - 效果如图:
- 实例2、不同类型的无序列表
- 注:无序列表标签ul的type属性在HTML4中已弃用,HTML5也不支持,因此我们使用style属性和CSS的list-style-type 属性去定义不同类型的无序列表代码:
- 代码:
<!DOCTYPE html> <html> <body> <h4>Disc bullets list:</h4> <ul style="list-style-type: disc"> <li>apple</li> <li>oranges</li> </ul> <h4>Circle bullets list:</h4> <ul style="list-style-type: circle"> <li>apple</li> <li>oranges</li> </ul> <h4>Square bullets list:</h4> <ul style="list-style-type: square"> <li>apple</li> <li>orange</li> </ul> </body> </html> - 效果如图:
- 实例3、如何嵌套列表
- 代码:
<!DOCTYPE html> <html> <body> <h4>A list inside a list</h4> <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> </body> </html> - 效果如图:
- 实例4、自定义列表
- 代码:
<!DOCTYPE html> <html> <body> <h4>a definition list:</h4> <dl> <dt>coffee</dt> <dd>-black hot drink</dd> <dt>milk</dt> <dd>-white cold drink</dd> </dl> </body> </html> - 效果如图:
- =========================================
HTML 列表标签标签 | 描述 |
---|
<ol> | 定义有序列表 | <ul> | 定义无序列表 | <li> | 定义列表项 | <dl> | 定义定义列表 | <dt> | 自定义列表项目 | <dd> | 定义自定列表义的描述 |
|