Html-表格表单篇

表格

表格标签

• table标签：创建一个表格
• tr标签：在 table标签 中使用表示表格中的一行，有几个 tr 就有几行
• th标签：在 tr标签 中使用表示表头中的单元格,也可以当作是加粗的 td
• td标签：在 tr标签 中使用表示一个单元格，有几个 td 就有几个单元格
• 在 td标签 中使用的属性：
  • rowspan=”number”：纵向的合并单元格
    • 注意：rowspan=”0”,告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)
  • colspan=”number”：横向的合并单元格
    • 注意：colspan=”0”,告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。

长表格

• thead标签：表格的头部，在 table标签 中使用，包裹 tr标签 的代码`
• tbody标签：表格的主体，在 table标签 中使用，包裹 tr标签 的代码`
• tfoot标签：表格的底部，在 table标签 中使用，包裹 tr标签 的代码`
• 注意：如果没有用到以上标签，浏览器会自动向 table 中添加一个 tbody
  并将所有的 tr 都放到 tbody 中，『tr是tbody的子元素，不是table的子元素』
• 使用这三个标签创建的表格，在打印时，会在『每页都打印表格的头部和底部』
• 无论编写到什么位置，thead 中的内容，『永远都会显示在表格的头部』
• 而 tfoot 中的内容，『永远都会显示在表格的底部』
• caption标签: 表格标题，在表格外底部显示

表格样式

• 可以设置宽高
• 可以设置边框 border
• border-spacing：设置表格边框之间的距离
• border-collapse：设置表格的边框的合并
  • 如果将值设置 collapse，则 table 和 td 的边框将会自动合并为一个
  • 当设置了边框合并以后，border-spacing 将自动失效
• 默认情况下元素在 td 中是垂直居中的 可以通过 vertical-align 来修改
• display: table-cell;：将元素设置为单元格 td

表格嵌套

• 在一个表格中也可以嵌套其他的表格
• 表格布局，布局简单，但是维护麻烦，所以现在已经很少有人用
• 表格的列数由 td 最多的那个 tr 来决定
• 总结：table 嵌套 table

表单

form标签：创建一个表单

• 属性：
  • action=””：『form的必须的属性』，需要一个服务器的地址，提交表单时表单中的内容将会被提交到该地址
  • autocomplete=”off”：关闭自动补全

input标签: 创建一个表单项

• 默认用户添加的内容将会以『查询字符串(url地址?后边的内容)』的形式发送给服务器
• 查询字符实际上就是键值对结构，多个键值对之间使用&隔开：
  • 键：表单项指定的 name 属性值
  • 值：用户填写的内容
• 属性：
  • name=””：用户填写的名字，服务器根据这个来获取用户填写内容
  • value=””：为文本框指定一个默认值
  • checked：选项按钮的默认选中状态
  • readonly：将表单项设置为只读，数据会提交
  • disabled：将表单项设置为禁用，数据不会提交
  • autofocus：设置表单项自动获取焦点
  • type：指定表单项类型
  • required: 必填
  • placeholder=””: 文本提示，value 有值则不显示
  • multiple: 多选文件提交
• 示例 和 type 类型：

  属性值	示例
  button	按钮:
  checkbox	复选框：
  radio	单选： 通过name属性来分组的，相同的name属于一组
  email	邮箱：
  url	网址：
  password	密码框：
  text	默认文本框：
  number	步进器：
  tel	手机号码：
  search	搜索框：
  datetime-local	日期时间：
  date	日历-日期：
  time	时间：
  month	日历-年月：
  week	日历-周：
  color	颜色块：
  file	文件：
  hidden	隐形控件：
  image
  range	范围控件：
  reset	重置：
  submit	form中做提交：

button 标签

• 创建按钮，和 input 创建的按钮功能一致，但比它灵活
• 属性也一致

  <button type="submit">提交按钮</button>
  <button type="reset">重置</button>
  <button type="button">单纯的按钮</button>

下拉列表

• 使用 select 来创建一个下拉列表
• 使用 option 标签来创建下拉列表中的选项
• 下拉列表的 name 属性需要指定给 select 标签，value 属性需要指定给 option
  • selected：option 默认选中
  • 示例：

    <select name='star'>
    	<option value='ym'>xxx</option>
    	<option
    		value='wyb'
    		selected
    	>
    		wyb
    	</option>
    	<option value='xxx'>xxx</option>
    </select>