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

互联网 18-10-16

本篇文章就给大家带来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>

参考资料：《菜鸟教程》

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程，Html5视频教程，bootstrap视频教程！

以上就是HTML学习之html列表介绍（代码实例）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： ol