表格和表单

1,创建表格:<table></table>用于定义一个表格的开始与结束,在<table>标签内部,可以放置表格的表格,表格行和单元格等

<tr></tr>:用于定义表格中的一行,必须嵌套在<table></table>标签中,在<table></table>中几对<tr></tr>,就表示该表格有几行
<td></td>:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对<tr></tr>
中包含几对<td></td>,就表示该行中有多少列(或者多少单元格)

2,<table>标签的属性:border:设置表格的边框(默认border=“0”为无边框
cellspacing:设置单元格与单元格之间的空间(默认为2像素)
cellspadding:设置单元格内容与单元格边缘之间的空间(默认为1像素)
width:设置表格的宽度
height:设置表格的高度
align:设置表格在网页中的水平对齐方式,控制的是表格在页面中的水平对齐方式,单元格中的内容不影响
bgcolor:设置表格的背景颜色
background:设置表格的背景图像
3,<tr>标签的属性:height:设置行高度
align:设置一行内容的水平对齐方式
valign:设置一行内容的垂直对齐方式
bgcolor:设置行背景颜色
background:设置行背景图像

<tr>标签无宽度属性width,其宽度取决于表格标签<table>
可以对<tr>标签应用valign属性,用于设置一行内容的垂直对齐方式
<td>标签的属性:
width:设置单元格的宽度
height:设置单元格的高度
align:设置单元格的内容的水平对齐方式
valign:设置单元格的内容垂直对齐方式
background:设置单元格的背景图像
colspan:设置单元格横跨的列数
rowspan:设置单元格的数跨的行数
当对某一个<td>标签应用width属性设置宽度时,该列中的所有单元格均会以设置的宽度显示
当对某一个<td>标签应用height属性设置高度时,该行中的所有单元格均会以设置的高度显示
<th></th>用于定义表头单元格,其文本默认加粗居中显示
表格的结构:<thead></thead>:用于定义表格的头部,必须位于<table></table>标签中,一般含网页的logo和导航等头部信息
<tfoot></tfoot>:用于定义表格的页脚,位于<table></table>标签中<thead></thead>标签之后,一般包含网页底部的企业信息
<tbody></tbody>:用于定义表格的主体,位于<table></table>标签中<tfoot></tfoot>标签之后,一般包含网页中除头部和底部之外的其他内容
表单,创建表单<form action="url地址" method=“提交方式” name=“表单名称”></form>
input控件:text:单行文本输入框
password:密码输入框
radio:单选按钮
checkbox:复选框
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图像形式的提交按钮
hidden:隐藏域
file:文件域
neme:空间的名称
value:input控件中默认文本值
size:在页面中的显示宽度
readonly:该控件内容为只读
disabled:第一次加载页面时禁用该控件(显示为灰色)
checked:定义选择控件默认被选中的项
maxlength:控件允许输入的最多字符

4,textarea:通过该控件可以轻松的创建多行文本框;
name:空间的名称;
readonly:该控件内容为只读(不能编辑)
disabled:第一次加载页面时禁用该控件(显示为灰色)
5,select控件:用于在表单中添加一个下拉菜单<option></option>标签嵌套在<select></select>标签中,用于定义下拉菜单中的具体选项,每对<select></select>标签中的具体选项,每对<select></select>中至少包含一对<option></option>
6,全新的form属性:
①autocomplete属性(不仅可以用于form属性,还可以用于输入类型的<input/>标签,用于指定表单是否有自动完成功能(是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉表列里,实现自动输入完成
on:表单有自动完成功能
off:表单无自动完成功能
②novalidate:(指在提交表单时取消对表单进行有效的检查)
7,全新的表单控件:
datalist:用于定义输入框的选项列表,网页中的列表通过datalist内的option进行创建
8,全新的input控件:
①email:是一种专门用于e-mail地址的文本输入框
②url:是一种专门输入url地址的文本框
③tel类型:用于输入电话号码的文本框
④search:专门用于输入搜素关键词的文本框
⑤color;提供设置颜色的文本框
⑥number:用于提供数值的文本框
value:指定输入框的默认值
max:指定输入框可以接受的最大输入值
min:指定输入框可以接受的最小输入值
step:输入域合法的间隔,如果不设置,默认值为1
range;用于提供一定范围内数值的输入范围
Data pickers:指定时间类型
9,全新的input类型
①autofocus属性:指定页面加载后是否自动获取焦点,将标签的属性值指定为true时,表示页面加载完毕后会自动获取该焦点
②form:把表单内的子元素写在页面中的任意位置,还规定一个表单控件从属于多个表单

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值