Web前端(一):HTML基础之表格、表单

文章目录

  • 表格的用途
  • 画一个最简单的表格只需3个标签
  • 分层的表格(为了语义化)
  • 表格常用属性
  • 跨行与夸列(合并单元格)
  • 给表格添加标题
  • 表单元素
  • H5新增的表单元素
  • H5新增的表单属性

表格的用途

  1. 页面布局(已废弃:单元格会根据内容大小自动调节、表格自动调节会比较消耗性能)
  2. 展示数据

画一个最简单的表格只需3个标签

table:表格容器、放在最外面
tr :行
td :单元格
th : 标题单元格(加粗、居中效果)

分层的表格(为了语义化)

表格常用属性

cellpadding: 单元格内部空白的大小
cellspacing: 单元格与单元格之间的距离

跨行与夸列(合并单元格)

td、th的属性:
colspan:夸列【左右关系的合并】
rowspan:跨行【上下关系的合并】

给表格添加标题

表单元素

   : 普通的文本框、可以写任何内容

  : 密码框、以密文形式显示的

  : 单选框、checked默认选中

   : 复选框

   : 文件域、文件上传



 : 多行文本框、rows代表高度、cols代表宽度

 : 只读

 : 禁用(不能修改、并且数据是不会发送出去的)



:点击之后form里面的所有数据都会提交出去

:没有任何效果

:恢复表单初始效果

H5新增的表单元素

用于包含URL地址的输入域
用于包含e-mail地址的输入域
用于搜索域
用于输入电话号码的文本域
用于包含数值的输入域
用于包含一定范围内数字值的输入域
用于选取颜色
用于从一个日期选择器选择一个日期
用于选择一个日期和时间
用于选择一个月份
描述一年中的第几周
描述时间

H5新增的表单属性

max 属性:规定输入域所允许的最大值
min 属性:规定输入域所允许的最小值
step 属性:为输入域规定合法的数字间隔
list属性:实现数据列表的下拉效果
form属性:输入域所属的表单
required 属性:规定必须在提交之前填写输入域
multiple 属性:规定输入域中可选择多个值
placeholder 属性:描述输入域所期待的值
autofocus属性:自动获取焦点
autocomplete属性:自动完成

你可能感兴趣的:(Web前端基础,html,html5,前端)