HTML列表

来源：互联网发布：2016淘宝开店得多少钱编辑：程序博客网时间：2024/05/22 13:43

HTML列表

HTML列表分: 无序列表<ul></ul>, 有序列表<ol></ol>, 列表项<li></li>, 自定义列表<dl></dl>,列表项<dd></dd>,列表项目<dt></dt>

1.无序列表：

<!DOCTYPE html><html><body><h4>list1</h4><ul style="list-style-type:disc">                              /*列表项为实心点*/<li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul><h4>list2</h4><ul style="list-style-type:circle">                             /*列表项为空心点*/<li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul><h4>list3</h4><ul style="list-style-type:square">                                /*列表项为方块*/<li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul></body></html>

2.有序列表

<!DOCTYPE html><html><body><h4>list1</h4><ol type="a"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>list2</h4><ol type="A"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>list3</h4><ol type="I"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>list4</h4><ol start="10"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol></body></html>

3.自定义列表

<!DOCTYPE html><html><body><h4>A Definition List:</h4><dl>  <dt>Coffee</dt>  <dd>- black hot drink</dd>  <dt>Milk</dt>  <dd>- white cold drink</dd></dl></body></html>

4.嵌套列表：

<!DOCTYPE html><html><body><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>Milk</li></ul></body></html>

0 0