首页 > web前端 > html教程 > html列表快速预览

html列表快速预览

无忌哥哥
发布: 2018-06-29 10:08:35
原创
2024 人浏览过

列表是一种非常有用的数据展现方式,可以扩展出非常多的有意思的功能,例如导航,布局等。

列表主要有三种:

1. 无序列表:

    标签,必须与
  • 子标签配对使用

    2. 有序列表:

      标签,与
        使用规则一样,可以看作是无序列表的一个特例,实际开发中使用不多

        3. 自定义列表:

        非常像名词解释,用途非常广泛,例如底部导航,内容详情页,联系信息,商品描述等.

        ul有一个属性type,可以设置列表项前面的标记 

        type="disc" 实心小黑点,这是默认一级列表的标记

        type="circle" 空心小圆点,这是二级列表默认标记

        type="square" 实心方块

        <html>
        <head>
        <meta charset="UTF-8">
        <title>1-1.列表快速预览</title>
        </head>
        <body>
        <ul type="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Bootstrap</li>
        </ul>
        <hr>
        <h4>单身狗的周未</h4>
        <ol>
        <li>自己请自己看场电影希望有艳遇</li>
        <li>购买充气娃娃2个</li>
        <!-- 列表是可以嵌套的 -->
        <ul>
        <li>冰冰款2个</li>
        <li>凤姐款1个</li>
        </ul>
        <li>玩"吃鸡"</li>
        <li>为心目中的女主播打Call</li>
        </ol>
        <hr>
        <h4>后端编程语言:</h4>
        <dl>
        <dt>PHP</dt>
        <dd>超文本预处理编程语言</dd>
        <dt>MySQL</dt>
        <dd>全球最流行的关系型数据库管理工具</dd>
        <dt>ThinkPHP5.1</dt>
        <dd>国内最流行的中文轻量级PHP开发框架</dd>
        </dl>
        </body>
        </html>
        登录后复制

        以上是html列表快速预览的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板