简单的了解 html #表格 #表单

#块级元素和行内元素

块级元素	行内元素	行内块元素
单独成行 (align有效)	与其他行内元素/行内块 共用一行 (align无效)	与其他行内元素/行内块元素共用一行(align无效)
div h1~h6 p pre hr	span i em b strong	input

表格的属性

<table>
  <tr>       <!-- table 行 -->
    <td></td> <!--table 列  -->
  </tr>
</table>

#table 的属性
border="1" 
bordercolor="purple" 
width="200px" 
height="200"  
align="center"  设置表格本身水平对齐方式
bgcolor="aquamarine"
cellpadding="10"  边框到内容的距离
cellspacing="0"    边框与边框之间的距离

#tr 的属性值
align="right"   设置内部文本的水平对齐方式 left/center/right
valign="bottom" 设置内部文本的垂直对齐方式  top/middle/bottom
bgcolor="颜色"

#td 的属性值
width=""
height=""
align="right" 
valign="top" 
bgcolor="颜色"
rowspan=""  跨行合并
colspan=""   跨列合并

#表格标题
<caption>表格标题</caption>

#行列标题
<th></th> 替换<td></td> 文本加粗 居中

#行分组
<thead></thead>  表头
<tbody></tbody>  表主体
<tfoot></tfoot>  表脚

表单

<form></form>  
用户输入控件必须有name属性，不然数据得不到
属性
1.action=""  请求提交的url---->接口
2.method="请求方法"  get 默认缺省值,显式传参，参数出现在地址栏（查询字符串）最大2kb
                          后台对应req.query接收
                     post 隐式传参，参数在请求主体中，可以提无限大的数据
                          后台对应req.body接收

表单控件

<input>
公有属性
type="" 设置了当前控件的类型 默认缺省值text
name="" 定义控件名称，如果当前控件需要提交给服务器，必须写name属性
          控件有了name属性，数据才能被form表单自动收集整理，后台才能接到
          ajax中，不使用form表单，没有自动收集整理数据的能力，不需要name
          但是，单选框和复选框要用name做分组
value="" 用户在控件中填入的数据
所以在form中提交的查询字符串格式 name=value 比如 upwd=12345
disabled  无值属性，禁用，控件不能使用，只能看不能改，也不能提交

#input 元素

1.文本框和密码框
type="text"
type="password"
专属属性  maxlength="" 设置输入的最大字符数
          readonly  只读，无值属性，只能看不能改，可以提交
          placeholder="" 占位符
2.按钮
type="submit"  点击之后，自动的收集form中数据，并发送请求
type="reset"   让表单恢复到初始状态
type="button"  普通按钮，用来绑定事件，调用js代码
专属属性  value不会被提交，而是设置按钮上文本
h5提出<button>h5的按钮</button>标签，功能等同于submit

3.单选框和复选框
type="radio"  
type="checkbox"
属性name在这里有两个功能
         1.设置控件名称，给后台req.query.gender使用
         2.把多个单选按钮分为一组
value 一定要设置value，不然提交的时候，只会接收到on
checked 默认选中，无值属性

4.隐藏域
数据可以提交，但是不给用户看
type="hidden"

5.文件选择框
上传文件，前置条件method="post" enctype="multipart/form-data"
type="file" 
属性 multiple，多重的，按住ctrl可以提交多个文件


1.邮箱验证，验证用户填写的内容 必须有@，@前后必须有内容
<input type="email" name="mail">
2.搜索类型，添加了快速删除的小叉叉
<input type="search" name="search">
3.url类型，验证用户输入了http://或者https://
<input type="url" name="url">
4.电话号码类型，移动端激活文本框，弹出虚拟键盘
<input type="tel" name="phone">
5.数字类型，用户只能填写数字和e
<input type="number" name="num">
6.范围类型，提供了一个范围的滑块
<input type="range" name="huakuai">
7.颜色类型
<input type="color" name="color">
8.日期类型，提供一个日期选择的组件，控制了日期的格式
<input type="date" name="date">
9.月份类型
<input type="month" name="m">
10.星期类型
<input type="week" name="week">

下拉菜单

<select name="">
 <option value="">内容</option>
</select>
当option没有定义value，select的value为选中的那个option的内容
当option有value，select的value为选中的那个option的value值
属性 select 有name,value
              size 为1，是下拉选择框，>1为滚动选择框
              multiple 无值属性，让滚动选择框实现多选
属性 option有 value
              selected 默认选中