第三課時 HTML表單和框架
一、<form>表單
1.定義:用來收集用戶信息,提供服務
2.表單的簡單框架:
<form>
<input>
<select>…</select>
<textarea>…</textarea>
</form>
3.<form>標記的主要屬性:
a.action:指出該表單所對應的處理程序的位置(url)
b.method:指出表單信息的提交方式:get(默認)或post
get:提交總信息不超過2K,且提交后可以在地址欄中看到
post:提交信息長度不限,且不會顯示在地址欄中
c.enctype:表單數據的編碼方式:
application/x-www-form-urlencoded(默認):鍵值對編碼
multipart/form-data:二進制流編碼(用于傳輸文件)
d.target:類似超鏈接中的target
二、<form>中的<input>標記
<form>有三個輸入子標記,用于收集用戶信息。<input>是應用最為廣泛的。
1.<input>的主要屬性:
a.Type:指定輸入比較的輸入方式:(共10中方式)
text:單行文本框
password:密碼文本框
hidden:隱藏文本框
file:文件選擇框
checkbox:復選框
radio:單選框
-----------------
Button:普通按鈕(要添加腳本才有動作,否則不做任何事情)
Submit:提交按鈕(提交<from>標簽內的所有信息)
Reset:重置按鈕
Image:圖片按鈕(功能同提交按鈕)
b.size:文本框的長度
c.maxlength:文本框允許輸入的最大長度(控制輸入長度的最簡單辦法)
d.value:當type為文本類型時,value代表初始值和提交值
當type為按鈕類型時,value為按鈕的顯示文本(因為按鈕不需要提交值)
e.checked(標示屬性):使用在type=”checkedbox|radio”時,表示被選中狀態
注:使用radio時,name的值要一直,否則達不到一組的效果。
三、<form>中的其他標記
1.<select>:下拉列表選擇標記
<select size=”” multiple>
<option selected value=””>…選項內容…</option>下拉選項
</select>
Size:下拉列表顯示的項數。
Multiple(標識屬性):開啟多選功能
Selected(標識屬性):表示被選中的狀態
Value:表示這個下拉選項的提交值
2.<textarea>多行文本標記:
<textarea rows=”” cols=””>…</textarea>
3.filedSet分組標記:
<filedset>
<legend>...</legend>
…可以把不同的標記用框框分組顯示
</filedset>
Legend:表示框框標題名字。
四、<form>中所有標記都有的屬性
1.name:名字,常用于調用時的參數
2.ID:同name
3.title:提示信息
4.tabIndex:定義tab鍵的反問順序
5.Accesskey:定義ALT+“”的快捷訪問鍵
五、框架
1.定義:可以把一個瀏覽器窗口分成若干獨立的子窗口,字窗口相互獨立的滾動刷新,可以有所聯系,
2.簡單使用:
<html>
<head>…</head>
<frameset cols=”30%,*”>
<frame src=””>
<frame src=””>
</frameset>
</html>
用<frameset>標記代替<body>,若把<frameset>標記放在<body>內,<frameset>將不起作用。
3.<frameset>的主要屬性:
a.cols:縱向分割,cols=”像素|百分比|*”三種方式:
像素:為單個像素占總像素的比例
百分比:直接算整個區域的百分比
*:若只出現一個*,代表窗口剩余部分;若出現多個*,就所有*號按比例分窗口剩余部分。
b.rows:橫向分割(使用同縱向)
c.border:分割線寬度
d.bordercolor:分割線顏色
e.frameborder:設置是否隱藏分割線,為YES是顯示,NO為隱藏
3.<frameset>中使用的標記:
a.<frame>子窗口標記:
<frame src=”” name=”” noresize scrolling=”no|yes” marginwidth=”” >
Src:子窗口路徑 name:子窗口名字
Noresize(標識屬性):不允許改變分割線位置
Scrolling:定義是否需要滾動條
Marginwidth:文本與分割線的寬度
Marginheight:文本與分割線的高度
b.<iframe>內聯窗口標記(浮動窗口標記)
與<frame>的不同:
<iframe>必須放在<body>中,而<frame>不需要。
<frame>必須嵌在<frameset>中,而<iframe>不需要。
<iframe>可以自定義高寬度,而<frame>是通過<frameset>定義的。
第二課時 HTML超連接和表格
一、<a>…</a>超鏈接標記
<a href=”” name=”” target=””>…</a>
1.主要屬性:
a.href:表示要鏈接的位置,這里又分為三種表示形式:
第一種:內鏈接
Href=”#name(熱點名)”
第二種:外鏈接
Href=”URL”
第三種:郵箱鏈接
Href=mailto=...@...;cc=...&bcc=...&subject=...&body=...
Cc為抄送,bcc為密送,subject為主題,body為內容
b.name:常用于內部鏈接的熱點名
<a name=”…”></a>
c.target:定義打開新鏈接的窗口形式:
值分為兩種形式:填寫預定義的值和非預定義的值
預定義:_self、_blank、_parent、_top
_self:在當前窗口打開鏈接
_blank:在新窗口打開鏈接
_parent:在父窗口中打開鏈接
_top:在頂層窗口中打開鏈接
注:_parent中的父子關系,用于<frameset>標記中,但真正的父子關系是指文件中的父子關系,而不是邏輯上的父子關系。
非預定義:填寫你想打開窗口的名字(去掉html),若填寫的名字文件不存在,則在新窗口中打開。
二、<table>…</table>表格標記
1.表格框架介紹
<table>
<caption>…</caption>表主題標記
<tr>表行標記
<th>..</th>表頭單元格標記
<th>..</th>
…
</tr>
<tr>
<td>..</td>普通單元格標記
<td>..</td>
…
</tr>
</table>
2.表格主要屬性:
a.border:邊框粗細(像素) b.bordercolor:邊框顏色
c.width:表格寬度 d.height:表格高度
e.cellpadding:單元格中文字與框線的間隙大小(像素)
f.cellspacing:框線的粗細(像素)
3. <table>中的主要標記
a.<caption>…</caption>表格主題標記:若要設置則必須放在<table>內,<tr>前
b.<tr>…</tr>表格行標記:用來定義表格中的一行內容,<th>、<td>都置于其中。
c.<th>..</th>/<td>…</td>單元格標記:
<th>與<td>唯一不同:<th>的文字有粗體的效果
主要屬性:
Colspan:跨幾列 rowspan:跨幾行
Valign:垂直對齊方式 align:水平對齊方式
三、多媒體標記
1.插入背景音樂
<bgsound src=” URL” loop=””>
2.插入視頻或音頻:
<embed src=” URL” autostart=”true|false”>
Autostart:是否自動播放