第三天html

Html第三天总结

上一天的表单没有结束讲完，今天依旧讲的是表单的各个属性，其中有选择文本框、下拉列表、textarea、filedset、隐藏域和table标签。

选择文本框

Accept属性指定文件类型

选择你的头像：<input
type="file" accept="imsge/*">

简历：<inputtype="file" accept="application/pdf">

文件：<inputtype="file" accept=".doc">

下拉列表有一下好处：

（1）节约空间，使得页面更加整洁。

（2）方便输入。

（3）规范统一。

你来自：
<select name="provinse">

    <optionvalue="33">浙江</option>

    <optionvalue="41" selected>河南</option>

    <optionvalue="32">江苏</option>

    <optionvalue="36">江西</option>
</select>

<Select>标签定义了一个下拉列表（选择）。

<Option>标签定义了下拉列表的选项（选项）。

<Option>标的Selected默认选中

<Select>的name属性，定义了提交的参数名字。

<option>标签的内容定义了该选项显示的文本，而Value属性定义了选中该选项时传递的参数值

你喜欢的颜色：

<select size="3" name="color"multiple >

    <option value="red">红色</option>

    <option value="blue">蓝色</option>

    <optionvalue="green">绿色</option>

    <optionvalue="yellow">黄色</option>

    <optionvalue="black">黑色</option>

</select>

<select>标签的size属性定义了下拉列表框显示的选择个数，当小于实际选项个数，会自动增加一个滚动条。

可以使用<optgroup>中的<lable>属性定义分组显示的文字，disabled设置该分组禁用。Selected默认选中

<select>

    <optgrouplabel="国产车">

    <optionvalue="红旗">红旗</option>

    <optionvalue="比亚迪">比亚迪</option>

    <optionvalue="奇瑞">奇瑞</option>

    </optgroup>

    <optgrouplabel="日系车"disabled>

    <optionvalue="丰田">丰田</option>

    <optionvalue="本田">本田</option>

    <optionvalue="三菱">三菱</option>

    </optgroup>
</select>

Textarea；定义多行输入控件

文本区不限制文本，默认文本是等宽字体文本，文本区容纳无限量的文本，cols和rows属性可以规定textarea的尺寸。

<textarea
rows="3" cols="30"readonly="readonly"disabled="disabled">
</textarea><br>

当信息较多时，可以考虑按照信息内容进行分组，达到表达清晰的目的，fieldset标签提供将信息分组的一种方式，分组后每组信息会默认有一个边框，同时可以使用<legend>标签为每一组的指定标题
<legend>标签是fieldset元素定义标题

<fieldset> 标签没有必须和唯一的属性

Fieldset：可以将表单内的相关元素分组。

<fieldset>

    <legend>个人基本信息</legend>

    姓名：<input type="text" name="name"><br>

    性别：<input type="text" name="sex"><br>

    年龄：<input type="text" name="age"><br>

</fieldset>

<fieldset>

    <legend>上学时期</legend>

    毕业学校：<input type="text" name="graduateschool"><br>

    毕业专业：<input type="text"name="graduation"><br>

</fieldset>

<fieldset>

    <legend>工作时期</legend>

    工作单位：<input type="text" name="unit"><br>

    职务：<input type="text" name="job"><br>

</fieldset>

Fieldset。可以将表单内的相关元素分组。

当需要向服务器传递参数值，且该参数值无需用户输入，甚至不让用户看见，可以使用隐藏域来实现。

<!--  学号：<input type="text" name="stuId"value="2017710" readonly><br>-->

   <inputtype="hidden"name="stuId"value="2017710103"><br>

    原密码<inputtype="password"name="old"><br>

    新密码<inputtype="password"name="new"><br>

    <inputtype="submit"value="修改密码">
</form>

Hidden标签是隐藏标签，用于隐藏信息

Table标签定义一张表格，其中包括了表格的大框、标题、表头、表体、表尾等

<Table>定义一个表格

<caption>定义一个表格标题

<thead>定义表头部分

<tbody>定义标题主体（数据）部分

<tfoot>定义表尾，一般显示汇总信息等

<tr>定义一行

<Th><td>定义一个数据项（单元格），<th>一般用于表头，有加粗杨思<td>一般用于表格主体部分，没有加粗

<t>d的rowspan和 colspan分别定义了单元格的跨行行数，跨列的列数

<table
border="1" cellspacing="0"cellpadding="7">

    <caption>华鑫信息科技有限公司</caption>

    <thead>

    <tr>

        <th>姓名</th>

        <th>性别</th>

        <th>出生年月</th>

        <th>职务</th>

        <th>电话</th>

        <th>部门</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>孟玉磊1</td>

        <td>男</td>

        <td>1996-05-04</td>

        <td>总经理</td>

        <td>188****6437</td>

        <td
rowspan="2">办公室</td>

    </tr>

    <tr>

        <td>李壮壮 </td>

        <td>男</td>

        <td>1997-12-27</td>

        <td>副经理</td>

        <td>188****9887</td>

    </tr>

    <tr>

        <td>王萍</td>

        <td>女</td>

        <td>1998-03-25</td>

        <td>财务总监</td>

        <td>188****5674</td>

        <td
rowspan="2">财务部</td>

    </tr>

    <tr>

        <td>胡西西</td>

        <td>女</td>

        <td>1994-02-14</td>

        <td>财务总监</td>

        <td>188****6789</td>

    </tr>

    </tbody>

    <tfoot>

    <tr>

        <td
colspan="6">共计39人</td>

    </tr>

    </tfoot>
</table>