HTML知识总结3

1.文件选择框

file属性，选择文件

accept属性，选择文件的类型。image/*全部的类型的图片.

上传文件需要指定对用表单的属性，也就是enctype属性

<formenctype="multipart/form-data">

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

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

 选择文档：<inputtype="file" accept=".docx">

</form>

2.下拉列表

  （1）单选列表使用下拉列表的好处：节省空间，页面简洁，方便输入，规范输入

<select name="province"></select>属性定义下拉列表,name定义了提交的参数名

<option value="41"></option>在select标签中，属性定义下拉列表的选项,value属性定义选择该选项时所传递的参数值

点击提交地址栏显示：file:///E:/H5课堂/HTML/chapter4/E101-04-02.html?province=41#

<form action="#" method="get">

来自：<select name="province">
      <option value="33">浙江</option>
      <option value="41"selected>河南</option>
      <optionvalue="32">江苏</option>
  </select>

<inputtype="submit">

</form>

（2）多选列表

<select></select>的size属性定义下拉列表的选项个数，当小于实际选项个数时，会增加一个滚动条。selected默认选择

多选地址：https://www.baidu.com/?hobby=？&hobby=？

爱好：

<selectname="hobby"multiple size="2">
  <option value="music">音乐</option>
  <option value="dance">跳舞</option>
  <option value="read">阅读</option>
  <option value="run">跑步</option>

</select>

用<optgrouplabel="">进行分组

<select>
    <optgroup label="国产">
        <option value="红旗">红旗</option>
        <option value="长城" selected>长城</option>
        <option value="奇瑞">奇瑞</option>
    </optgroup>
    <optgroup label="德系">
        <option value="奔驰">奔驰</option>
        <option value="宝马">宝马</option>
        <option value="奥迪">奥迪</option>
    </optgroup>

</select>

3.<textarea>

定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体(fixed pitch)。

disabled 不能更改，readonly 只可以读

rows属性，行数  cols（column的复数）列、纵

<form>
    学习经历：
    <textarearows="3"cols="20"></textarea>
</form>   <!--cols是column的复数形式-->

4.fieldset

用于一些分组

<legend>标签用于对一些信息进行分组

<form action="#"method="get">
    <fieldset>
        <legend>个人基本信息</legend>
        姓名：<inputtype="text"name="name"><br>
        性别：。。。<br>
        年龄：。。。<br>
    </fieldset><br><br>
    <fieldset>
        <legend>毕业情况</legend>
        毕业院校：。。。<br>
        工作经历：。。。<br>
    </fieldset>
</form>

5.隐藏域

当需要像服务器传输一些数据时，并且该参数无需用户输入，甚至可以不被看见，可以使用隐藏域。

input type="hidden" name="stuId"value="123456">

6.table

<border边框 cellspacing=表格间距 cellpaddingd=单元格间距> <thead>标题的头  <caption>定义表格标题<tbody>定义表格的内容<tr>定义表格的行 <td>的rowspan和colspan分别定义合并几行和几列 <tfoot>表尾

<tableborder="1"cellspacing="0" cellpadding="4">
    <thead>
    <caption>基本信息</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>手机号</th>
        <th>部门</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>1990.1.1</td>
        <td>18888888888</td>
        <tdrowspan="2">人事部</td>
    </tr>
    <tr>
        <td>王二</td>
        <td>男</td>
        <td>1995.12.12</td>
        <td>13333333333</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>1999.10.10</td>
        <td>16666666666</td>
        <td>市场部</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <tdcolspan="5"align="center">共计1人</td>
    </tr>
    </tfoot>
</table>