html第三天学习

时间:2022-10-15 20:53:08

4.12文件选择框

<formaction="#">
   
选择你的头像:<inputtype="file"accept="image/png">
</form>

accept属性:指定要选择的文件类型,指定类型的方式有:

选择你的头像:<inputtype="file"accept="image/*">
选择你的头像:<inputtype="file"accept="image/png">
简历:<inputtype="file"accept="application/pdf">
简历:<inputtype="file"accept=".doc">

上传文件需指定对应表单的属性

<formenctype="multipart/form-data">

4.13下拉列表

使用下拉列表的好处:

(1)      节省页面空间,使得页面更加简洁

(2)      方便输入

(3)      规范输入

<formaction="#"target="_blank">
你来自:
   
<select name="province">
      
<option value="33">浙江</option>
      
<option value="41">河南</option>
      
<option value="32">江苏</option>
      
<option value="36">江西</option>
      
<option value="13">河北</option>
   
</select>
    <input type="submit">
</form>

<select>标签定义了一个下拉列表

<option>标签定义下拉列表的一个选项

<select>标签的name属性定义了提交的参数名

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

多选可通过设置multiple属性来实现,Ctrl+单击,选择多个

<selectname="color"multiple>
   
<option value="red"></option>
   
<option value="black"></option>
   
<option value="white"></option>
   
<option value="blue"></option>
   
<option value="yellow"></option>
</select>
<input
type="submit">

 

传递的参数为:

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

代码格式化快捷键:ctrl+alt+L

<selectname="province"size="1">
   
<optgroup label="国产车">
       
<option value="红旗">红旗</option>
       
<option value="比亚迪">比亚迪</option>
       
<option value="奇瑞">奇瑞</option>
   
</optgroup>
    <optgroup label="德国车">
       
<option value="奔驰">奔驰</option>
       
<option value="宝马">宝马</option>
       
<option value="大众">大众</option>
   
</optgroup>
    <optgroup label="日本车"disabled>
       
<option value="丰田">丰田</option>
       
<option value="本田">本田</option>
       
<option value="三菱">三菱</option>
   
</optgroup>
</select>

<optgroup>label属性定义分组显示文字,disabled设置该分组不能用

4.14textarea

textarea标签主要是为了方便用户输入大量文字信息,rows属性指定文本框的行,cols属性指定文本框的列数

<formaction="">
   
学习经历:
   
<textarea rows="4"cols="30"></textarea>
</form>

4.15fieldset E1-04-08

<fieldset>标签:当信息比较多且杂乱的时候,可以用此标签进行分组整理,达到界面整洁、美观的目的,<fieldset>标签只提供信息分组的方式,并且为每一组都提供一个边框和legend属性:为美一个分组给个标题。

<fieldset>
   
<legend>个人基本信息</legend>
   
姓名:<inputtype="text"name="name">
   
<br>
    性别:
   
<br>
   
年龄:
</fieldset>

4.16隐藏域(E1-04-09

<inputtype="hidden"name="stuno"value="20140200923">

hidden属性:当需要向服务器传递参数,且该参数无须用户输入,甚至都不想让用户看见可以使用隐藏域来实现。

4.17表单总结

查看http头部

F12

头部有四部分:


 

1

2ResponseHeaders

3Request Headers

4Form Data

5.  table

5.1表格

表格标题<caption>

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

 

表格表头<thead>

<thead>
<tr>
   
<th>姓名</th>
   
<th>性别</th>
   
<th>出生年月</th>
   
<th>职务</th>
   
<th>电话</th>
   
<th>部门</th>
</tr>
</thead>

<tbody>定义表格主体部分

<tfoot>定义表尾

<tr>标签定义一行

<th><td>定义一个数据项(单元格),<th>一般用于表头,有加粗样式,<td>一般用于表格主题部分,没有加粗样式

<td>rowspancolspan分别定义单元格跨行的行数和跨列的列数。

总结

在今天的学习中,我们系统的学习了表单的所有内容,完善了对表单的学习,其中比较重要的就是下拉列表,也是今后我们在写代码、做网页中经常用到的,<select>标签有很多属性,我们要熟悉每个属性,将最基本的属性了解清楚。还有就是<table>标签,也就是表格,在网上,大部分人都会用table来排版表格,但是,table尽量只要用来做表格,工整完善。table也会是我们今后常用的一个标签,他的属性是目前我们学习的最多的属性,属性之间也有所关联,我们要在实践中锻炼,熟练使用。