html5--1.11列表

最新推荐文章于 2023-09-02 22:42:10 发布

weixin_33852020

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量55

点赞数

本文详细介绍了HTML5中的列表类型，包括无序列表、有序列表及其属性设置方法，并讲解了自定义列表的使用。

html5--1.11列表

学习要点：

无序列表
有序列表
列表的属性
自定义列表

1.无序列表的基本格式

ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签

<ul>

</ul>

2.无序列表的type属性

无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square

分别对应

实心圆
空心圆
实心方块

这里演示的就是ul中type为circle的效果

在css中可以设置更多更加复杂的效果，比如前面加小图片

3.有序列表的基本格式

ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签

<ol>

</ol>

4.有序列表的type属性

整数（默认值）；
大（小）写字母A\B\C...
大小写的罗马字母：i ii .../I II III

这里设置的ol的type为大写字母A

li标签里面放图片链接都是可以的，元素的嵌套

5.有序列表的start属性

定义列表的开始序号，比如第一项不是数字1，而是从10开始.......

就把ol的start属性设置成不同就可以了

6.有序列表的value属性

定义某个单个列表项的序号.......

可以通过value属性来设置不连续列表
我们之前都是对ol操作，这里是对li操作
因为要设置每一项，所以可以每一项任意设置
比如说之前是连续的123，这里却跳到了10
做法是把跳的那一项li的value属性单独设置成10就好了
设置之后，后面的值会在这个设置的值上面递增

7.自定义列表

自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；

<dl>

　　<dt>列表项目一</dt>

　　<dd>列表项目一的内容</dd>

　　<dt>列表项目二</dt>

　　<dd>列表项目二的内容</dd>

</dl>

列表项目一

列表项目一的内容

列表项目二

列表项目二的内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1.11列表</title>
 6 </head>
 7 <body>
 8     <p>学习要点：</p>
 9     <p style="color: #ff7f50"> 
10     <ul>
11         <li><strong><a href="#1">无序列表</a></strong><br></li>
12         <li><strong><a href="#2">有序列表</a></strong><br></li>
13         <li><strong><a href="#3">列表的属性</a></strong><br></li>
14         <li><strong><a href="#4">自定义列表</a></strong></li>    
15     </ul>
16     </p>
17     <hr>
18     <a id="1"></a>
19     <h4>1.无序列表的基本格式</h4>
20     <p style="color: #ff0000">ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>
21     <p>&lt;ul&gt;</p>
22     <p>　　&lt;li&gt;&lt;/li&gt;</p>
23     <p>　　&lt;li&gt;&lt;/li&gt;</p>
24     <p>&lt;/ul&gt;</p>
25     <h4>2.无序列表的type属性</h4>
26     <p>无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square</p>
27     <p>分别对应
28         <ul type="circle" style="color: #ff0000">
29             <li><strong>实心圆</strong></li>
30             <li><strong>空心圆</strong></li>
31             <li><strong>实心方块</strong></li>
32         </ul>
33         <span style="color: #ff0000">
34             这里演示的就是ul中type为circle的效果
35         </span>
36         <p>在<strong><span style="color: #ff0000">css</span></strong>中可以设置更多更加复杂的效果，比如前面加小图片</p>
37     </p>
38     <a id="2"></a>
39     <h4>3.有序列表的基本格式</h4>
40     <p style="color: #ff0000">ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>
41     <p>&lt;ol&gt;</p>
42     <p>　　&lt;li&gt;&lt;/li&gt;</p>
43     <p>　　&lt;li&gt;&lt;/li&gt;</p>
44     <p>&lt;/ol&gt;</p>
45     <a id="3"></a>
46     <h4>4.有序列表的type属性</h4>
47     <ol type="A">
48         <li>整数（默认值）；</li>
49         <li>大（小）写字母A\B\C...</li>
50         <li>大小写的罗马字母：i ii .../I II III</li>
51     </ol>
52     <p>这里设置的ol的type为大写字母A</p>
53     <p>li标签里面放图片链接都是可以的，元素的嵌套</p>
54     <h4>5.有序列表的start属性</h4>
55     <p>定义列表的开始序号，比如第一项不是数字1，而是从10开始.......</p>
56     <p>就把ol的start属性设置成不同就可以了</p>
57     
58     <h4>6.有序列表的value属性</h4>
59     <p>定义某个单个列表项的序号.......</p>
60     <ol>
61         <li>可以通过value属性来设置不连续列表</li>
62         <li>我们之前都是对ol操作，这里是对li操作</li>
63         <li>因为要设置每一项，所以可以每一项任意设置</li>
64         <li value="10">比如说之前是连续的123，这里却跳到了10</li>
65         <li>做法是把跳的那一项li的value属性单独设置成10就好了</li>
66         <li value="20">设置之后，后面的值会在这个设置的值上面递增</li>
67     </ol>
68     <a id="4"></a>
69     <h4>7.自定义列表</h4>
70     <p>自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；</p>
71     <p>&lt;dl&gt;</p>
72     <p>　　&lt;dt&gt;列表项目一&lt;/dt&gt;</p>
73     <p>　　&lt;dd&gt;列表项目一的内容&lt;/dd&gt;</p>
74     <p>　　&lt;dt&gt;列表项目二&lt;/dt&gt;</p>
75     <p>　　&lt;dd&gt;列表项目二的内容&lt;/dd&gt;</p>
76     <p>&lt;/dl&gt;</p>
77     <dl>
78         <dt>列表项目一</dt>
79         <dd>列表项目一的内容</dd>
80         <dt>列表项目二</dt>
81         <dd>列表项目二的内容</dd>
82     </dl>
83     <h4>
84 </body>
85 </html>