HTML知识总结3

xiaoxiao2021-02-28  82

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>

转载请注明原文地址: https://www.6miu.com/read-41926.html

最新回复(0)