电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> HTML>>HTML基础之HTML列表:

HTML基础之HTML列表

来源:www.cncfan.com | 2006-1-21 | (有2053人读过)

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>


这个例子说明了如何创建一个自定义列表。
上一篇HTML基础之HTML表格
下一篇HTML表单
HTML热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号