表格
- <table>...</table>
- <tr>行
- <td>单元格
- <th>表头替代单元格,可以在thead和tbody中
- 表格结构:
- <thead>
- <tbody>
- table里面不能直接嵌套td(thead,tbody浏览器自动补全)
- rowspan :跨行,高度增加
- clospan:跨列,长度增加
- <caption>..表格标题..<caption>:必须是表格的第一个元素
- 列组:
- <clogroup> <col class=""><col class="" span="">.....</colgroup>
- 定义每列的样式,前后顺序与列一一对应
表单
- 使用form获取让用户提供数据
- action:url,用户输入完数据之后,提交数据的网址
- method:选择提交方式,post和get
- get:获取用户输入,安全。有可能会缓存。一次性发送到服务器。在浏览器可以看到url地址
- post:将用户输入读取到浏览器。不会缓存,数据会影响到服务器数据。两次发送,有中间站。在浏览器无法看到url地址
- <p>提交内容<input type="文本(text)name="项目类型""></p>
- <button type="submit"></button>
- url编码:
- http method
- get
- post
- head:不返回正文,返回head
- put:存储
- delete
- options:不返回内容,返回head选项
- 单行文本框,<input name=“username” value="默认值" placeholder="在未填写的时候提示输入内容" autofocus=“打开网页直接进入该文本框”>
- 多行文本框
- <textarea >......</textarea>
- cols:列 rows:行
- 输入验证
- <input requires >
- minlength:最小长度 maxlength:最大长度 placeholder:控制范围
- 或者正则表达式:1\d{10}:11位数字,第一位为1
- type=search和type=text下方确认按钮,一个是搜索,一个是提交
- 选择框
- radio
- 单选框
- 不同选项之间的name相同。成为一个选项组
- checkbox
- 多选框
- name相同
- label可以与选项组中的每一个选项关联
- <label for="aaaaa"></label> <p><input id="aaaaa"></p>将input和label关联
- select
- 选择框
- <option value=""></option> 选项组的value不同
- 通过<multiple size="可同时多选的选项个数"> 实现多选
- 通过shift或者拖拽选择多项
- 分组
- <optgroup label="分组类型"></optgroup>
- radio
- 隐藏一些内容,不让用户看见:<input type="hidden">
- 文件选择
- <input type="file" name="">
- 在表单中指定 enctype="multipart/form"
- 在input中添加属性 accept=""强制选择文件类型
- <input>特殊输入类型
- date
- time
- datetime-local
- week
- month
- time
- 数字验证合法性&range
- number,input=number,上下增减 min,max,step(点一下的大小)
- range:通过拖拽横条
- <input> color :不同浏览器不同
- button
- 按钮
- type属性:(默认submit)
- submit:提交
- button:无行为
- reset:重置表单或恢复默认值
- 回车提交:自动触发第一个submit事件
- 控件状态:
- reaonly:提交
- disable:不提交