2017-7月-9日html表格与表单

一，作业讲解
  考察点： 1.无序列表 li元素有几个
                2.li元素可以装任何元素，最后一个li、装了一个ol
                3.相对路径

二，学习目标
    1.表格（了解）
    2.表单 Form（掌握）
    3.表单元素（掌握）

三，表格(了解)
    1.表格的基本结构（掌握）： 认识3个标签
    <table>
        <tr>  表示行
          <td></td>  表示行里面的单元格
             ... n
          <td></td>
        </tr>
          ...
        <tr></tr>
    </table>
    
    2.属性 
       1. 属性的位置
          table：  align,  border，cellspacing， width, height，（掌握）  cellpadding,
          tr    
          td:   width  height

 

          扩展的属性（了解） 作用： 让表格的结构更加清晰
          1.<thead></thead>
          2.<tbody></tbody>
          3.<tfoot></tfoot>

          td --->  th   内容文字加粗，并且居中  代表我们的表头

        属性名称：  border-----整个表格的边框
                   cellspacing --- 边框与单元格之间的距离  常用用  cellspacing="0"
                   cellpadding --- 内容与单元格之间的距离  
                   width: 设置表格的宽度  
                   height：  设置表格的高度
                   align:  center (常用) left right

           扩展属性： borderColor 边框颜色
                     bgColor  background背景    背景颜色
                     一般设置到tr上
    3.单元格的合并(掌握)
        跨行合并： rowspan    删掉多余的单元格
        跨列合并： colspan    删掉多余的单元格

四，表单& 表单元素

    form  作用： 
          重要的属性(掌握)： action   提交地址
                      method：get  
                                      post
                      优缺点： 1.  是否安全？post更安全
                                    2.  参数能不能都在地址上看到？post不能看到
                                    3.  谁数据量更大？post装载数据量更大   大数量场景：音频，图片等
                          小数量场景：文字等。 
    input表单元素  type 值 1.输入框 text
                                      2.密码框password
                                     3.单选框radio
                                        4.复选框checkbox
                                        5.提交按钮submit
                                        6.重置按钮reset
    下拉框  select  用于下拉选择（实际开发，使用很少） （丑拒）
          语法（怎么写）补充完整
    <select name=””>
    <option></option>
    </select>
    文本域： textarea 用于多行文本的输入

五， H5中表单元素type值
    1.数字框  最常用
    2.日期框  丑拒