HTML列表(Lists)

来源:转载

HTML有三种列表形式:排序列表(Ordered List);不排序列表(Unordered List);定义列表(Definition List)。

排序列表(Ordered List)

排序列表中,每个列表项前标有数字,表示顺序。

排序列表由<ol>开始,每个列表项由<li>开始。

排序列表示例

 

<html>

<body>

<h4>一个排序列表(Ordered List):</h4>

<ol>

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

</body>

</html>

不排序列表(Unordered List)

不排序列表不用数字标记每个列表项,而采用一个符号标志每个列表项,比如圆黑点。

不排序列表由<ul>开始,每个列表项由<li>开始。

不排序列表示例

<html>

<body>

<h4>不排序列表(Unordered List):</h4>

<ul>

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ul>

</body>

</html>

定义列表

定义列表通常用于术语的定义。

定义列表由<dl>开始。术语由<dt>开始,英文意为Definition Term。术语的解释说明,由<dd>开始,<dd></dd>里的文字缩进显示。

定义列表示

<html>

<body>

<h4>定义列表(Definition List):</h4>

<dl>

<dt>野生动物</dt>

<dd>所有非经人工饲养而生活于自然环境下的各种动物。</dd>

<dt>宠物</dt>

<dd>指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物,又称作同伴动物。</dd>

</dl>

</body>

</html>

更多示例

不同类型(Type)的排序列表

<html>

<body>

<h4>排序列表,不设Type属性:</h4>

<ol>

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

<h4>排序列表,Type属性设为A:</h4>

<ol type="A">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

<h4>排序列表,Type属性设为a:</h4>

<ol type="a">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

<h4>排序列表,Type属性设为I:</h4>

<ol type="I">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

<h4>排序列表,Type属性设为i:</h4>

<ol type="i">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ol>

</body>

</html>

这个例子显示如何用Type属性设置排序列表项前的符号。

不同类型(Type)的不排序列表

<html>

<body>

<h4>Type设为disc的列表,列表项前面的符号是圆黑点:</h4>

<ul type="disc">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ul>

<h4>Type设为circle的列表,列表项前面的符号是空心圆:</h4>

<ul type="circle">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ul>

<h4>Type设为square的列表,列表项前面的符号是黑方块:</h4>

<ul type="square">

<li>php100网 php100学院之网页课程</li>

<li>php100网 php100学院之网页代码</li>

<li>php100网 php100学院之魔兽世界</li>

</ul>

</body>

</html>

这个例子显示如何用Type属性设置不排序列表项前的符号。

嵌套的列表

<html>

<body>

<h4>嵌套一层的列表:</h4>

<ul>

<li>肉类</li>

<li>蔬菜

<ul>

<li>番茄</li>

<li>青菜</li>

</ul>

</li>

<li>酒类</li>

</ul>

<h4>嵌套2层的列表:</h4>

<ul>

<li>动物

<ul>

<li>两栖动物</li>

<li>哺乳动物

<ul>

<li>人</li>

<li>猩猩</li>

</ul>

</li>

<li>鱼类</li>

</ul>

</li>

<li>植物</li>

</ul>

</body>

</html>

列表里可以含有子列表。通常用这种嵌套的列表,反映层次较多的内容。


分享给朋友:
您可能感兴趣的文章:
随机阅读: