web 0基础第二节 列表标签

1.有序列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>有序列表 比较重要</title>

    <!--

    列表:

    1.有序列表

        ol  来设置有序列表

          li:  设置列表项

                设置   属性type = “ 1 ” 或者 A  a  I  i  分别从这些作为序号开始排序  

                一般情况下默认用数字来排序

                属性start = “ 1000 ”  或B之类的  设置从这个序号开始排序

                <li type="a">  iejfcmvn</li>   这种方式只是影响该行的序号,不影响其他行的序号

     -->

   

</head>

<body>

    <!-- 1.有序基本格式 -->

     <ol type="I">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

     <ol type="1">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

     <ol >

        <li type="a">wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

</body>

</html>

    2.无序列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>无序列表</title>

    <!--

    无序列表

        ul:无序列表

           li:列表项

          和有序列表不同,他的序号图标没有排列的意思,一般默认为实心圆点

     -->

</head>

<body>

    <!-- 实心圆  type=“ disc ” -->

    <ul>

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

    <!-- 空心圆  了解即可 -->

    <ul type="circle">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

    <!-- 实心正方形  了解即可 -->

    <ul type="square">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

</body>

</html>

   

    3.数据列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>数据列表</title>

    <!--

        格式:

           dl:数据列表             前面没有序号和原点之类的 但是有和标题一样的分级

                dt:数据小标题

                    dd:数据列表项

                   

    从列表实际情况可以看出,都是换了行的  所以列表是一个块级元素

                    -->

</head>

<body>

    <dl>

        <dt>水果

            <dd>芒果</dd>

            <dd>草莓</dd>

            <dd>葡萄</dd>

        </dt>

        <dt>爱好

            <dd>小说</dd>

            <dd>美食</dd>

            <dd>小动物</dd>

        </dt>

    </dl>

    <!-- 也可以尝试做嵌套和一些非常规的写法 -->

        <ol>

            <ul>

            <li>juefbu</li>

            <li>juhcu</li>

            <li>ekihci</li>

            </ul>

        </ol>

     <!--  认准的是最接近的列表种类吗   这目前是个猜想  可以自己再实验一下 -->

     <ol type="A">

        <li>

            <ul>

                <li>wei</li>

                <li>jin</li>

                <li>yu</li>

            </ul>

        </li>

        <li><pre>          

            wei

            sha

            yu</pre>

        </li>

     </ol>

     <li>

        jin yu s ge da sha diao

     </li>

</body>

</html>

 <!--想要嵌套,要把想嵌套的列表看做主列表的 的一个序列  也就是在写其中的列表之前要加上一个li-->

<!--在不设置是哪类列表 直接由li 组成 的一般默认为无序列表-->

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值