• 技术文章 >web前端 >html教程

    html5怎么实现列表

    青灯夜游青灯夜游2021-09-13 15:12:36原创340

    html5实现列表的方法:1、使用ol标签来创建有序列表,列表中利用li来表示列表项;2、使用ul标签来创建无序列表,列表中利用li来表示列表项;3、使用dl来表示列表项,使用dt来表示定义的内容, 使用dd来对内容进行解释说明。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    在html中也可以创建列表,html列表一共有三种:

    1、有序列表:使用ol标签来创建有序列表,使用li来表示列表项。

    2、无序列表:使用ul标签来创建无序列表,使用li来表示列表项。

    3、自定义列表:使用dl来表示列表项,使用dt来表示定义的内容, 使用dd来对内容进行解释说明。

    示例:

    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>    
     
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
     
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构,用来规定网页中哪里是标题,哪里是段落</dd>
    </dl>

    效果图:

    1.png

    列表间还可以嵌套:

    <ul>
        <li>aaa</li>
        <ul>
            <li>bbbb</li>
            <ul>
                <li>cc</li>
            </ul>
        </ul>
    </ul>

    2.png

    推荐教程:《html视频教程

    以上就是html5怎么实现列表的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:HTML5 列表
    上一篇:html怎么设置网页编码 下一篇:html怎么实现右对齐
    线上培训班

    相关文章推荐

    • HTML5 canvas如何绘制酷炫能量线条效果(附代码)• HTML5+CSS3动态画出一个大象• 如何使用HTML5+CSS3动态画一个笑脸• 使用HTML5 SVG绘制各种雪花图案• html5 app开发框架有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网