終於學到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的再介紹