首先祝自己祝大家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>
頁面內容如下：
