列表相关的标签

有序列表ol：

<!DOCTYPE html>
<html>
    <head>
        <title>this is a test html</title>
        <meta charset="utf -8">
    </head>
    <body>
        <!-- 
            1，ol标签里面只能是li标签，但li标签里面可以有任何标签
            2，编号是自动加的
            3，支持type属性：1， a, A, i, I。默认a
            4，支持start属性：取值只能是数字,标识从哪里开始
        -->
        <ol type="a" start="27">
            <li>飞流直下三千尺</li>
            <li>疑似银河落九天</li>
        </ol>
    </body>
</html>

效果：

 

 

无序列表：

<!DOCTYPE html>
<html>
    <head>
        <title>this is a test html</title>
        <meta charset="utf -8">
    </head>
    <body>
        <!-- 
          1, ul标签里面只能是li标签，li标签里面可以有任何标签
          2，默认是黑色实心园
          3，可以有type属性：disc（黑色实心圆）、circle（空心圆）， square（实心方块） 
        -->
        <ul type="circle">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </body>
</html>

效果：

 

 

自定义列表：

<!DOCTYPE html>
<html>
    <head>
        <title>this is a test html</title>
        <meta charset="utf -8">
    </head>
    <body>
        <!-- 
          
        -->
        <dl>
            <dt>我是图片</dt>
            <dd>我是内容1</dd>
            <dd>我是内容2</dd>
        </dl>
        <dl>
            <dt>我是图片</dt>
            <dd>我是内容1</dd>
            <dd>我是内容2</dd>
        </dl>
    </body>
</html>

效果：

 

posted @ 2022-04-01 10:47  Target_L  阅读(34)  评论(0)    收藏  举报