html学习的第三天

约定不等于承诺〃 2022-06-12 00:22 203阅读 0赞

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

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

![这里写图片描述][SouthEast]  
**2.下拉列表**  
使用下拉列表  
（1）节省空间，干净整洁  
（2）方便输入方便选择  
（3）更加规范  
select是选择的意思 给它一个容器  
option是选项的意思 在容器里的各个选项  
你来自：

1.select相当于一个黑盒子把它取名为下拉列表  
2.option相当于黑盒子里面的选项  
3.select这个黑盒子里面的name相当于定义了各个选项的名字  
将他们分组  
4.value定义为各个选项传递后的参数值  
比如将浙江提交：  
![这里写图片描述][SouthEast 1]  
得到结果如下：![这里写图片描述][SouthEast 2]  
**3.multiple**  
1.这个可以实现下拉列表的多选

比如这样选择：  
![这里写图片描述][SouthEast 3]  
得到这样的结果：  
![这里写图片描述][SouthEast 4]  
这里的多选可以ctrl+鼠标左键  
`<select>`标签中可以加size定义下拉显示个数，如果选的个数小于黑盒子里面的个数将增加一个滚动条

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

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

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

**3.隐藏域**

1.向服务器传递参数，但是用户不需要输入或者不想让别人看见  
可以使用hidden使其隐藏或者readonly使其只读  
**4.表单的总结**  
1.form相当于一个容器 action是指这个容器该往哪提交  
当method为post时 提交了参数是看不到的  
然后我们可以查看头部  
打开F12调试窗口  
点击network  
![这里写图片描述][SouthEast 5]  
头部有四种数据：  
headers：  
![这里写图片描述][SouthEast 6]  
General：  
![这里写图片描述][SouthEast 7]  
Response Headers  
![这里写图片描述][SouthEast 8]  
Resquest Headers  
![这里写图片描述][SouthEast 9]  
Form Data  
![这里写图片描述][SouthEast 10]  
常见的网页状态：  
[http://blog.csdn.net/zll01/article/details/5018413][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分别定义单元格跨行的行数、跨列的列数

[SouthEast]: /images/20220612/a91811fef3c548289c74757cbb9e4501.png
[SouthEast 1]: /images/20220612/3748f03a6ad040018ee2b7f7487e7f0c.png
[SouthEast 2]: /images/20220612/5c132c3773ec4541889f0adabea4baa1.png
[SouthEast 3]: /images/20220612/4044a1123fba413a8e0075dc5eb9e125.png
[SouthEast 4]: /images/20220612/8074ed5c60da4ad4bdc9e6e320d3342c.png
[SouthEast 5]: /images/20220612/8843064351cc428b8b27cdc347c301d6.png
[SouthEast 6]: /images/20220612/a3d2e9bcab3e4d6687f64c3786f2d8c5.png
[SouthEast 7]: /images/20220612/d84c94f150d341989f3f03a7d722c9f5.png
[SouthEast 8]: /images/20220612/14f2bca27360464f9e7396af0f548e16.png
[SouthEast 9]: /images/20220612/572fe79adc20452caeea9134bb4264d3.png
[SouthEast 10]: /images/20220612/dbab218689664558a98fab9a90d0f847.png
[http_blog.csdn.net_zll01_article_details_5018413]: http://blog.csdn.net/zll01/article/details/5018413