列表标签

• 无序列表
• 格式：
  <ul>
  <li>需要显示条目内容</li>
  </ul>
• 作用：给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
• 应用场景：
  • 导航条
  • 新闻列表
  • 商品列表
• 注意：
  • 一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
  • ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现.
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
  • 这里指的无序是指对于主体来说内容没有先后之分
• 有序列表
• 格式：
  <ol>
  <li>需要显示条目内容</li>
  </ol>
• 作用：给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分
• 应用场景：
• 排行榜
• 用处极少了解为主
• 定义列表
• 格式：
  <dl>
  <dt></dt>
  <dd></dd>
  </dl>
• 作用：先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息
• 应用场景：
  • 网站底部相关信息
  • 图文混排
• 注意：
  • 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
  • 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
  • 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.
    推荐使用一个dt对应一个dd
  • 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

表格标签

• 格式：
  <table>
  <tr></tr>
  <td></td>
  </table>
• 作用：
  • 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式
  • table代表整个表格, 也就是一堆table标签就是一个表格。
  • tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行。

  • td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格。

    
    
    表格标签.png

表格标签属性

• border：默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
• width： 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
• height：默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
• cellspacing：外边距. 就是单元格和单元格之间的距离,默认情况下单元格和单元格之间的外边距的距离是2px
• cellpadding：内边距，就是单元格的边框和文字之间的间隙, 默认情况下内边距是1
• align：水平方向的对齐方式，它的取值有center、left、right
• 给table设置align属性, 是让表格在浏览器中居左/居右/居中
• 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
• 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
• 注意：如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
• valign：可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式， 它的取值有center、left、right
• 给table设置valign属性, 无效
• 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
• 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
• 注意：如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
• bgcolor：规定表格的背景颜色
• 给table设置bgcolor属性, 是给整个表格设置背景颜色
• 给tr设置bgcolor属性, 是给当前行设置背景颜色
• 给td设置bgcolor属性, 是给当前单元格设置背景颜色
• 细线表格的制作方式:
  • 给table标签设置bgcolor=“black” 给table标签设置cellspacing = "1px"
  • 给tr标签设置bgcolor=“white”
• 以上内容仅仅作为了解, 因为样式以后都是通过css来控制

表格中的其他标签

• caption：专门用来设置表格的标题
• 作用:只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
• 注意：
  • caption一定要写在table标签中, 否则无效
  • caption一定要紧跟在table标签后面
• th：专门用来存储每一列的标题
• 作用：
  • 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字
  • 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的

表格的结构

• thead：表格的表头信息
• tbody：表格的主体信息
• tfoot：表格的页尾信息
  <table>
  <caption>表格的标题</caption>
  <thead>
  <tr>
  <th>每一列的标题</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>数据</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
  <td>数据</td>
  </tr>
  </tfoot>
  </table>

单元格合并

• colspan：可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
• 例如;<td colspan="2"></td>
• 含义：把当单元格当做两个单元格来看待前，再删除多余的单元格就不会发生变形。
• rowspan：可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
• 例如：<td rowspan="2"></td>
• 含义: 把当前单元格当做两个单元格来看待
• 注意：
• 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
• 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并