终于学到Java Web这一章节了，首先来了解一下HTML5的一些新知识点吧，我直接贴出HTML5代码看一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>用户注册</h3> <!-- form表示表单域，可以包含多个input元素(输入框/下拉框/单选框/复选框) 3个属性比较重要 action:把表单中的数据提交给哪一个资源来做处理 method:表示表单的提交方式，默认是get，可选post enctype:表示表单的编码规范，文件上传的时候使用二进制编码，其他情况不变 --> <form action="#" method="get" enctype=""> 账号：<input type="text" name="userName" value="默认值" required><br/> <!--required是Html5的新特性，在以前必填字段我们需要通过js来判断，现在html5实现！--> 密码：<input type="password" name="passWord"><br/> 邮箱：<input type="email" name="email"><br/> 生日：<input type="date" name="age"><br/> 手机：<input type="number" name="tel" max="99999999999" min="0"><br/> 关键词：<input type="search" name="JJ" placeholder="我是内嵌的关键词"><br/> 性别：<input type="radio" name="sex" value="boy" checked="checked"/>男 <input type="radio" name="sex" value="girl"/>女 <input type="radio" name="sex" value="none"/>保密<br/> 爱好： <input type="checkbox" name="hobby" value="Vae" checked="checked">许嵩 <input type="checkbox" name="hobby" value="JJ" checked="checked">林俊杰 <input type="checkbox" name="hobby" value="shuyunquan">蜀云泉<br/> 头像： <input type="file" name="headImg"><br/><br/><br/> 城市： <select name="city" multiple="multiple" size="2"> <!--multiple是可以多选的意思，size是一次显示几个，option加value就是值是什么，不加默认写的深圳--> <option value="sz">深圳</option> <option>北京</option> <option>河南</option> </select><br/><br/> 简介： <textarea name="intro" rows="5" cols="30"></textarea> <!--这里textarea不能换行，必须写两个而且在同一行--> <br/><br/> <input type="submit" value="注册"/> <input type="reset" value="重置"/> <input type="button" value="普通按钮" onclick="alert('我就是个普通方法，不写js就没卵用')"/><br/> <input type="image" src="vae.png"> </form> </body> </html>
该注释的我都已经注释了，这里我只想强调一个地方，就是 <form>标签，这个是表单的意思，提交的时候，可以直接把这个表单内的元素啊，全部提交。
我的提交按钮呢，可以写成 submit的格式，这样就是一个按钮。还可以写成 image的格式，这样也能提交，图片格式。这两种方式点击都可以提交 form表单内的所有元素值
reset是重置的标签，button那个没卵用，除非你自己写js方法
form表单的3个属性非常重要，其中的 methon 默认是get，这种方式很不好，会在url链接里把你的表单内的元素的值都显示出来，所以，这里推荐使用post
接下来，上面的代码，放图！
-------------------------我是优雅的分隔符-------------------------
上面讲了一些HTML的基础，现在来讲一下框架，所谓的框架就是我的一个网页，分为上，下，左，右 这4个部分，我点击左侧的菜单，右侧的网页会变化，上面一般是公司的logo啥的，不会动，下面是一些版本声明啥的，也不会动。
好多网站的网页都是这个样子吧
我们来看看HTML5我已知的两个实现这个东东的方法：
1.frameset (已经过时，不推荐使用)
2.div+css+iframe (可以使用)
虽然frameset已经过时了，但是我还是要讲一下（原来我不知道这个是啥，现在终于知道了）
我新建了一个包，包里新建了几个HTML5的文件，如图：
先来讲讲思路，然后再给你们看我这些HTML5文件里面的内容。首先，我需要4个文件，分别对应上下左右，我建立了 top.html , foot.html ,menu.html ,welcome.html 。就是这四个文件，然后呢，我的左边的需要一些树形结构的目录，我点击不同的目录，右边显示不同的页面，所以我又新建了3个页面分别是 Vae.html ,JJ.html ,shuyunquan.html
所有的内容，都是在index.html 这个页面内显示的，这就称之为框架。
一、框架内部
打 frameset的时候，HTML5会画一条横线，说明这个标签已经过时了，不推荐使用。但是还能用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主界面</title> </head> <frameset rows="15%,*,5%"> <frame src="top.html"> <frameset cols="15%,*"> <frame src="menu.html" noresize=""> <frame src="welcome.html" name="main"> </frameset> <frame src="foot.html"> </frameset> <noframes> <body> 浏览器版本太低...... </body> </noframes> </html>
frameset和body不能同时存在， rows属性是指每个页面占的比例大小，*是指自动的剩下的部分。 frame就是 frameset框架内的不同组成部分，noresized属性是指不让移动， welcome的frame我们指定了一个name叫main，等会用得到
二、头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 头文件 </body> </html>
三、底部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 页面底下的版权信息 </body> </html>
四、左侧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>菜单</h3> <ul> <li><a href="Vae.html" target="main">许嵩</a></li> <li><a href="JJ.html" target="main">林俊杰</a></li> <li><a href="shuyunquan.html" target="main">蜀云泉</a></li> </ul> </body> </html>
有意思的事情来了，我点击不同的菜单，链接到不同的网页，我指定了必须在main的frame位置显示，有意思吧
五、右侧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 欢迎来到分页框架展示 </body> </html>
剩下的页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>大家好，我是林俊杰</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>大家好，我是Vae</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 大家好，我是帅哥 </body> </html>
没了，来看看最终的效果图吧
div+css+iframe的再介绍