html学习的第三天

时间:2021-09-17 16:30:21

1.文本选择框
选择你的头像:<input type="file" accept="image/*">
Image/*表示选择所有类型的图片
“/”后面可选择更详细的类型
简历(文档):

<input type="file" accept="application pdf/或者.doc">

可以选择文本
accept属性选择文件的类型
2.上传文件需指定对应表单的属性

<form enctype="multipart/form-data">
</form>

html学习的第三天
2.下拉列表
使用下拉列表
(1)节省空间,干净整洁
(2)方便输入方便选择
(3)更加规范
select是选择的意思 给它一个容器
option是选项的意思 在容器里的各个选项
你来自:

<select name="province">
<option value="33">浙江</option>
<option value="32">江苏</option>
<option value="41">河南</option>
<option value="36">江西</option>
</select>

1.select相当于一个黑盒子把它取名为下拉列表
2.option相当于黑盒子里面的选项
3.select这个黑盒子里面的name相当于定义了各个选项的名字
将他们分组
4.value定义为各个选项传递后的参数值
比如将浙江提交:
html学习的第三天
得到结果如下:html学习的第三天
3.multiple
1.这个可以实现下拉列表的多选

<select name="color" multiple>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="black">黑色</option>
</select>

比如这样选择:
html学习的第三天
得到这样的结果:
html学习的第三天
这里的多选可以ctrl+鼠标左键
<select>标签中可以加size定义下拉显示个数,如果选的个数小于黑盒子里面的个数将增加一个滚动条

<select >
<optgroup label="中国">
<option value="1">帅哥</option>
<option value="2">帅哥</option>
<option value="3">帅哥</option>
</optgroup>
<optgroup label="日本">
<option value="1">平常</option>
<option value="2">平常</option>
<option value="3">平常</option>
</optgroup>
</select>

2.这里的<optgroup>可以进行分组
<optgroup>中的<label>是将他们分组取名
设置disabled将使这分组不可被选择

3.Textarea(自学)标签主要是为了方便用户输入比较多的文字信息,rows属性指定能输入多少行数,cols属性指定能输入多少列数
备注:

<textarea cols="50" rows="30" name="备注"></textarea>

4.Fieldset(自学)当信息比较杂乱时进行修饰在表单外面构架一个框框使其更加清晰,legend属性是给一个分组进行命名

<fieldset>
<legend>用户登陆</legend>
<form action="哈哈哈.html" method="post">
姓名:<input type="text"name="name">
<br>
性别:......
<br>
年龄:......
<br>
学校:......
<br>
专业:......
<br>
工作单位:......
<br>
职务:......
<br>
帐号:<input type="text"name="name">
<br>
密码:<input type="password"name="password" >
<br>
<input type="submit" value="登陆" >
<input type="reset" value="重填" >
</form>
</fieldset>

3.隐藏域

<form action="哈哈哈.html"method="get">
<input type="hidden"name="stuNo"value="123456789">
<br/>
原密码:<input type="password" name="old">
<br/>
新密码:<input type="password" name="new">
<br/>
<input type="submit" value="修改密码">
</form>

1.向服务器传递参数,但是用户不需要输入或者不想让别人看见
可以使用hidden使其隐藏或者readonly使其只读
4.表单的总结
1.form相当于一个容器 action是指这个容器该往哪提交
当method为post时 提交了参数是看不到的
然后我们可以查看头部
打开F12调试窗口
点击network
html学习的第三天
头部有四种数据:
headers:
html学习的第三天
General:
html学习的第三天
Response Headers
html学习的第三天
Resquest Headers
html学习的第三天
Form Data
html学习的第三天
常见的网页状态:
http://blog.csdn.net/zll01/article/details/5018413
200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务器超时
4.table(表格)
1.表格
表格标题
表格的组成部分:标题、表头、主题、表尾
<table>定义一个表格 将这个容器取名为表格
<caption>定义一个表格的标题 这个容器的新名字
<thead>定义表头的部分用th有加粗样式
<tbody>定义表格主题用td没有加粗样式
<tfoot>定义表尾,一般显示汇总信息等
<tr>定义一行 每个部分里面的一个小容器
<th>表头使用
<td>定义一个数据项(单元格)表身主题用
<td>的rowspan和colspan分别定义单元格跨行的行数、跨列的列数