html5--1.11列表
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属性
- 整数(默认值);
- 大(小)写字母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><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>大(小)写字母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><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>
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-09-05:27岁,宅加太忙,特此在网上找女朋友,vx:fan404006308
AI交流资料群:753014672