非零基础自学前端最后一遍一 HTML+CSS 12 HTML高级元素 12.1 列表元素的介绍和开发模式分析

﹏ヽ暗。殇╰゛Y 2024-03-24 08:21 33阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  12 HTML高级元素
         *   *  12.1 列表元素的介绍和开发模式分析
             *   *  12.1.1 认识列表元素
                 *  12.1.2 列表的实现方式

![在这里插入图片描述][5dffcd27f7a84cb38abd204998e7c888.png_pic_center]

#### 一 HTML+CSS ####

#### 12 HTML高级元素 ####

##### 12.1 列表元素的介绍和开发模式分析 #####

###### 12.1.1 认识列表元素 ######

在开发一个网页的过程中, 很多数据都是以列表的形式存在的

![在这里插入图片描述][a5e66de04298424d92d6abaea5504614.png_pic_center]

###### 12.1.2 列表的实现方式 ######

*  事实上现在很多的列表功能采用了不同的方案来实现:
    
     *  方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
     *  方案二: 使用列表元素, 使用元素语义化的方式实现;
 *  事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:
    
     *  原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
     *  比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
     *  虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
 *  HTML提供了3组常用的用来展示列表的元素
    
     *  有序列表：ol、li
     *  无序列表：ul、li
     *  定义列表：dl、dt、dd

[5dffcd27f7a84cb38abd204998e7c888.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/957aa06e58904cd9b081b5c34c0e5b12.png
[a5e66de04298424d92d6abaea5504614.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/82f621761cdd42d7b1c971d5bbebd57c.png