来源:www.cncfan.com | 2006-1-21 | (有2167人读过)
HTML支持有序、无序和自定义列表。
--------------------------------------------------------------------------------
示例
一个无序列表:
<html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
这个例子显示了一个无序列表。
有序列表:
<html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
这个例子显示了一个有序列表。
在这个页面的底部,还有更多例子。
--------------------------------------------------------------------------------
无序列表
无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。
无序列表以<ul>标签开始。每个列表项目以<li>开始。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
在浏览器中显示如下:
Coffee Milk
无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。
--------------------------------------------------------------------------------
有序列表
有序列表也是一个项目的序列。各项目前加有数字作标记。
有序列表以<ol>标签开始。每个列表项目以<li>开始。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
在浏览器中显示如下:
Coffee Milk
有序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。
--------------------------------------------------------------------------------
自定义列表
自定义列表不是一个项目的序列,它是一系列条目和它们的解释。
有序列表以<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
自定义列表的定义(标签<dd>)中可以加入段落、换行、图像,链接,其他的列表等等。
--------------------------------------------------------------------------------
更多示例:
有序列表的不同类型:
<html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>
这个例子显示了有序列表的不同类型。
无序列表的不同类型:
<html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
这个例子显示了无序列表的不同类型。
嵌套列表:
<html> <body> <h4>A nested 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>
这个例子说明了可以怎样嵌套列表。
嵌套列表2:
<html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </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>
这个例子说明了如何创建一个自定义列表。
|