Web前端学习第五天·fighting_框架和表单
首先祝自己祝大家520快乐吖~祝有对象的幸福下去，没对象的早日找到对象，实在找不到的自己new一个对象！！！
框架集<frameset>
大的网站不会使用框架集，小网站会使用框架集来制作。
框架提供一种简便的分栏式布局，减少对网页内容的下载，提升网页的加载速度。只能应用于一些简单的页面布局，不适合复杂页面的布局。
<frameset>用来划分窗体，不能放在<body>中，否则没有效果。重要属性除了rows和cols以为还有frameborder（边框的厚度，默认值为5，等于0时边框没有明显的边界），border（框架之间的距离，一般设置为0），bordercolor（边框的颜色，不经常使用，因为border和frameborder通常设置为0）。
<frameset>可以设置cols，也可以设置rows（页面按行纵向分布）。一般用百分比来设置，也可以用固定的像素来设置（当最后一列以“*”表示时，则前面数字单位是像素，否则是百分比），如下所示。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>框架集的使用</title> 5 </head> 6 <frameset cols="35%,35%，*"> 7 <frame></frame> 8 <frame></frame> 9 <frame></frame> 10 </frameset> 11 </html>
<frame>的重要属性：src（资源，例如：src="http://www.baidu.com"）、name（框架的名称）、noresize（不可以调整框架的大小吗，默认值为false，即可以调整）、scrolling（是否出现滚动条，默认是auto，scrolling="no"时不出现滚动条，等于yes时滚动条出现）。
<frameset>也可以将页面划分为多行多列。示例代码如下：（每一部分页面按顺序存放）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>将页面切分成3行3列<title> 5 </head> 6 <frameset rows="1,1,1" cols="1,1,1"> 7 <frame/><!--第一行第一列--> 8 <frame/><!--第一行第二列--> 9 <frame/><!--第一行第三列--> 10 11 <frame/><!--第二行第一列--> 12 <frame/><!--第二行第二列--> 13 <frame/><!--第二行第三列--> 14 15 <frame/><!--第三行第一列--> 16 <frame/><!--第三行第二列--> 17 <frame/><!--第三行第三列--> 18 19 </frameset> 20 </html>
<frameset>跨行跨列的页面布局，使用框架集的嵌套实现，如下所示。
1 <!DOCTYPE html> 2 <html> 3 <head><title>框架集的嵌套使用</title></head> 4 <frameset rows="20%,*"> 5 <frame src="http:www.baidu.com"/> 6 <frameset cols="30%,*"> 7 <frame src="http:www.tmall.com"/> 8 <frame/> 9 </frameset> 10 </frameset> 11 </html>
超链接在框架中的使用
在<a>超链接标签中设置target的属性值等于要显示部分的框架的名称。
可以做一个自己所做案例显示的静态网页供别人查看。
<a>标签的target属性值除了_blank（打开新窗口）、_self（默认，在本窗口中打开）这两个以外，还有_parent（超链接所在框架的父容器）、_top（顶级容器，整个窗口是顶级容器）
<iframe>框架
行级标签。
在一个网页的局部嵌入其它网页的内容。
网页相同的地方可以采用<iframe>减少编码量，且容易维护（如当当网）。
门户网站使用较多（大多用在广告位），购物网站用的较少。当当网每个页面的头部和尾部基本相同，可以使用<iframe>标签来减少代码量。
常用的属性：marginwidth（框架内容和左右边框的距离）、marginheight（框架内容和上下边框的距离，设置为0，为了让内容完全显示在框架内）、scrolling="no"（无滚动条）。
注意：<iframe>要有正确的结束标签</iframe>，否则无法正确显示。
客户端访问服务器的方式
get请求
地址栏写网址而后回车，这种方式就属于get请求。
访问的数据显示在url上，数据有不安全因素，重要的数据需要加密处理。
get请求的数据长度有限，不用的浏览器的长度有一定的区别，不能使用get请求较大的数据，一般不超过2kb。（IE6.0和IE7.0的url最大长度是2083个字符，超过后无法提交。firefox最大长度7764，超过最大长度无法提交。opera9最大长度7684，超出后无法提交，谷歌最大长度7713，超出后无法提交。项目开发中可以忽略。）
get访问的速度较快，一般用于从服务器获取数据到客户端。
使用这种方式提交客户端数据时，会将相应的数据显示在url的参数中去。安全性较差。
post请求
要将客户端的数据提交给服务器时，使用post请求，一般用于收集表单数据。
访问的数据封装在http的请求流，不会再url上显示，相对比较安全。
从理论上讲，请求的数据没有大小的限制，但实际上数据请求的大小和服务器（可以限制客户端提交数据的大小）也有关系。
数据请求较慢，无论数据大小都需要请求两次，先发送请求头，再发送请求体。
使用这种方式提交客户端数据时，相应的数据不会显示在url的参数中，比较安全。
还有其他几种几乎不用的请求方式。
<form>表单简介
用于手机用户的数据，填写完成后，提交数据给服务器去处理。
块级标签。
要收集的内容都要放在表单里面，一个页面可以有多个表单。（ajax也可以用来提交数据）
常用于系统登录，系统注册，后台添加数据。
属性：action、method、enctype
action 表单要提交的地址，用于处理表单的内容（一般是提交到后台的一个接口，这个接口是java写成的，提交到这个接口后后台就知道如何处理这些数据了）。
method 提交的方法，get还是post，默认是get方式提交。
enctype 对表单数据进行编码，默认都是要编码的。格式为：application/x-www-form-urlencoded（表单默认的编码格式，表单发送前对所有字符进行编码。编码规则：空格转换为“+”号，特殊符号转换为ASC HEX值）。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时，编码就需要采用另一种格式：multipart/form-data（不对字符编码，文件上传时使用）。text/plain（是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码）。
表单元素
<input>标签，通过type属性值指定具体类型，不指定类型时，默认是text文本框类型。
公共属性有：size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）、maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击。
<input>标签的type属性值有如下几种情况：
text 文本框（如用户名的输入）。重要属性：autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用）、disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）。
password 密码框。属性与文本框类似。
button 普通按钮。一般结合javascript使用。属性：value（显示在button上的名称）、onclick="alert('谢谢！');"（JS）。
submit 提交按钮。用于提交表单。
reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
checkbox 复选框。属性：name（名字一定要是一样的，一样的名字才表示是一组数据）、value（必须要写，否则提交到服务器后为空值，不知道所选项是什么，一般情况下它的值与显示的名称相同，实际开发过程中value一般是编号）、checked（是否被选中的状态，true表示被选中，false表示没被选中，但是false在浏览器解析时并不能实现这样的功能，还是会显示被选中，与disabled属性类似）。
友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）。下面的这行代码可以点击文字选中对应的复选框。
<input type="checkbox" id="chkDQ" name="hobby" value="打球"/><label for="chkDQ">打球</label>
下面的这行代码没有上面的功能。
<input type="checkbox" id="chkDQ" name="hobby" value="打球"/><span>打球</span>
radio 单选按钮。属性：name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）、value与复选框的value属性同理、checked（是否被选中的状态，true表示被选中）。
hidden 隐藏字段。属性：value（隐藏的内容）。
使用场景：传用户数据时给定一个用户不需要知道的值给服务器，可以做数据的主键。
image 图片按钮，用来提交表单，与submit是一样的效果。属性：src（图片路径）。
file 文件域，上传文件。不同的浏览器表现形式不同。
<textarea>文本域标签。默认表现形式是可以输入很多行文本的文本框，在谷歌浏览器中可以拉伸拖拽，IE浏览器中不可以。
属性：cols（设置文本域宽度）、rows（设置文本域高度，即行数）。
注意文本域标签的开始标签和结束标签之间尽量不要有空格，尽量紧挨着写，否则提交表单数据到服务器时会把一大段空格一起提交，出现问题。也不要将文本域标签写成<textarea/>，即不能是空标签。
<select>下拉框标签。使用时要结合<option>子标签一起使用。
属性：name（做动态网站必须使用name，相应的option必须给定value属性属性值以明确用户选中的是哪一项）。
<option>的属性：selected（设置列表框中的选项是否为默认项）、value（提交到服务器的值）。
HTML5表单元素
<input>标签的type属性值：
color 颜色标签。value指定颜色值（采用#十六进制数表示）。点击这一块就可以选择相应的颜色。
一个好用的工具：ColorPix.exe 取色工具，获取你看到的东西的颜色的各种值。
date 日期。不再需要写大量的脚本来选择日期。value值指定默认的日期，格式为****-**-**（年月日）。
datetime-local 显示本地时间。value值指定默认的时间，格式为2016-05-20T19:58:22（年月日T时分秒），不给定的话可以自己选择。
number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。
range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。
week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。
练习代码段
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>form表单案例</title> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 6 </head> 7 <body> 8 <form action="success.html" type="get" enctype="application/x-www-form-urlencoded"> 9 <p> 10 <span>姓名</span> 11 <input type="text" autocomplete="on"/> 12 </p> 13 <p> 14 <span>密码</span> 15 <input type="password"/> 16 </p> 17 <p> 18 <span>按钮</span> 19 <input type="button" value="普通按钮"/> 20 <input type="submit" value="提交按钮"/> 21 <input type="reset" value="重置按钮"/> 22 </p> 23 <p> 24 <span>爱好</span> 25 <input id="chkZQ" type="checkbox" name="hobby" value="足球" checked="true"/><label for="chkZQ">足球</label> 26 <input id="chkLQ" type="checkbox" name="hobby" value="篮球" checked="true"/><label for="chkLQ">篮球</label> 27 <input id="chkTW" type="checkbox" name="hobby" value="跳舞"/><label for="chkTW">跳舞</label> 28 <input id="chkJS" type="checkbox" name="hobby" value="健身"/><label for="chkJS">健身</label> 29 </p> 30 <p> 31 <span>性别</span> 32 <input id="rdoMale" type="radio" name="sex" value="male"/><label for="rdoMale">男</label> 33 <input id="rdoFemale" type="radio" name="sex" value="female" checked="true"/><label for="rdoFemale">女</label> 34 </p> 35 <p> 36 <span>隐藏文字</span> 37 <input type="hidden" value="这部分文字需要隐藏"/> 38 </p> 39 <p> 40 <span>图片按钮</span> 41 <input type="image" src="images/tianmao.ico"/> 42 </p> 43 <p> 44 <span>上传文件</span> 45 <input type="file"/> 46 </p> 47 <p> 48 <span>备注</span> 49 <textarea cols="20" rows="5"></textarea> 50 </p> 51 <p> 52 <span>城市</span> 53 <select> 54 <option value="1" selected="true">上海</option> 55 <option value="1">北京</option> 56 <option value="1">武汉</option> 57 <option value="1">深圳</option> 58 <option value="1">南通</option> 59 </select> 60 </p> 61 </form> 62 <hr/> 63 <h1>HTML5表单元素</h1> 64 <form action="success.html" type="get"> 65 <p> 66 <span>颜色</span> 67 <input type="color" value="#000000"/> 68 </p> 69 <p> 70 <span>日期</span> 71 <input type="date" value="2016-07-07"/> 72 </p> 73 <p> 74 <span>时间</span> 75 <input type="datetime-local" value="2016-07-08T22:09:56"/> 76 </p> 77 <p> 78 <span>数字滑动</span> 79 <input type="number" value="22"/> 80 </p> 81 <p> 82 <span>进度条</span> 83 <input type="range" min="0" max="100" value="20"/> 84 </p> 85 <p> 86 <span>周数</span> 87 <input type="week" value="2016-W25"/> 88 </p> 89 </form> 90 </body> 91 </html>
页面内容如下：
