码迷,mamicode.com
首页 > Web开发 > 详细

HTML列表

时间:2016-06-30 01:15:37      阅读:506      评论:0      收藏:0      [点我收藏+]

标签:

定义无序列表,使用ul标签

<html>
    <body>
        <h4>定义一个无序列表</h4>
        <ul>
            <li>咖啡</li>
            <li>tea</li>
            <li>coco</li>
        </ul>
        </body>
</html>

定义一个有序的列表,使用ol标签

<html>
    <body>
        <h4>定义一个无序列表</h4>
        <ol>
            <li>咖啡</li>
            <li>tea</li>
            <li>coco</li>
        </ol>
        <ol start="50">
            <li>咖啡</li>
            <li>tea</li>
            <li>coco</li>
        </ol>
        </body>
</html>

定义列表,自定义列表不仅仅是一列项目,而是项目及其注释的组合

自定义列表从<dl>标签开始,每个自定义列表项以<dt>开始,每个自动以列表项的定义以<dd>开始。

<dl>
<dt>coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

不同类型的无序列表

<html>
<body>

<h4>Disc 项目符号列表:</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表:</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表:</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>

 

不同类型的有序列表

<html>
<body>

<h4>数字列表:</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表:</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表:</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表:</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表:</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

 

定义列表

<html>

<body>

<h2>一个定义列表:</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

 

HTML列表

标签:

原文地址:http://www.cnblogs.com/changzuidaerguai/p/5628682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!