• 课时30.无序列表(掌握)


    1.什么是列表标签?

    列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎,告诉浏览器这一堆数据是一个整体

    2.HTML列表标签的分类

    2.1无序列表(企业开发中用到最多)(unordered list)

    2.2有序列表  (企业开发中用的最少)  (ordered list)

    2.3定义列表  (企业开发中用的其次多)   (definition list)

    3.无序列表作用:

    给一堆数据添加列表语义,并且这一堆数据中所有的数据都没有先后之分

    什么叫有先后之分?

    例如:排行榜

    什么叫没有先后之分?

    例如:中国有哪些城市

    4.无序列表格式

    <ul>

    <li>需要显示的条目内容</li>

    </ul>

    li其实是英文list item的缩写

    list是列表的意思,item是条目的意思,所以结合起来就是列表条目的意思

    5.注意点

    1. 一定要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给它们添加小圆点的
    • 如何去除小圆点?

    <head>

    <style type="text/css">

    ul {

    list-style:none;

    }

    </head>

    • 为什么企业开发中有序列表用的非常少?

    因为有序列表能做的无序列表也能做,如在无序列表中添加序号:

    <ul>

    <li>1.广州</li>

    <li>2.北京</li>

    <li>3.上海</li>

    <li>4.武汉</li>

    </ul>

            2.ul标签和li标签是一个整体,是一个组合,所以一般情况下ul标签和li标签都是一起出现,不会单个出现,也就是说不会单独使用一个ul标签或者单独使用一个li标签,都是结合在一起使用。

            3.由于ul标签和li标签是一个组合,所以ul标签中不推荐包含其它标签,也就是说以后你在ul标签中只会看到li标签。

    <ul>

    <h2>中国的城市有哪些</h2>

    <li></li>

    <li></li>

    </ul>

    这种写法是不提倡的

    • 无序列表应用场景:
    1. 新闻列表
    2. 商品列表
    3. 导航条

    有人说导航条是横着的,列表是竖着的,无法出现这种效果,其实是可以的,但是需要用到css,在<head></head>之间写

    li {

    float:left;

    background-color:yellow;

    150px;

    height:50px;

    text-align:center;

    line-height:50px;

    }

  • 相关阅读:
    【区块链整理】四、区块链数据结构
    【区块链整理】三、以太坊挖矿算法 ETHASH
    【区块链整理】二、比特币交易脚本
    【区块链整理】一、概念
    FISCO BCOS CRUD 功能和 CNS 合约命名服务杂记
    前台静态资源打包ios
    叹而立之年,忆往昔旧事
    基于Bootstrap table组件实现多层表头配置
    js或jQuery获取当前屏幕的各种高度
    echarts图表基础配置
  • 原文地址:https://www.cnblogs.com/luckyshuangshuang/p/9145792.html
Copyright © 2020-2023  润新知