HTML列表

有序列表<ol>

  有序列表默认的排序方式:以数字的递增排序。

  私有属性:

        type,表示有序列表的排序方式

        选项有:默认是1,a,A,I,i

        start,表示从几开始排序(只接受数字,默认值是Number)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>有序列表</title>
 6 </head>
 7 <body>
 8 <ol type="a" start="4">
 9     <li>苹果卖疯了</li>
10     <li>小米卖疯了</li>
11     <li>华为卖疯了</li>
12 </ol>
13 </body>
14 </html>

注:<li>标签表示列表项

无序列表<ul>

  无序列表的默认排序方式是实心小圆点。

  私有属性:

       type,表示无序列表的排序类型。

       type="disc",默认属性,实心小圆点

       type="square",显示是实心小方点

       type="circle",显示是空心小圆点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>无序列表</title>
 6 </head>
 7 <body>
 8 <ul type="circle">
 9     <li>苹果</li>
10     <li>锤子</li>
11     <li>OPPO</li>
12 </ul>
13 </body>
14 </html>

列表嵌套

  列表是可以嵌套的,嵌套时建议最多嵌套 3 层。实际开发时,需要配合 CSS 实现菜单类内容。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>列表嵌套</title>
 6 </head>
 7 <body>
 8 <ol>
 9     <li>
10         苹果
11         <ol type="a">
12             <li>烟台苹果</li>
13             <li>山西苹果</li>
14             <li>辽宁苹果</li>
15         </ol>
16     </li>
17     <li>西瓜</li>
18     <li>香蕉</li>
19 </ol>
20 <ul>
21     <li>
22         苹果
23         <ul>
24             <li>烟台苹果</li>
25             <li>山西苹果</li>
26             <li>辽宁苹果</li>
27         </ul>
28     </li>
29     <li>西瓜</li>
30     <li>香蕉</li>
31 </ul>
32 <ul>
33     <li>
34         苹果
35         <ol type="a">
36             <li>烟台苹果</li>
37             <li>山西苹果</li>
38             <li>辽宁苹果</li>
39         </ol>
40     </li>
41     <li>西瓜</li>
42     <li>香蕉</li>
43 </ul>
44 </body>
45 </html>

定义列表(自定义列表)<dl>,<dt>,<dd>

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

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

    <dl>标签定义一个描述列表

    <dt>标签定义一个描述列表的项目/名字

    <dd>标签被用来对一个描述列表中的项目/名字进行描述

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定义列表</title>
 6 </head>
 7 <body>
 8 <dl>
 9     <dt>于老师三大爱好</dt>
10     <dd>1.抽烟</dd>
11     <dd>2.喝酒</dd>
12     <dd>3.烫头</dd>
13 </dl>
14 </body>
15 </html>

  

  

  

  

原文地址:https://www.cnblogs.com/billyang1209/p/7603792.html