前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

 

 

列表标签 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>

 

 

posted @ 2019-03-29 11:37  minger_lcm  阅读(1357)  评论(0)  编辑  收藏  举报