列表-无序列表UL-有序列表OL-自定义列表DL/DT/DD

1.无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<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>
 
2.有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<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>
 
3.定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<html>
<body>
<h2>一个定义列表:</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置...</dd>
</dl>
</body>
</html>
 
4.嵌套无序列表
<html>
<body>
<h4>一个嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>
 
<html>
<body>
<h4>一个嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>