表格

  • 在现实生活中，人们经常使用表格来表示格式化数据
  • table标签创建一个表格
  • 用tr表示表格一行
  • 在tr里用td创建一个单元格
  • th是特殊的td ，表示表头的内容，不同在于会加粗和居中

  • 表格的样式

    • colspan横向合并单元格 rowspan纵向合并单元格
    • border-spacing指定边框之间的距离
    • border-collapse：collapse设置边框的合并
    • 在默认情况下元素在td里是垂直居中的，可以通过vertical-align：middle来设置
      • 给我们一个启发是通过元素设置成单元格来设置垂直居中

        长表格

  • 一些情况下表格是非常长的，这时就需要分成三个部分，表头，表格主体，表格底部

  • thead 永远在头部 tbody 中间 tfoot 底部
  • 这三个标签的作用只是用来区分表格的不同部分，都是table的子标签。好处就是标签随意摆放也不会影响表格

  • tr不是table子标签，而是tbody的子标签，在设置样式时注意后代选择器

    表单

  • 现实生活中表单用于提交数据

  • 在网页中也可以使用表单，用于将本地数据提交给远程的服务器
  • form标签。必须指定一个action属性，指向服务器的地址
  • form的属性input
    • 设置数据的名字name，服务器对应获取数据
    • value设置值
    • type
      • 文本框text
      • 邮件email，会检查输入格式
      • 提交按钮submit
      • 普通按钮button
      • 重置按钮reset
      • 密码password
      • 单选按钮radio
        • 还要设置相同的name才能做到单选
        • checked设置默认选项
        • value为单选传递的值
      • 多选框checkbox
      • 下拉列表select
        • option添加选项
        • selected设置默认选中
    • autocomplete设置自动补全
    • readonly设置只读，不能修改，但数据会提交
    • disabled设置禁用，点不到，数据不会提交
    • autofocus设置表单项自动获取焦点