ul和ol的区别以及经验总结

一.ul是无序列表

        网页中最为常见的列表，各个列表项之间为并列关系，没有顺序级别之分，如导航栏，新闻话题展示区等。

        默认示例表现为（默认带有实心圆）：

<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
</ul>

常见问题：

1.去除默认样式的实心圆：

<style>
        /* 嵌入式使用css,一般写在head中 */
    ul li {
        list-style-type: none; 
    }
</style>

/* list-style-type的其它取值

                        none   无标记。

                        disc    实心圆（默认值）

                        circle  空心圆

                        square  实心方块

                        decimal 阿拉伯数字

                        decimal-leading-zero 0开头的阿拉伯数字(01,02……)

                        cjk-ideographic 汉字小写数码（一，二）

                        lower-roman  小写罗马数字

                        upper-roman  大写罗马数字

                        lower-alpha  小写英文字母

                        upper-alpha  大写英文字母

    */

2.使用图片替代实心圆点：

<style>
/* 嵌入式使用css,一般写在head中 */
    ul li {
        /* 小括号里为图片的相对路径 */
        list-style-image: url(./picture.png); 
   }
</style>

---

二.ol是有序列表

        各个列表项会按照一定顺序排列，如网页中常见的游戏排行榜，歌曲排行榜等。

        默认示例表现为（默认带有数字）：

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
</ol>

        样式修改方法与ul类似。

常见问题：

1.修改有序列表的起始数字由（默认的1变成2）

<ol start="2">
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
</ol> 

---

 扩展：

ul 和ol都是是块级元素可以定义宽和高 。

<li>表示行排列不要单独使用，需要放在<ul>和<ol>里面配合使用，不然会导致代码混乱，不好维护等其他问题。

HTML5不再支持<ul> type 属性，请使用 CSS替代。

CSS 语法:<ul style="list-style-type:square">