列表标签之无序标签(本文为个人学习笔记，内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 ＞ 所有知识点归属原作者，仅作非商业用途分享)

列表标签之无序标签

无序列表

1. 无序列表与有序列表(ol)不同的是：它没有顺序，排名不分先后

2. 无序列表是一个项目的列表，此列项目使用粗体圆点(•)进行标记(当然默认是这样，后续可用type属性更改)\

3. 无序列表始于<ul>标签，每个列表始于<li>标签

   具体操作过程：
   

   • 
     
   • 这是第一个列表项
   • 
     
   • 这是第二个列表项
   • 
     
   • 这是第三个列表项
   • 
     

• 与有序列表相同的是：ul也有自己的type属性，设置前缀样式

ul的属性type拥有的选项

• disc------默认实心圆
• circle------空心圆
• square------小方块
• none------不显示(前缀)
  无序列表也是可以嵌套的，准确来说无序列表和有序列表可以搭配使用
  同样不建议多次嵌套，不仅内容混乱，而且难以维护

无序列表与有序列表嵌套，即它们部分type属性演示

<h3>食物</h3>                 
<ul type="disc"><li>水果<li><ol type="1"><li>苹果</li><li>香蕉</li><li>西瓜</li></ol><li>蔬菜<li><ol type="A"><li>茄子</li><li>西红柿</li><li>西兰花</li></ol><li>肉类<li><ul type="square"><li>鸡肉</li><li>鱼肉</li><ol type="I"><li>海带鱼</li><li>黄花鱼</li><li>娃娃鱼</li></ol><ul><li>牛肉</li>
<ul>

食物

• 水果
• 1. 苹果
  2. 香蕉
  3. 西瓜
• 蔬菜
• A. 茄子
  B. 西红柿
  C. 西兰花
• 肉类
• • 鸡肉
  • 鱼肉
    I. 海带鱼
    II. 黄花鱼
    III. 娃娃鱼
  • 牛肉

总结

• 无序列表没有顺序

• 可以用type属性替换前缀样式

• 可以嵌套，但不建议多次嵌套，不仅内容混乱，而且难以维护

• 无序列表与有序列表可以搭配使用

  无序列表常见应用场景

  • 无序的列表效果
  • 导航效果

• 快捷键：ul>li*n
  1.其中n可以是任何数，n是多少，所创建的列表(li)就是多少
  2.好处是，可以快速创建列表项，减少频繁打出li标签次数，极大提升开发效率。
  3.当然有序列表也有快捷方式:ol>li*n
  4.单独列表项快捷方式:li*n