HTML基础（二）

头像：<input type="file"/>

<input type="radio" name="sex" checked/>女<input type="radio" name="sex"/>男

HTML基础（二）

1.表格

（1）作用：是一些被称为单元格的矩形框按照从左到右，从上到下的顺序排列在一起形成的

（2）创建表格：

a.定义表格：使用成对的<table></table>

b.创建行：<tr></tr>

c.创建列：<td></td>

<table border=1>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

</table>

（3）表格的常用属性

a.<table>元素：border:边框的粗细  width/height   align:居中或者靠那边   cellpadding:单元格边框与内容之间的间距    cellspacing:单元格之间的间距

b.<tr>元素：align/valign

c.<td>元素：align/valign/width/height/colspan/rowspan

colspan:使当前单元格向右扩展  colspan="2"

rowspan:使当前单元格向下扩展 rowspan="2"

d.行分组：表头行分组：<thead></thead>   表主体行分组：<tbody></tbody>   表尾行分组：<tfoot></tfoot>

2.表单

a.表单概述

表单用于显示、收集信息，并提交信息至服务器  二要素：form元素，表单控件，表单是从浏览器向服务器传输数据的手段

b.表单元素

用成对的<form></form>标记，表示将此元素中所涵盖的控件中的数据传输给服务器

属性：action:声明提交目标，即url   method：请求格式，get或post   enctype:

<form action="http://www.tmooc.cn"></form>

c.表单控件：

用来输入元素

（1）input元素（9个）

（1.1）文本框：用来输入普通文本  属性：value:默认值  maxlength:输入的最大长度   readonly：只读

例：

<input type="text"value=“张三” maxlength="5" readonly/>

（1.2）密码框：

例：

<input type="password"/>

（1.3）单选框： 属性：value：选中后取到的值  name:分组组名，同一组的radio相互排斥   checked默认勾选

例：

<input type="radio" name="sex" checked/>女<input type="radio" name="sex"/>男

(1.4)多选框： 属性：name vlaue   checked

例：

<input type="checkbox" value="hello"/>读书

（1.5）隐藏框： 用来向服务器发送一些不希望用户看到的数据

例：

<input type="hidden" value="hello"/>

（1.6）文件选择器：

例：

头像：<input type="file"/>

（1.7）提交按钮，重置按钮，普通按钮，他们的名字都是通过value设置的

例：

<input type="submit" value="注册'/><input type="reset" value="重置"/><input type="button" value="测试"/>

（1.8）<label>用来管理表单中的文本，他可以将文本和某控件绑定，从而增加了该控件的受力面积，提高易用性

绑定方式：在控件上增加ID，ID是元素的唯一标志，任何元素都必须有ID;在label元素上增加for属性，for="ID"

（1.9）下拉选择框：属性: selected选中，value

例：

<select><option>请选择</option></select>

（1.9）文本域：相当于多行文本框  属性：cols：设置宽度   rows:设置高度  readonly只读，标签中间的文字就是他的默认值

例：

<textarea cols="8" rows="8">Hello</textarea>