html的表單標籤和框架標籤
目錄
表單標籤
表單是html中重要的一部分
<form></form>表單標籤,用於蒐集不同型別的使用者輸入,比如註冊資訊,購物資訊等
- name:表單的名稱
- action:提交的路徑地址,action 該屬性定義在提交表單時執行的動作提交給伺服器
- method:規定在提交表單時所用的 HTTP 方法,值為get,post,put,delete,常用的為get和post,get提交資料的方式相對不安全,提交的資料大小有限制,根據瀏覽器的差異而有所不同.post提交資料的方式相對安全,提交的資料大小也沒有限制
<input/>單個使用,輸入框,是最重要的表單元素,有很多形態，根據 type 屬性的值的不同來設定不同形態,但各種形態都應該設定name屬性,因為name表示欄位,伺服器獲取表單資料後,解析資料時,需要用name來區分不同欄位
- type:設定input標籤的形態,值有如下幾個
- text:用於文字輸入的單行輸入欄位
- name:要定義的欄位,
- value:可設定的預設值,可不設定此屬性
- password:密碼輸入框,設定成此格式,會顯示成掩碼即小黑點
- name:定義的欄位,要跟後臺對應,
- radio:單選按鈕,在多個選項中只能選擇一個
- name :定義的欄位,跟後臺對應,
- value:單選框需要設定自定義value值
- checked,表示預設被選中,在需要設定預設被選中的條目上使用該屬性,值為checked
- checkbox:複選框,可以在多個選項中選擇多個
- name:定義的欄位,跟後臺對應
- value:需要設定的自定義的值
- file上傳檔案的小控制元件
- name:定義的欄位,跟後臺對應
- submit:提交按鈕
- value:顯示的對應按鈕的字
- button:按鈕,點選按鈕觸發一些事件
- value:顯示在對應按鈕的字
- image:圖片按鈕,點選按鈕觸發一些事件
- src:圖片路徑
- alt:圖片的說明
- reset 重置，點選會清空之前填寫的內容
- value顯示在重置按鈕上的字
- hidden:隱藏域,不需要使用者看到,但是伺服器需要的 資料,用隱藏域這種方式
<select></select> 下拉列表
- name:定義的欄位,跟後臺對應
- value:設定不同的自定義的值
- selected:表示預設的選中的,在需要設定預設被選中的條目上使用該屬性,值為selected
<option></option>可選項,下拉選單可以級聯
- value:表單項的值
- selected:預設被選中
<textarea></textarea>:文字輸入框,可以用來寫備註,預設的textarea大小可以調整,可以通過下面兩個屬性設定預設大小,textarea包裹的文字預設用來填充文字輸入框,可被修改
- name:定義的欄位,跟後臺對應,
- cols:設定列數
- rows:設定行數
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="#">
<table>
<!-- 單行文字輸入框 -->
<tr>
<td> 請輸入使用者名稱</td>
<td>
<input type="text" name="userName" value="張三"/>
</tr>
<!-- 密碼框 -->
<tr>
<td> 請輸入密碼</td>
<td>
<input type="password" name="password" value=""/>
</tr>
<!-- 複選框 -->
<tr>
<td> 請選擇愛好</td>
<td>
<input type="checkbox" name="preference" value="book"/>看書
<input type="checkbox" name="preference" value="tv"/>看電視
<input type="checkbox" name="preference" value="movie"/>看電影
</tr>
<!-- 單選按鈕 -->
<tr>
<td> 請選擇您的學歷</td>
<td>
<input type="radio" name="school" value="primier" checked="checked"/>小學
<input type="radio" name="school" value="high"/>中學
<input type="radio" name="preference" value="university"/ >大學
</tr>
<!-- 檔案上傳控制元件 -->
<tr>
<td> 請上傳您的文件</td>
<td>
<input type="file" name="file" >
</tr>
<!-- 下拉列表 -->
<tr>
<td> 請選擇您的籍貫</td>
<td>
<select name="province">
<option value="hb">河北</option>
<option value="hn" selected="selected">河南</option>
<option value="sd">山東</option>
</select>
</tr>
<!-- 多行文字輸入框 -->
<tr>
<td>備註</td>
<td>
<textarea rows="3" cols="10">我是個好人</textarea>
</td>
</tr>
<tr>
<td>備註2</td>
<td>
<textarea >我是個好人</textarea>
</td>
</tr>
<!-- 提交按鈕 -->
<tr>
<td>
<input type="submit" value="提交">
</td>
<td>
<input type="button" value="提交">
</td>
</tr>
<!-- 復位按鈕和以圖片作為按鈕 -->
<tr>
<td>
<input type="reset" value="重置">
</td>
<td>
<input type="image" src="images/01.png" alt="圖片">
</td>
</tr>
<!-- 隱藏域,伺服器需要,但是不要使用者看見-->
<tr>
<td>
<input type="hidden" name="hide" value="helloworld">
</td>
</tr>
</table>
</form>
</body>
</html> 
框架標籤
日常瀏覽中,咱們看到的網頁是長這個樣子的:(以百度的某個頁面為例)
這種頁面是通過將多個子頁面通過框架標籤,結合在一起
下面看框架標籤需要注意的是<frameset></frameset>和<body></body>不能同時使用
<frameset></frameset>框架標籤,對網頁的格式進行分塊,進行對多個網頁的簡單排版
- rows:按行劃分,如果對三行劃分,格式可以為"120,80,*" ,*代表剩餘部分,也可以按百分比劃分,比如值為"25%,50%,25%"
- cols：按列劃分,如果對三行劃分,格式也可以用"20%,30%,*",*代表剩餘部分
<frame/>單個即可,代表頁面
- src:頁面地址
- name:設定name的作用在於,我在某個頁面上設定連結的時候,可以指定在這個框架中的哪一個子頁面進行跳轉,如果找不到指定的子頁面,則會在整個大的頁面上跳轉
示例:先看總的框架標籤程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="200,*">
<frame name="top" src="表格標籤.html">
<frameset cols="160,*">
<frame name="left" src="連結標籤.html">
<frameset rows="80,80">
<frame name="secondtop" src="塊標籤.html"/>
<frame name="button" src="清單標籤.html"/>
</frameset>
</frameset>
</frameset>
</html>再看清單標籤程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="square">
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
</ul>
<ol type="A" start="3">
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<a target="top" href="menu1.html" > menu1</a>
<a target="left" href="menu2.html" > menu2</a>
<a target="secondtop" href="menu13.html" > menu1</a>
</ol>
</body>
</html>其他三個標籤的程式碼在上篇部落格中,沒改動,看下效果:
當點選右下角的按鈕時,因為清單標籤中的menu連結的target值,指向其他三個frame的name,所以會在相對應的frame子頁面上跳轉,如果target的值在整個頁面所有frame上找不到,會在整個頁面跳轉
其他標籤
<meta >
<meta charset="UTF-8">設定編碼格式
<meta name="keywords" content="html,java,keword"> 設定關鍵字,給引擎的蜘蛛用
<meta name="description" content="describe the page"> 設定網頁簡介,也是給蜘蛛用
<link> 引入外部的css檔案
<link rel="stylesheet" type="text/css" href=".引入css檔案的地址">
<script> 引入外部的javascript檔案
<script type="text/javascript" src="js的檔案地址"></script>
特殊字元:
空格
> 大於號
< 小於號
©
版權符號
® 註冊符號