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、还