前端笔记-HTML 列表-20221021

HTML 列表

1.定义列表

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

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

?

1 2 3 4 5 6

<dl>         <dt>Coffee</dt>         <dd>Black hot tea drink</dd>         <dt>Milk</dt>         <dd>white cold drink</dd> </dl>

2.无序列表属性

dic:实心点

circle:空心点

square:方形

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<ul  type="square">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li> </ul> <ul type="disc">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li> </ul> <ul type="circle">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li> </ul>

 

3.有序列表属性

默认数组

"A”：大写A-Z

“a":小写a-z

"I":大写罗马子字母

“i":小写罗马字母

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<ol>     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li>     <li>菠萝</li>     <li>水蜜桃</li> </ol> < type="A">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li>     <li>菠萝</li>     <li>水蜜桃</li> </ol> < type="a">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li>     <li>菠萝</li>     <li>水蜜桃</li> </ol> < type="I">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li>     <li>菠萝</li>     <li>水蜜桃</li> </ol> <ol type="i">     <li>苹果</li>     <li>香蕉</li>     <li>梨子</li>     <li>菠萝</li>     <li>水蜜桃</li> </ol>

　　

3.嵌套列表

ul,li中再嵌套ul,li

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<ul>     <li>茶         <ul>             <li>绿茶</li>             <li>红茶</li>         </ul>     </li>     <li>水果         <ul>             <li>苹果</li>             <li>香蕉</li>             <li>梨子</li>         </ul>     </li>     <li>花         <ul>             <li>玫瑰</li>             <li>百合</li>             <li>康乃馨</li>         </ul>     </li> </ul>

4.嵌套列表2

ul,li中再嵌套ul,li,再嵌ul,li

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<ul>     <li>茶         <ul>             <li>绿茶</li>             <li>红茶</li>         </ul>     </li>     <li>水果         <ul>             <li>苹果</li>             <li>香蕉</li>             <li>梨子</li>         </ul>     </li>     <li>花         <ul>             <li>玫瑰                 <ul>                     <li>幼苗</li>                     <li>花苞</li>                     <li>成品</li>                 </ul>             </li>             <li>百合                 <ul>                     <li>一等品</li>                     <li>二等品</li>                     <li>三等品</li>                 </ul>             </li>             <li>康乃馨</li>         </ul>     </li> </ul>

5.定义列表：dl,dt,dd

?

1 2 3 4 5 6

<dl>         <dt>Coffee</dt>         <dd>Black hot tea drink</dd>         <dt>Milk</dt>         <dd>white cold drink</dd> </dl>

标签总结：

<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。