Java Web之HTML5

　　终于学到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的再介绍