html5--1.11列表
学习要点：
1.无序列表的基本格式
ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签
<ul>
<li></li>
<li></li>
</ul>
2.无序列表的type属性
无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square
分别对应
- 实心圆
- 空心圆
- 实心方块
这里演示的就是ul中type为circle的效果
在css中可以设置更多更加复杂的效果，比如前面加小图片
3.有序列表的基本格式
ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签
<ol>
<li></li>
<li></li>
</ol>
4.有序列表的type属性
- 整数（默认值）；
- 大（小）写字母ABC...
- 大小写的罗马字母：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><ul></p> 22 <p> <li></li></p> 23 <p> <li></li></p> 24 <p></ul></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><ol></p> 42 <p> <li></li></p> 43 <p> <li></li></p> 44 <p></ol></p> 45 <a id="3"></a> 46 <h4>4.有序列表的type属性</h4> 47 <ol type="A"> 48 <li>整数（默认值）；</li> 49 <li>大（小）写字母ABC...</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><dl></p> 72 <p> <dt>列表项目一</dt></p> 73 <p> <dd>列表项目一的内容</dd></p> 74 <p> <dt>列表项目二</dt></p> 75 <p> <dd>列表项目二的内容</dd></p> 76 <p></dl></p> 77 <dl> 78 <dt>列表项目一</dt> 79 <dd>列表项目一的内容</dd> 80 <dt>列表项目二</dt> 81 <dd>列表项目二的内容</dd> 82 </dl> 83 <h4> 84 </body> 85 </html>