HTML学习之html列表介绍（代码实例）

来源：谷徳美食网

本篇文章就给大家带来HTML学习之html列表介绍，通过简单的代码示例来介绍。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

一，效果图。

二，代码。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html 列表</title></head><body> <!--无序列表--> <h4>An Unordered list</h4> <ul> <li>Cofferr</li> <li>tea</li> <li>Mide</li> </ul> <!--有序列表--> <ol start="50"> <li>Cooffee</li> <li>Tea</li> <li>Mike</li> </ol> <!--自定义列表--> <dl> <dt>Coffer</dt> <dd>--black hot drink</dd> <dt>mike</dt> <dd>--white cold drink</dd> </dl> <!--不同类型的有序列表--> <h4>Numbered list:</h4> <ol> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>orange</li> </ol> <h4>letters list:</h4> <ol type="A"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>orange</li> </ol>
 <h4>Lowercase letters list:</h4>
 <ol type="a">
 <li>apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ol>
 <h4>Roman numbers list:</h4>
 <ol type="I">
 <li>apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ol>
 <h4>lowercase Roman numbers list:</h4>
 <ol type="i">
 <li>apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ol>
 <!--不同类型的无序列表-->
 <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>
 <h4>disc bullets list:</h4>
 <ul style="list-style-type:disc">
 <li>Apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ul>
 <h4>circle bullets list:</h4>
 <ul style="list-style-type:circle">
 <li>Apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ul>
 <h4>square bullets list:</h4>
 <ul style="list-style-type:square">
 <li>Apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>orange</li>
 </ul>
 <!--嵌套列表-->
 <h4>A list inside a list:</h4>
 <ul>
 <li>Coffee</li>
 <li>Tea</li>
 <ul>
 <li>black tea</li>
 <li>green tea</li>
 </ul>
 <li>Mike</li>
 </ul>
 <!--嵌套列表2-->
 <h4>lists inside a 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>mick</li>
 </ul>
 <!--自定义列表-->
 <h4>A definition List</h4>
 <dl>
 <dt>coffee</dt>
 <dd>-black hot drink</dd>
 <dt>mike</dt>
 <dd>-white cold drink</dd>
</body>

</html>

参考资料：《菜鸟教程》

总结：