Rumah > hujung hadapan web > html tutorial > html列表快速预览

html列表快速预览

无忌哥哥
Lepaskan: 2018-06-29 10:08:35
asal
2053 orang telah melayarinya

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

列表主要有三种:

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>
        Salin selepas log masuk

        Atas ialah kandungan terperinci html列表快速预览. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan