HTML表格、表单，以及新表单属性

表格：

1.表格在body里的结构

<table border=“1" width="500" height="200" cellspacing="0" cellpadding="10">

<thead></thead>不用了

<tbody>可以不写，浏览器会自动添加

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

<tbody>可以不写，浏览器会自动添加

<tfoot></tfoot>不用了

</table>

解释：

border：是table的属性，可以设置表格和每个单元格的边框，和css样式里的border是不一样的

width和height可以设置表格整体宽高

cellspacing每一个单元格的间距

cellpadding给每一个单元格加内边距

tr代表一行

th是每列的标题，存在于第一行

td代表每一行有多少单元格

2.table的高度和宽度

1⃣️宽度

可以设置td的宽度，当td的总宽度超过整个表格的宽度之后，会按比例分配；

单独设置某几个td宽度的时候，宽度有效，没有设置宽度的td分配剩余的宽度

2⃣️高度

可以设置td的高度，总高度超过table的高度之后，会把table的高度 撑开

3.合并单元格

1⃣️<th colspan="2"></th>跨列、合并的列数，横向

2⃣️<th rowspan="2"></th>跨行、合并的行数，竖向

4.table在head里面的内部样式设置

table{

border：5px solid red；

empty-cells：show；

隐藏空的单元格：show展示、hide隐藏；

border-collapse：collapse；

合并相邻单元格边框

}

表单

1.form标签

表单的所有标签都写在form标签内部

<form action="服务器链接地址“ method=”提交方式（常用POST保险、默认GET无密，不常用）“></form>

其属性与属性之间用空格隔开

2.<label for="username">用户名</label>

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的for 属性应当与相关元素的id 属性相同。

3.文本输入框

<input id="username"type="text" name="username" placeholder="请输入用户名" value="最帅">

1⃣name属性用来告诉服务器这个输入框的内容是哪个字段；

2⃣placeholder用来提示输入内容。

4.密码输入框<inputtype="password"/>

5.单选框；checked已选中

<input type="radio" name="gender" value="man/woman/children/adult..." checked/>

6.复选框<inputtype="checkbox"/>

7.文件上传；multiple上传多个文件

<input type="file" multiple=""/>

8.能点击的按钮<inputtype="button" value="按钮名称"/>

9.设置隐藏字段，用于提交一些不需要用户填写的信息，比如：注册时间

<input type="hidden" name="jointime" value="20170602"/>

10.重置按钮，清空用户写入的内容

<input type="reset" value="按钮名称"/>

11.文本区域，发表意见什么的其他文本

<textarea style="resize:none;"cols="100"rows="5"></textarea>

cols：控制行数（宽度）

rows：控制列数（高度）行宽列高

resize可否由用户调整元素的尺寸，none用户无法调整元素的尺寸；both可调整高度和宽度；horizontal可调整宽度；vertical可调整高度

12.下拉选项框，selected已选择

<select>

<option>男</option>

<option selected>女</option>

</select>

13.提交按钮

<input type="submit" value="名称"/>

14.图片类型的提交按钮，也有提交功能

<input type="image" src="图片路径" style="图片大小设置">

15.value的定义和用法

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

表单的新属性

1.<input type="tel"/>，电话号码输入框

2.number，用于输入数字

3.search，用于提示用户要搜索的文字，search和text之间的区别主要在于样式

text是方框，search是带有圆角的框

4.url，用于输入单个网址

5.email，用于输入单个电子邮件地址，如果指定了multiple属性，就可以输入多个电子邮件地址，以逗号隔开

6.datetime，慎用！用于输入时区设置为UTC的日期和时间

7.date，用于输入不含时区的日期

8.month，用于输入含年份但不含时区的日期

9.week，用于输入含年份和周数但不含时区的日期，列如：此格式的日期2011-W05表示2011年的第5周

10.time，用于输入含小时、分钟、秒和秒的小数点部分但不含时区的时间值

11.datetime-local，用于输入不含时区的日期和时间

12.range，用于输入数字，但与number的区别在于无需输入具体数字，在大部分支持该类型的浏览器中，范围控件的实施形式为滑块

13.color，用于通过颜色池控件选择颜色

14.datalist

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars">

<datalist id="cars">

<option value="BMW"/>

<option value="Ford"/>

<option value="Volvo"/>

</datalist>

15.autofocus：

规定输入字段在页面加载时是否获得焦点，

取值：autofocus

16.placeholder：

规定帮助用户填写输入字段的提示

取值：text

17.required

规定输入字段的值是必须的

取值：required

18.autocomplete

规定是否使用输入字段的自动完成功能

取值：on、off

19.form

规定输入字段所属的一个或多个表单

取值：formname

20.pattern

规定输入字段的值的模式或格式

例如：pattern=[0-9]表示输入值必须是0与9之间的数字

取值：regexp_pattern