web前段

1、ul标签

无序列表
  
    语法：
  各列表项之间没有次序，各列表项之间为并列关系
  列表容器
  <ul>
    列表项
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>

一般li里会嵌套a标签

注意：ul的直接子元素必须是li
li里可以嵌套任何标签

  应用场景：
      1.新闻列表
      2.导航
      3.商品列表

      块级标签
      特点：
      1.宽度在没有设置的情况下，默认跟父元素宽度一样大
      2.高度由内容撑开（小圆点--列表符-占位，所有没有内容的时候，高度显    示21px）
      3.垂直布局，独占一行
      4.自带外间距和内间距
      5.自带列表符
      6.去掉自带列表符：list-style:none;(给li、ul设置都可以)

  /* 这两种方式都可以去掉自带列表符 */
    ul {
      list-style: none;
    }

    ul li {
      list-style: none;
    }

/* 这两种方式都可以设置自带列表符 */
    ul {
      /* 设置列表样式类型 */
      /* 空心圆 */
      list-style-type: circle;
      /* 默认值 实心圆 */
      list-style-type: disc;
      /* 实心正方形 */
      list-style-type: square;
    }

    ul li {
      /* 设置列表样式类型 */
      /* 空心圆 */
      list-style-type: circle;
      /* 默认值 实心圆 */
      list-style-type: disc;
      /* 实心正方形 */
      list-style-type: square;
    }

 /* 一般用ul标签的时候，都会把自带样式清除 */
    * {
      /* 外间距 */
      margin: 0;
      /* 内间距 */
      padding: 0;
      /* 列表符 */
      /* list-style: none; */
    }

    ul {
      /* 列表符 */
      list-style: none;
    }

    /* 为什么要清除默认自带样式呢，因为在写页面的时候，这些间距样式需要重新设置，而不是用自带的样式 */

2、ol标签

有序列表
ol-li
各列表项有排列顺序，各列表项之间为并列关系

列表容器 
<ol>
    列表项 
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

注意：ol的直接子元素必须是li
li里可以嵌套任何标签

块级标签

特点：
1.宽度在没有设置的情况下，默认跟父元素宽度一样大
2.高度由内容撑开
3.垂直布局，独占一行
4.自带外间距和内间距
5.自带顺序列表符(1 2 3)
6.去掉自带列表符：list-style:none;(给li、ol设置都可以)

应用场景：
1.有顺序的列表

有序列表默认从1开始，依次增加顺序
1 2 3 ....
strat属性：开始值
写在ol的开始标签里
<ol start="10">

    reversed:倒序属性
    12345
    倒序：54321
    写在ol的开始标签里
    <ol reversed>

        <!-- 4 3 2 1 -->
        <ol reversed>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ol>

        <!-- 从10开始倒序  10 9  8  7  -->
        <ol start="10" reversed>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ol>