微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

列表标签——有序列表

简述有序标签
- 有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
有序列表的type属性：默认为1
- 1 表示列表项目用数字标号（1,2,3...）
- a 表示列表项目用小写字母标号（a,b,c...）
- A 表示列表项目用大写字母标号（A,B,C...）
- i 表示列表项目用小写罗马数字标号（i,ii,iii...）
- I 表示列表项目用大写罗马数字标号（I,II,III...）

有序列表单独使用实例

代码：

    <ol type="1">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

    <ol type="1">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

    <ol type="a">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

    <ol type="A">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

    <ol type="i">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

    <ol type="I">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ol>

实际效果：

有序列表嵌套使用实例

代码：

    <ol type="1">
        <li>张三家
            <ol>
                <li>张三一</li>
                <ol>
                    <li>张三一一</li>
                    <ol>
                        <li>张三一一一</li>
                        <ol>
                            <li>张三一一一一</li>
                            <li>张三二二二二</li>
                            <li>张三三三三三</li>
                        </ol>
                        <li>张三二二二</li>
                        <li>张三三三三</li>
                    </ol>
                    <li>张三二二</li>
                    <li>张三三三</li>
                </ol>
                <li>张三二</li>
                <li>张三三</li>
            </ol>
        </li>
        <li>李四家</li>
        <ol>
            <li>李四一</li>
            <li>李四二</li>
            <li>李四三</li>
        </ol>
        <li>王五家</li>
        <ol>
            <li>王五一</li>
            <li>王五二</li>
            <li>王五三</li>
        </ol>
    </ol>

实际效果：

快速生成有序列表的快捷键
- 代码：快速生成三个有序列表——li的数量根据*后的数字决定
  - ```
  ol>li*3
```
- 实际效果：
  - ```
     <ol>
      <li></li>
      <li></li>
      <li></li>
     </ol>
```

列表标签——无序列表

简述无序标签
- 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记无序列表始于<ul>标签。每个列表项始于<li>标签。
无序列表的type属性：默认为实心圆
- disc 默认实心圆
- circle 空心圆
- square 小方块
- none 不显示

无序列表单独使用实例

代码：

    <ul type="disc">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ul>

    <ul type="circle">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ul>

    <ul type="square">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ul>

    <ul type="none">
        <li>张三家</li>
        <li>李四家</li>
        <li>王五家</li>
    </ul>

实际效果：

无序列表嵌套使用实例

代码：

    <ul type="disc">
        <li>张三家
            <ul>
                <li>张三一</li>
                <ul>
                    <li>张三一一</li>
                    <ul>
                        <li>张三一一一</li>
                        <ul>
                            <li>张三一一一一</li>
                            <li>张三二二二二</li>
                            <li>张三三三三三</li>
                        </ul>
                        <li>张三二二二</li>
                        <li>张三三三三</li>
                    </ul>
                    <li>张三二二</li>
                    <li>张三三三</li>
                </ul>
                <li>张三二</li>
                <li>张三三</li>
            </ul>
        </li>
        <li>李四家</li>
        <ul>
            <li>李四一</li>
            <li>李四二</li>
            <li>李四三</li>
        </ul>
        <li>王五家</li>
        <ul>
            <li>王五一</li>
            <li>王五二</li>
            <li>王五三</li>
        </ul>
    </ul>

实际效果：
- 一级无序默认符号为实心圆。二级无序默认符号为空心圆。三级及以下无序默认符号为实心方块

无序列表常用类型：导航窗口
- 后期根据css设定横向的无序导航栏
  - 实际效果：
- 快捷生成无序列表的快捷键：
  - 代码：快速生成三个无序列表——li的数量根据*后的数字决定
    - ```
    ul>li*3
```
- 实际效果：
  - ```
      <ul>
          <li></li>
          <li></li>
          <li></li>
      </ul>
```
  - - 相关原理阐述：一级标签>二级标签*数量

本文含有隐藏内容，请开通VIP 后查看

py系统学习笔记：第七阶段：网页编程基础：第一章：HTML5：10.列表标签

目录

列表标签——有序列表

简述有序标签

有序列表的type属性：默认为1

有序列表单独使用实例

代码：

实际效果：

有序列表嵌套使用实例

代码：

实际效果：

快速生成有序列表的快捷键

代码：快速生成三个有序列表——li的数量根据*后的数字决定

实际效果：

列表标签——无序列表

简述无序标签

无序列表的type属性：默认为实心圆

无序列表单独使用实例

代码：

实际效果：

无序列表嵌套使用实例

代码：

实际效果：

无序列表常用类型：导航窗口

后期根据css设定横向的无序导航栏

快捷生成无序列表的快捷键：

网站公告

今日签到

热门文章

最新发布