HTML 学习总结2 框架 表单
這是HTML學習總結系列的第二篇，第一篇在這里：
HTML 學習總結1入門 基本概念、格式 文字標簽 圖片標簽 鏈接標簽 表格標簽 注釋
這次的學習內容相較第一次分類少，但是比較雜。
框架集標簽
框架標簽是將網頁設置成網頁框架的一種雙標簽，被設計成框架的網頁被切分成若干區域，沒有實際的內容，只當做框架用于鑲嵌其它的網頁。
那么，這個標簽是：
框架集標簽的屬性
使用的時候需要將HTML文件中的body標簽部分替換為框架標簽，寫成這樣：
<html><head></head><frameset rows="500,*" border="3" noresize="noresize"></frame> </html>看上面的代碼，用frameset替換掉body不難理解，畢竟我們約定做框架的網頁不具有實體內容
接著，這里提到了框架標簽的三個屬性，分別為：
- rows/cols 框架的分行或分列
- border 分隔框的寬度
- noresize 大小是否可調
現在來分別解釋一下
-
第一個，rows 或cols 屬性，代表了框架的分行或分列的情況，在引號內書寫該屬性的值的時候，不需要指明分成幾欄，只需要指明每一欄占據的寬度或高度（單位為像素）并使用逗號隔開。瀏覽器在解析的時候會計算到底分成了幾欄。另外，不指定寬度而使其占據剩余位置時，可以使用通配符 “ * ”。
-
第二個，border 屬性，代表了分隔框的寬度，這是屬性的數值單位是像素。所以如果你不想加入邊框，則可以將它設置為零。
-
第三個，noresize 屬性，表示我們的框架的大小是否可調，frameset標簽默認為大小可調，當用戶鼠標移動到邊框上時，他可以拖拽改變大小。所以如果不想讓用戶隨意改變框架大小，那么可以選擇使用這個屬性 （當然，也可以選擇把邊框的寬度設為零，讓他找不到）。 這個屬性的值同屬性名稱一樣。
最后還需要說明的是：框架集標簽是可以進行嵌套的，也就是說，在已經分出來的框架中，我們可以借著分欄。
在框架內鑲嵌網頁
剛剛我們使用 frameset 標簽將網頁變成框架并劃分成了若干區域，每一個區域都是一個單獨的可顯示頁面的子網頁（筆者起的名）。現在，我們需要在這些區域內為它鑲嵌上一個網頁，這需要用到frame這個單標簽在框架下添加網頁，它的寫法如下：
<frame src="...." name="...." />這里可以看到 frame 標簽的兩個屬性; src 和 name 。它們分別代表著添置連接（這是一個超鏈接，網頁，HTML文件，圖片等都是可以的。有關超鏈接的信息，可參照上一篇學習總結或者問問度娘 ），以及框架名稱。
框架的命名，很主要的一個原因在于可以重復利用一個框架，即在其他標簽使用時，可以在某個框架上顯示相應內容。還記得上一篇中，我們提到的鏈接標簽 target 屬性中的 “某框架名稱” 這個值嗎？在為框架命名后，就可以使用上述的 target 用法，將打開的網頁放在某個框架中了。
綜上，舉個例子：
先來創造一個帶有嵌套的框架
<!--frame--> <html><head></head><frameset rows="200,*" border="5" noresize="noresize"><frame src="title.html" name="title" /><frameset cols="200,*"><frame src="selection_bar.html" /><frame name="output_page" /></frameset></frameset> </html>接著來寫標題和選擇菜單頁面：
<!--title--> <html><head></head><body><font size="7" color="blue">The test page</font></body> </html> <!--selection_bar--> <html><head></head><body><font size="5" color="red">Please select websites.</font><br /><br /><a href="http://www.baidu.com" target="output_page"/>百度一下<br /><br /><a href="https://www.csdn.net" target="output_page"/>CSDN <br /><br /></body> </html>最后來看下結果：
點擊左側的連接可以切換右側的網頁：
nice！！！！
表單標簽
說完了框架標簽，在來介紹一個很常用的標簽：表單！ 相信很多人都填過各種各樣的表，我堅信那些表都是基于這個標簽弄出來的。那么，它這樣寫：
<form></form>表單標簽屬性
表單標簽屬性有四個：
- action 規定向何處提交表單的地址（URL）（提交頁面）。
- method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
- target 規定 action 屬性中地址的目標（默認：_self）。
- enctype 指定當前表單的編碼方式的，
對于enctype，有三種編碼方式，分別為：
1.text/plain 純文本方式去發送數據，不對數據進行編碼（不常用）
2.application/x-www-form-urlencoded 將數據編碼（最常用的）
3.multipart/form-data 在上傳文件的時候，使用到它，二進制流
默認為application/x-www-form-urlencoded
上面是考點，圈起來！
為了保持數據提交時的保密性和易讀性，通常將 method 設置為“post”。
表單控件標簽
在表單中添加表單項，我們需要表單控件標簽，它們有三種.
- input
- select
- textarea
我們來分別介紹一下它們：
input 標簽
這個標簽的功能很多，插入表單項需要用到同一個屬性 type ，而不同的表單項需要不同的值，看下表：
<input type=“text”/> <!– 可編輯文本域 --> <input type=“checkbox”/> <!– 多選框 --> <input type=“radio”/> <!– 單選框 --> <input type=“button”/> <!– 按鈕 --> <input type=“submit”/> <!– 表單提交--> <input type=“file”/> <!– 文件瀏覽 -->在添加不同的表單項的同時，需要加入提示語，可以直接在input語句前后添加文本。可以理解為，表單允許添加文本，input 僅提供表單項。
input標簽常用的屬性，除了type，還有 value，以及 name，在這里還需要進一步說明一下這兩個屬性選項中的用途。
- checkbox ，多選框中，value表示該選項的值，主要用于向服務器傳遞數據時。name 屬性用于標記分組，即使是多選，也可以有很多組的。
- radio ，單選框中，name 屬性的的作用尤其重要，只有同一name 值的單選向才會被看做是一組！
利用上面的知識，我們來嘗試這建立一張表單：
<!--form test--> <html><head></head><body><font size="5" color="green">餐飲管理</font><form method="post">請選擇餐飲設置類型：<br /><input type="radio" name="opretion" value="addition">添加食品<br /><input type="radio" name="opretion" value="search">查詢食品<br /><br /><br />請輸入食品名稱：<input type="text" name="foodName"><input type="submit"></form></body> </html>來瞄一眼：
nice！！
select 標簽
這個標簽可以在表單中插入一個下拉框，寫法如下：
<select><option>...</option><option>...</option><option>...</option> </select>在 option 間可以添加相對應的選項文本。當然option中仍然可以使用 value 屬性。
如果需要設置默認選項，可以在option 標簽中 加入屬性設置 ：selected = “selected”
name 屬性用在select標簽上，代表這個下拉框的名稱。
textarea 標簽
最后一種表單項啦，textarea 文本域標簽，可以在表單中添加一個文本域，寫法如下：
<textarea rows="20" cols="10" name="aText">文本內容 </textarea>其中，屬性 rows 和 cols 用于設置文本域所占行數和列數。name屬性用于設置文本域的名稱。
文本內容為默認顯示在文本域上的文字。
綜上，我們再來搞一張頁面：
<html><head></head><body><font size="5" color="green">客房預訂</font><form method="post">請輸入您的手機號碼:<br /><input type="text"/><br /><br /><br />請輸入您的身份證號碼:<br /><input typ="text"/><br /><br /><br />是否購買自動續訂服務：<br /><input type="radio" name="selection" value="yes"/>是<input type="radio" name="selection" value="no"/> 否<br /><br />請選擇需要的房間配置:<br /><input type="checkbox" name="content" value="window">窗戶     <input type="checkbox" name="content" value="air_conditioner">空調      <br /><input type="checkbox" name="content" value="bathroom">獨立衛浴     <input type="checkbox" name="content" value="double_bed">雙人床      <br /><br />請選擇門店：<br /><select><option>XX路一號店</option><option>XX路二號店</option><option>XX路三號店</option></select><br />備注：<br /><textarea rows="10" cols="30" name="tip">在此填寫您的備注</textarea><input type="submit" value="點我提交"></form></body> </html>
nice!!!
（另外，不要忘了可以將框架和表單相結合那就是 nice + nice = nniiccee了！！ ）
總結
以上是生活随笔為你收集整理的HTML 学习总结2 框架 表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 淘宝新品补单平台怎么样才能为你的产品精准
- 下一篇： js判断当前浏览器的环境是微信、pc、还