列表标签（自用html笔记）

目录

列表

无序列表（重点）：

有序列表（理解）：

自定义列表：

列表更多的实例：

---

列表

（表格用来显示数据，列表用来布局）

列表特点：整齐，整洁。

列表分为无序列表，有序列表和自定义列表、

无序列表（重点）：

<ul>标签表示HTML页面中的无序列表

列表项用<li>标签定义

 例如：你喜欢吃什么？

• 牛奶
• 咖啡
• 其他

<ul>
    你喜欢吃什么？
    <li>牛奶</li>
    <li>咖啡</li>
    <li>其他</li>
</ul>

注意：

• <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
• <li>与</li>之间相当于一个容器，可以容纳所有元素
• 两个列表项之间是没有顺序的，是并列的
• css是可以设置前面的小黑点 ·

扩展知识：

可以添键type属性改变无序列表前小黑点的样式。

样式	描述
·一个加粗小黑点	<ul type="disc"> 一般默认为加粗黑点
一个空心小圆圈	<ul type="circle">
一个实心小方块	<ul type="square">

有序列表（理解）：

<ol>标签用于定义有序列表

<li>标签表示列

 例如：你喜欢喝什么?

1. 牛奶
2. 咖啡
3. 其他

<ol type="1">

    你喜欢喝什么？

    <li>牛奶</li>
    <li>咖啡</li>
    <li>其他</li>

</ol>

•  <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排列。
• 常用的type属性值分别为是1，a，A，i(小写罗马字母列表)，l（罗马字母列表）
• <ol start="3">中的start属性值为3，有序列表中的第一个序列号从3开始排列
• <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列

注意：（特点与无序列表类似）

• <ol>中只能存放<li>
• <li>中可以放任何元素
• css可设置前面的数字

自定义列表：

常用于对术语或名词进行解释或描述，自定义列表前没有任何项目符号

语法格式：<dl>                                        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

                <dt>定义项目/名字</dt>

                <dd>对这个项目/名字对其做出解释1</dd>

                <dd>对这个项目/名字对其做出解释1</dd>

                </dl>

例如：帮助中心

        账户管理

        购物指南

        订单操作

<dl>
    <dt>帮助中心</dt>  
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

注意：

• <dl>中只能放<dt>和<dd>
• <dt>和<dd>无个数限制，一般1个<dt>对应多个<dd>

列表更多的实例：

1. 不同类型的无序列表
2. 不同类型的有序列表
3. 嵌套列表

   <h4>一个嵌套列表：</h4>
   <ul>
     <li>咖啡</li>
     <li>茶
       <ul>
       <li>红茶</li>
       <li>绿茶</li>
       </ul>
     </li>
     <li>牛奶</li>
   </ul>
   

   ​​​​​​​

4. 嵌套列表2  （嵌套列表利用了<li>相当于一个容器，可以存放任何元素的这一特点）

   <ul>
     <li>咖啡</li>
     <li>茶
       <ul>
       <li>红茶</li>
       <li>绿茶
         <ul>
         <li>中国茶</li>
         <li>非洲茶</li>
         </ul>
       </li>
       </ul>
     </li>
     <li>牛奶</li>
   </ul>

5. 一个定义列表：

   <h2>一个定义列表：</h2>
   
   <dl>
      <dt>计算机</dt>
      <dd>用来计算的仪器 ... ...</dd>
      <dt>显示器</dt>
      <dd>以视觉方式显示信息的装置 ... ...</dd>
   </dl>