1.01.14列表和表格

1.列表标签

• 一般用于写导航栏

1. 无序列表

   1. ul无序列表
      • 独占一整行
      • 有内外边距
      • type属性有四个属性值
        • 实心圆disc（默认值）
        • 空心圆circle
        • 实心方块square
        • none 不显示符号
   2. li是列表的每一项
      • 独占一行
      • 没有内外边距
      • type属性有四个属性值
        • 实心圆disc（默认值）
        • 空心圆circle
        • 实心方块square
        • none 不显示符号
      • li含有一个 ::marker 伪元素
   • 小tips:行高等于高度，css中文字会垂直居中 line-height=容器高度

2. 有序列表

   1. ol有序列表

      • 独占一整行
      • 有内外边距
      • type属性有三个属性值
        • 大写A，小写a 字母序号
        • 大写I，小写i 罗马数字序号
        • 数字 数字序号

   2. li是列表的每一项

      • 独占一整行
      • 没有内外边距
      • type属性有三个属性值
        • 大写A，小写a 字母序号
        • 大写I，小写i 罗马数字序号
        • 数字 数字序号
      • li含有一个 ::marker 伪元素

3. 自定义列表

   1. dl自定义列表

      • 独占一整行
      • 没有内外边距

   2. dt标题

      • 独占一整行
      • 没有内外边距

   3. dd对于标题的描述

      • 独占一整行
      • 有外边距，没内边距

4. 列表嵌套
   所有列表可以相互嵌套
   如：

   <!-- 列表的嵌套: 在 li 标签内部, 嵌入一个完整的ul或ol列表 -->
   <ul>
        <li>衣服
            <!-- li内部嵌入二级列表 -->
            <ul>
                <li>T恤</li>
                <li>衬衫</li>
                <li>毛衣
                    <!-- li内部嵌入三级列表 -->
                    <ol>码数
                        <li>s</li>
                        <li>m</li>
                        <li>l</li>
                        <li>x</li>
                        <li>xl</li>
                    </ol>
                </li>
                <li>卫衣</li>
            </ul>
        </li>
        
        <li>美食</li>
        <li>住宿</li>
        <li>出行</li>
   </ul>
   

2.表格table标签

• 没有内外边距
• 表格不能直接包裹文字
• 表格的大小由内容撑开，也可以直接设置宽高

1. tr 行

   • 没有内外边距
   • 表格不能直接包裹文字

2. td 单元格

   • 没有内外边距
   • 可以包裹文字

3. 完整版table

   • 一般用table、tr、td就能实现一个表格，使用thead,tbody,tfoot,caption做的表格更加完整，可以使得浏览器加载表格时更加适配，提高用户体验
   • th 单元格
     • 相比于td,有文字加粗，居中的效果，常用于表头
   • thead表头
   • tbody表主体
   • tfoot表脚注
   • caption表格的标题 一般放在table标签里的第一行

4. 属性

   • border 表格边框
     • 使用时会显示红色
     • 例如：<table border="1"></table>
   • cellspacing 单元格与单元格之间的间距
     • cellspacing=0可以伪装单一边框，实际是两条边框重叠
       • 真正的单一边框应该用CSS:border-collapse属性
         • 其属性值如下：
           separate：默认值。边框会被分开。
           collapse：将边框会合并为一个单线的边框
           inherit：继承父元素的 border-collapse 属性的值，早期IE浏览器不支持此值。
     • 例如：<table border="1" cellspacing="0"></table>
   • cellpadding 单元格与里面内容的间距
     • 例如：<table border="1" cellspacing="0" cellpadding="5"></table>

5. 单元格的属性：跨行和跨列

   • rowspan跨行

     • 跨了x行，rowspan=“x”,必须注释掉该列的x-1个td单元格

   • colspan跨列

     • 跨了x列，colspan=“x”,必须注释掉该行的x-1个td单元格

   • 如果是table最后一行既进行跨行又进行跨列，表格会出现问题

     • 需要加上style="table-layout:fixed"才不会出问题
     • tableLayout 属性用来显示表格单元格、行、列的算法规则
     • table-layout 属性值
       • automatic ：默认。列宽度由单元格内容设定。
       • fixed ：列宽由表格宽度和列宽度设定。