培訓(xùn)教程實(shí)例等bak t2

第二章表格和表單2本章任務(wù)制作“寶貝分類”頁(yè)面制作“注冊(cè)”頁(yè)面3會(huì)使用表格的基本結(jié)構(gòu)實(shí)現(xiàn)簡(jiǎn)單表格會(huì)使用表格相關(guān)標(biāo)簽實(shí)現(xiàn)跨行、跨列的復(fù)雜表格會(huì)使用表單的基本結(jié)構(gòu)制作表單頁(yè)面本章目標(biāo)4為什么使用表格表格應(yīng)用場(chǎng)合論壇門戶網(wǎng)站購(gòu)物網(wǎng)站論壇中應(yīng)用表格門戶網(wǎng)站應(yīng)用表格購(gòu)物網(wǎng)站應(yīng)用表格5表格的基本結(jié)構(gòu)行列單元格在HTML文檔中，廣泛使用表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像6表格的基本語(yǔ)法<TABLEborder="1"><TR><TD>

單元格內(nèi)容

</TD> ……</TR>……</TABLE><TABLE>...</TABLE

>定義表格<TD>…</TD>

定義列

<TR>…</TR>

定義行

border用來(lái)設(shè)置表格邊框尺寸大小7如何創(chuàng)建表格<TABLEborder="2"><TR><TD>移動(dòng)</TD><TD>聯(lián)通</TD><TD>鐵通</TD></TR><TR><TD>IBM</TD><TD>惠普</TD><TD>華碩</TD></TR></TABLE>8什么是跨行跨列的表格跨3列跨3行下圖中的表格哪里用了跨行？哪里用了跨列？跨了幾行幾列?9跨多列的表格<TABLEborder="2"><TR><TDcolspan="3">學(xué)生成績(jī)表</TD></TR><TR><TD>英語(yǔ)</TD><TD>數(shù)學(xué)</TD><TD>語(yǔ)文</TD></TR><TR><TD>95</TD><TD>98</TD><TD>89</TD></TR></TABLE>COLSPAN=“n”屬性表示跨多少列？10跨多行的表格<TABLEborder="1"><TR><TDrowspan=“3”>早上菜譜</TD><TD>食物</TD><TD>雞蛋</TD></TR><TR><TD>飲料</TD><TD>牛奶</TD></TR><TR><TD>甜點(diǎn)</TD><TD>開(kāi)心粉</TD></TR></TABLE>rowspan=“n”屬性表示跨多少行？11<TABLEborder="1"><TR><TD>手機(jī)充值、IP卡</TD>

<TDcolspan="2">辦公設(shè)備、文具</TD></TR><TR>

<TDrowspan="2">各種卡的總匯</TD><TD>鉛筆</TD><TD>彩筆</TD></TR><TR><TD>打印</TD><TD>刻錄</TD></TR></TABLE>如何創(chuàng)建跨行跨列的表格12小結(jié)1編寫(xiě)如下圖所示效果對(duì)應(yīng)的html代碼第一行第一個(gè)格子跨了2行此格子跨了3列13為什么要使用填充屬性單元格里的內(nèi)容太靠近邊線，怎么辦？未填充的效果，字與單元格邊框之間的距離靠得太近14什么是填充屬性和間距屬性border(邊框的厚度)內(nèi)容內(nèi)容內(nèi)容內(nèi)容cellpadding(單元格填充)cellspacing(單元格間距)15如何使用填充、間距屬性border(邊框的厚度)cellpadding(單元格填充)cellspacing(單元格間距)<TABLEborder="20"cellpadding="30"cellspacing="40"bordercolor="red">……</TABLE>16小結(jié)2表格的高度、寬度、背景圖像、邊框和填充屬性行的背景色單元格居中對(duì)齊編寫(xiě)如下圖所示效果對(duì)應(yīng)的HTML代碼17表單表單的典型應(yīng)用注冊(cè)用戶收集信息反饋信息為網(wǎng)站提供搜索工具注冊(cè)用戶收集信息反饋信息提供搜索工具18表單包含的控件單行文本輸入框(TEXT)單選按鈕(RADIO)復(fù)選框(CHECKBOX)下拉列表(SELECT)重置按鈕(RESET)提交按鈕(SUBMIT)多行文本框(TEXTAREA)密碼框(PASSWORD)19表單頁(yè)面的基本結(jié)構(gòu)METHOD=“post或get”ACTIONMETHOD指定提交后，由服務(wù)器上那個(gè)處理程序處理指定向服務(wù)器提交的方法:一般為post或get方法,post方法比較安全ACTION=“URL”<FORMaction=“”method=“post”> ……</FORM>20表單元素的統(tǒng)一格式<FORMname="form3"method="post"action="">

