极客学院第一天整理（表格，表单，input）

1、表格的整理

<table >    //表格的属性

  <tr> <td>1</td> </tr>

  <tr> <td>1</td> </tr>

</table>

表格的属性

     1、align=center：表示表格整体居中

     2、border=1px：设置表格的宽度

     3、cellspacing： 表示两个单元格之间的间距

     4、cellpadding：表示单元格里面的内容和边框的距离

     5、bgcolor：设置表格的颜色

     6、th表示标题表头，替代tr

     7、caption表示表格名字

     8、theader，tbody，tfooter，没有实际意义，但是将表格分为三个部分，其中theader和tfooter必须写在前面

     9、width和height：设置表格的高和宽

     10、colspan和rowsplan：合并行和合并列

2、如上图，表示的是细线边框，首先设置表格整体的bgcolor，然后设置每一行的bgcolor为白色，这样，我们如果将cellspacing设置为1像素，这样就会有1px空下来的边框，也就是我们所说的细线边框。

3、设置为th后。单元格里面的文字会自动的居中对齐，

4、垂直对齐vlign，表示文字在单元格里面垂直对齐

二、列表标签

1、无序列表ul  li 前面为实心小圆点

      type：disc  （为默认）就是实心小圆点

      type：circle    空心圆点

      type：square  实心方块

2、有序列表ol li 默认为阿拉伯数字

      type： 1  （默认） 阿拉伯数字

      type：a    小写英文字母顺序排列

      type：A   大写英文字母顺序排列

      type： i   小写罗马字符顺序排列

      type： I   大写罗马字符顺序排列

3、自定义列表dl dt dd

<dl>     //定义列表

<dt></dt>      //列表标题内容

<dd></dd>    //列表实际内容

<dd></dd>

<dd></dd>

</dl>

4、form表单标签

form 标签开始，action  规定当提交表单时向何处发送表单数据

method   get和post规定用于发送form-data的HTTP方法

get：通过地址栏发送，小速度快，post：隐私安全，地址栏没有数据的显示

name    规定表单的名称，起名字，区分表单

target   规定在何处打开action URL  属性值-blank，表示的是新窗口的打开，默认是在本窗口打开

5、多种input标签

<input type="类型"  name="名称" />

  type="text"  文本输入框

  type="password"  密码

  type="radio"  单选按钮      两个radio或者多个，添加统一的名字就可以设置单选按钮，初始化默认选中项checker=“checked”

  type="checkbox"  复选框   多个checkbox类型

  type="file"   文件上传   

  type="hidden"  隐藏域      添加值 value=“2016.10.1”  可以传出去的

  type="submit"  提交按钮    提交按钮，默认为get value的值显示按钮的值

  type="reset"     重置按钮    重置按钮必须在form中

  type="button"   普通按钮    做js调用时，有作用

  type="image"    图像按钮      让图像做按钮（src）

6、下拉框标签

<select name="名称">

<opton value="值1"> 文字信息</opton>

<opton value="值1"> 文字信息</opton>

</select> 

select标签属性

  1、name，必须填写

  2、size，规定下拉列表中可见选项的数目  显示个数

  3、multiple，规定可以选择多个选项    multiple=“multiple” （默认），定义可以选择好几个

option标签属性

  1、value，定义送往服务器的选项值，传递时需要加值，好辨认，此时跟文本内容没有关系

  2、selected ，规定选项（在首次显示在列表中时）表现为选中状态  

  3、disabled，  规定此选项应在首次加载时被禁用disabled=“disabled”  

  4、<optgroup>，  标签把相关的选项组合在一起，他是包裹在option上的，看你的分类

  5、label，为选项组规定描述，在optgroup里面，将标签分组了，且不可选中

7、文本域标签

  textarea，   name值必须

   1、name，规定名字

   2、cols，规定宽度

   3、rows，规定文本区内的可见行数

   4、disabled，规定禁用该文本区域，在标签内容里面写东西

   5、后期使用css来禁止拖动， style="resize:none",来禁止拖动

8、label标签的用法

方法1：label标签可以提供很好的用户体验，因为点击<label>标签时，对应的控件会被选择

      <label for="userName">用户名</label>

      <input type="text" id="userName" />

方法2：文字信息和文本框都放置在label标签内

      <label >

      <input type="text"  />

      </label>