9.HTML基础——列表标签

列表标签

什么是列表标签？

列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

HTML中列表标签的分类

• 无序列表（最多）（unordered list）
• 有序列表（最少）（ordered list）
• 定义列表（其次）（definition list）

无序列表

1.什么是无序列表

给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分
（先后之分：排行榜；
无先后之分：中国有哪些城市）

2.格式

<ul>
  <li>需要显示的条目的内容</li>
</ul>

li其实是英文list item的缩写
list是列表的意思
item是条目的意思

3.注意点

• 一定要注意ul标签是用来给一堆数据添加列表语义的，而不是用来添加小圆点的；
• ul标签和li标签是一个整体，是一个组合，所以一般情况下不会单独使用一个ul标签或者单独使用一个里标签，都是结合在一起使用的；
• 由于ul标签和li标签是一个组合，所以ul标签中不推荐包含其他标签，也就是说在ul标签中只能看到li标签
• 前面说过ul标签中最好只放li标签，但是在企业开发中，li标签中的内容可能会很复杂，所以我们可以继续在li标签中添加其他标签来丰富界面。
  总结：
  1.一定要记住ul标签中最好只放li标签
  2.但是li标签中还可以继续放其他标签
• 无序列表中的li标签中除了可以添加其他标签来丰富界面以外，还可以添加ul标签来丰富我们的界面，也就是说ul中有li，li中又可以有ul

4.应用场景

1. 新闻列表
2. 商品列表
3. 导航条
   一看到导航条就要想到使用ul

练习一：
<h1>时政专题</h1>
<!--
虽然通过标签属性可以修改样式，但是在企业开发中不能这么做
-->
<hr align="left" width="700">
<ul type="circle">
    <li>世界和平论坛，中俄与美法英交锋</li>
    <li>31省份累计报告接种新冠病毒疫苗131841.7万剂次</li>
    <li>台湾新增17例死亡 累计死亡逾700例</li>
    <li>深圳发布新规：大数据“杀熟”最高可罚5000万 禁止“APP不授权不能用”</li>
    <li>互联网大厂反“内卷”？做做样子还是良心发现？</li>
</ul>

练习二：
<h1>四大名著</h1>
<ul>
  <li>
    <h2>《三国演义》</h2>
      <p>《三国演义》（全名为《三国志通俗演义》，又称《三国志演义》）是元末明初小说家罗贯中根据陈寿《三国志》和裴松之注解以及民间三国故事传说经过艺术加工创作而成的长篇章回体历史演义小说，与《西游记》《水浒传》《红楼梦》并称为中国古典四大名著。该作品成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文，该版本也成为诸多版本中水平最高、流传最广的版本。 [1] </p>
  </li>
  <li>
    <h2>《水浒传》</h2>
     <p>《水浒传》是元末明初施耐庵（现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有）编著的章回体长篇小说。全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。</p>
  </li>
  <li>
    <h2>《西游记》</h2>
      <p>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存明刊百回本《西游记》均无作者署名。清代学者吴玉搢等首先提出《西游记》作者是明代吴承恩。 [1] </p>
  </li>
  <li>
    <h2>《红楼梦》</h2>
      <p>《红楼梦》，中国古代章回体长篇小说，中国古典四大名著之一，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美以及中国古代社会世态百相的史诗性著作。</p>
  </li>
</ul>

<h1>物品清单</h1>
<ul>
  <li>
    <h2>蔬菜</h2>
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
      <li>黄瓜</li>
    </ul>
  </li>
  <li>
    <h2>水果</h2>
    <ul>
      <li>苹果</li>
      <li>桃子</li>
      <li>香蕉</li>
    </ul>
  </li>
</ul>

5.快捷方式

在webstorm中如何快速编写一个ul的格式

<!--格式简化输入法：
ul>li*3,然后按tab键，即可生成-->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!--ul>li*2>h2+ul>li*3,然后按tab键，即可生成-->
<ul>
  <li>
    <h2></h2>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <h2></h2>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

有序列表

1.什么是有序列表？

给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分

2.格式

<ol>
  <li></li>
</ol>

其他用法和ul都差不多，也就是应用场景、注意点和ul差不多。

定义列表

1.什么是定义列表？

给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息。

2.格式

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

其实dt和dd都是英文缩写
dt————definition title的缩写，含义就是定义列表中的标题；
dd————definition description的缩写，含义就是定义标题对应的描述的。

3.应用场景

• 网站尾部的相关描述信息
• 图文混排

4.注意点

1. 和ul/ol一样，dl和dt/dd是一个整体，所以一般情况下他们都不会单独出现，都是一起出现；
2. 和ul/ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签；
3. 一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐这样子做，推荐使用一个dt对应一个dd；
4. 和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签。

快捷方式

dl>dt+dd,然后按下tab键