<INPUT

type="checkbox"name="gen"value="男"

size="21“maxlength=4checked="checked">

……</FORM>指定元素的類型，可為TEXT、RADIO、SUBMIT等控件的名稱控件的初始值控件的初始寬度控件中輸入的最多字符個(gè)數(shù)控件是否被選中21表單元素的逐一介紹文本框基本語(yǔ)法<INPUT

type=“text”value="張三"size="20"><FORMname="form1"method="post"action=""> <P>名  字：

<INPUTtype="text"value="張三"size="20"> </P> ……</FORM>單行文本輸入框，字符寬度為20文本區(qū)的寬度輸入元素的默認(rèn)值文本輸入框22表單元素的逐一介紹密碼框基本語(yǔ)法<INPUT

type=“password”value=“123456”size=“22”>密碼區(qū)寬度初始密碼密碼框<FORMname="form2"method="post"action=""> …… <P>密  碼：

<INPUTvalue=“123456”type="password"size="22"> </P></FORM>密碼框，22個(gè)字符寬度23表單元素的逐一介紹單選按鈕基本語(yǔ)法<INPUTtype="radio"value="男"checked="checked">初始值單選按鈕默認(rèn)選中<FORMname="form3"method="post"action=""><BR>性別：

<INPUTname="gen"type="radio"class="input"value="男"checked><IMGsrc="images/Male.gif"width="23"height="21">男 ……</FORM>設(shè)置此單選按鈕被選中24表單元素的逐一介紹復(fù)選框基本語(yǔ)法<INPUT

type=“checkbox”name="cb2"value="talk">復(fù)選框復(fù)選框名復(fù)選框值<FORMname="form4"method="post"action="">……<LABEL><INPUTtype="checkbox"name="cb2"value="talk"checked="checked"></LABEL>聊天

……</FORM>設(shè)置此復(fù)選框被選中25列表框基本語(yǔ)法<select

name=“指定列表名稱”

size=“行數(shù)”>

<option

value=“可選項(xiàng)的值”

selected>…</option><option

value=“可選項(xiàng)的值”>…</option>……</select>

說(shuō)明：

size確定列表中可同時(shí)看到的行數(shù)。

selected默認(rèn)被選中的可選項(xiàng)。表單元素的逐一介紹出生日期：

<INPUTname="byear"value="yyyy"size=4maxlength=4> 年<SELECTname="bmon">

<OPTIONvalue=""selected>[選擇月份]</OPTION><OPTIONvalue=0>一月</OPTION><OPTIONvalue=1>二月</OPTION>……</SELECT>月 <INPUTname="bday"value="dd"size=2maxlength=2>日

設(shè)置此輸入框最多只能輸入四個(gè)符號(hào)設(shè)置“[選擇月份]”選項(xiàng)默認(rèn)被選中26表單元素的逐一介紹按鈕基本語(yǔ)法<INPUTtype="reset"name="Reset"value="重填">按鈕名稱按鈕類型可為button、submit按鈕上的標(biāo)簽<FORMname="form6"method="post"action=""><P><INPUTtype="reset"name="Reset"value="重填"> ……

<INPUTtype="button"name="cancel"value="取消"></P></FORM>單擊按鈕，控件的值被重置為value屬性中指定的初始值27表單元素的逐一介紹多行文本框基本語(yǔ)法<TEXTAREAname="textarea"cols="40"rows="6">

文本框中的內(nèi)容</TEXTAREA>文本框的名字文本框的列數(shù)文本框的行數(shù)<FORMname="form7"method="post"action="">……<TEXTAREAname="textarea"cols="40"rows="6">歡迎閱讀服務(wù)條款協(xié)議，本協(xié)議闡述之條款和條件適用于您使用Taobao網(wǎng)站的各種工具和服務(wù)。本服務(wù)協(xié)議雙方為淘寶與淘寶網(wǎng)用戶，本服務(wù)協(xié)議具有合同效力。淘寶的權(quán)利和義務(wù)

</TEXTAREA>……</FORM>6行40個(gè)字符寬