列表标签 ul，ol，li

ul、ol、li标签 都属于块级标签，独占一行

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容，li不能单独存在，必须包裹在ul，ol里面

<ul>:unordered lists的缩写 无序列表，无序列表中的每一项是<li>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <ul>

        <li>我的账户</li>

        <li>我的订单</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ul>

</body>

</html>

前面都右实心圆点

ul标签的属性： type：列表标识的类型

  • disc：实心圆(默认值)
  • circle：空心圆
  • square：实心矩形
  • none：不显示标识
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <!-- 无序列表 -->

    <ul type="none">

        <li>我的账户</li>

        <li>我的订单</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ul>

</body>

</html>

没有了前面的实心圆点，但前面还占着位置

<ol>:ordered listsde的缩写 有序列表，里面的每一项是<li>

前面显示数字

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <!-- 有序列表 -->

    <ol>

        <li>我的账户</li>

        <li>我的订单</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ol>

</body>

</html>

ol标签的属性：

type：列表标识的类型

  • 1：数字(默认值)
  • a：小写字母
  • A：大写字母
  • i：小写罗马字符
  • I：大写罗马字符
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <!-- 有序列表 -->

    <ol type="A">

        <li>我的账户</li>

        <li>我的订单</li>

        <li>我的收藏</li>

        <li>退出</li>

    </ol>

</body>

</html>

列表之间是可以嵌套的。举个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <ul>

        <li>北京市

            <ul>

                <li>海淀区</li>

                <li>朝阳区</li>

                <li>东城区</li>

            </ul>

        </li>

        <li>广州市

            <ul>

                <li>天河区</li>

                <li>白云区</li>

            </ul>

        </li>

    </ul>

</body>

</html>

前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  2. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  3. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  4. 前端 HTML body标签相关内容 常用标签 段落标签 p标签

    段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...

  5. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  6. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

  7. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  8. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

随机推荐

  1. Git服务器环境搭建(打造属于自己的存储库)

    Git服务器搭建之CentOs7-阿里云搭建 首先使用连接工具连接到远程的阿里云服务器CentOs7上. 1.安装Git及创建用户 # 安装Git $ yum install git # 创建一个gi ...

  2. golang net/http 包

    https://studygolang.com/articles/9467 https://www.jianshu.com/p/be3d9cdc680b 客户端: 用来发送请求, 并处理返回结果. 涉 ...

  3. [Tensorflow] Object Detection API - prepare your training data

    From: TensorFlow Object Detection API This chapter help you to train your own model to identify obje ...

  4. Win10系统Ping端口及利用telnet命令Ping 端口

    启用 telnet 客户端组件为 Ping 端口做准备 在程序界面下,选择“打开或关闭Windows功能”,如下图所示: 在打开的对话框中,找到“Telnet客户端”并勾选.最后点击“确定”,等待几分 ...

  5. collections模块和os模块

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...

  6. Caused by: org.postgresql.util.PSQLException: ERROR: operator does not exist: character varying = integer

    Springboot项目,使用postgresql数据库,mybatis做持久层框架, <select id="select" resultMap="BaseRes ...

  7. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  8. [No000011D].NETCORE1/19-.NET Core 指南

    .NET Core 是一个通用开发平台,由 Microsoft 和 GitHub 上的 .NET 社区共同维护.跨平台的,支持 Windows.macOS 和 Linux,并且可用于设备.云和嵌入式/ ...

  9. 请运行TestStaticInitializeBlock.java示例，观察输出结果，总结出“静态初始化块的执行顺序”。

    答:执行顺序:静态初始化块->初始化块->构造函数 静态初始化块:在第一次加载类时执行,与对象的创建无关. 构造代码块:在调用构造方法时执行. 构造函数:在调用构造函数时执行.

  10. hive拉链表

    前言 本文将会谈一谈在数据仓库中拉链表相关的内容,包括它的原理.设计.以及在我们大数据场景下的实现方式. 全文由下面几个部分组成:先分享一下拉链表的用途.什么是拉链表.通过一些小的使用场景来对拉链表做 ...