第3章表格與表單_第1頁(yè)
第3章表格與表單_第2頁(yè)
第3章表格與表單_第3頁(yè)
第3章表格與表單_第4頁(yè)
第3章表格與表單_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

表格和表單LearningHTML&CSS第三章CompanyLogo課程要求與目標(biāo)掌握表格的用法表單標(biāo)記添加表單元素輸入類表單元素菜單列表類表單元素文本域CompanyLogo表格行列列標(biāo)題在HTML文檔中，廣泛使用表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像單元格表格標(biāo)題CompanyLogo4創(chuàng)建表格<HTML><HEAD><TITLE>使用表格</TITLE></HEAD><BODY><TABLEBORDER=2><TR><TD>姓名</TD><TD>性別</TD><TD>分?jǐn)?shù)</TD>

</TR><TR><TD>Robert</TD><TD>M</TD><TD>80</TD></TR>

</TABLE></BODY></HTML><TABLE>代表表格的開始，border=2表示邊框尺寸為2bordercolor為邊框顏色<TR>表示行，這是表格的第一行，有三列數(shù)據(jù)，<TD>代表列表格的第二行，有三列數(shù)據(jù)表格的第三行，也有三列數(shù)據(jù)CompanyLogo表格標(biāo)題<BODY><TABLEBORDER=2><CAPTIONalign=top>學(xué)員檔案信息</CAPTION><TR>

<TH>姓名</TH><TH>性別</TH><TH>分?jǐn)?shù)</TH></TR><TR><TD>Robert</TD><TD>M</TD><TD>80</TD></TR>

</TABLE></BODY></HTML><CAPTION>表示表格標(biāo)題<TH>表示行或列標(biāo)題，粗體顯示表格的第二行，有三列數(shù)據(jù)表格的第三行，有三列數(shù)據(jù)CompanyLogo表格對(duì)齊方式<BODY><TABLEborder=2align=center><CAPTIONalign=top>學(xué)員檔案信息</CAPTION><TR><TH>姓名</TH><THalign="center">性別</TH><THalign="right">分?jǐn)?shù)</TH></TR><TR><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR>

</TABLE></BODY></HTML>整個(gè)表格居中姓名列默認(rèn)左對(duì)齊性別列居中分?jǐn)?shù)列右對(duì)齊CompanyLogo7合并單元格（跨列）<BODY><TABLEBORDER=2ALIGN=CENTER><CAPTION>創(chuàng)建表格</CAPTION><THCOLSPAN=3>第一學(xué)期</TH><THCOLSPAN=3>第二學(xué)期</TH><TR><TD>數(shù)學(xué)</TD><TD>科學(xué)</TD><TD>英語(yǔ)</TD><TD>數(shù)學(xué)</TD><TD>科學(xué)</TD><TD>英語(yǔ)</TD><TR><TD>98</TD><TD>95</TD><TD>80</TD><TD>95</TD><TD>87</TD><TD>88</TD>

COLSPAN=“n”

屬性表示跨多少列

CompanyLogo8合并單元格（跨行）<BODY><TABLEBORDER=1,align=center><CAPTION><b>創(chuàng)建表格<b></CAPTION><TR><TH></TH><TH></TH><TH>螺母</TH><TH>螺栓</TH><TH>錘子</TH><TR><TDROWSPAN=3>第一季度</TD><TD>一月</TD><TD>2500</TD><TD>1000</TD><TD>1240</TD><TR><TD>二月</TD><TD>3000</TD><TD>2500</TD><TD>4000</TD><TR>ROWSPAN=“n”屬性表示跨多少行

CompanyLogo9表格的背景色和尺寸設(shè)置<BODY><TABLEborder=0align=centerwidth=50%><CAPTIONalign=top>學(xué)員檔案信息</CAPTION><TRbgcolor="#00FFFF"><THalign="left">姓名</TH><THalign="center">性別</TH><THalign="right">分?jǐn)?shù)</TH></TR><TRbgcolor="#FFFF00"><TD>Robert</TD><TDalign="center">M</TD><TDalign="right">80</TD></TR><TRbgcolor="#FFFF00"><TD>Mary</TD><TDalign="center">F</TD><TDalign="right">18</TD></TR></TABLE>表格的顏色設(shè)置：表格的背景色<TABLEbgcolor=顏色值>行的背景色<TRbgcolor=顏色值>

列的背景色<TDbgcolor=顏色值>顏色值可以采用RGB（red/green/blue）紅綠藍(lán)十六進(jìn)制值表示，如紅色#FF0000,或是一些預(yù)定義色彩名稱：red，blue，yellow等。表格的尺寸設(shè)置：

<TABLEwidth=n1height=n2>例如：<TABLEwidth="200"height="100">表示一個(gè)長(zhǎng)為200像素，寬為100像素的表格。<TABLEwidth=20%height=10%>表示一個(gè)寬為窗口的20%，高為窗口的10%的表格。1880分?jǐn)?shù)FM性別MaryRobert姓名學(xué)員檔案信息CompanyLogo表格設(shè)置設(shè)置單元格間距：cellspacing設(shè)置單元格填充距離：cellpadding可以利用cellspacing和背景顏色設(shè)置表格為細(xì)線表格表格的嵌套

表格的嵌套一方面是為使頁(yè)面的外觀更為漂亮，利用表格嵌套來(lái)編輯出復(fù)雜而精美的效果，另一方面是出于布局需要，用一些嵌套方式的表格來(lái)做精確的編排，或者二者兼而有之。例：index.htmlCompanyLogo表格總結(jié)（1）標(biāo)題級(jí)標(biāo)簽使用<H1>…<H6>段落標(biāo)簽使用<Palign＝“對(duì)齊方式”>…</P>無(wú)序列表使用<UL>標(biāo)簽,有序列表使用<OL>標(biāo)簽字體標(biāo)簽<Fontcolor=“顏色”size=“大小”face＝“字體”>插入圖片：<imgsrc=?Align=?>插入橫線：<hrcolor=?Size=?Width=?Align=?>CompanyLogo表格總結(jié)（2）

<TABLEwidth=“?”border=“?”align＝“？”><CAPTION>表格標(biāo)題</CAPTION><TRbgcolor＝“？”><THalign=“?”>數(shù)據(jù)1<TH><THalign=“?”>數(shù)據(jù)2<TH>…..</TR><TRbgcolor＝“？”><TDalign=“?”>數(shù)據(jù)11</TD><TDalign=“?”>數(shù)據(jù)22</TD></TR></TABLE>跨行的單元格：<TDrowspan=“n”>數(shù)據(jù)11</TD>跨列的單元格：<TDcolspan=“n”>數(shù)據(jù)22</TD>CompanyLogo表單表單通常在設(shè)計(jì)一個(gè)HTML文檔中，用于注冊(cè)頁(yè)面當(dāng)用戶填寫完信息后做提交操作，將表單的內(nèi)容從客戶端的瀏覽器傳送到服務(wù)器上，經(jīng)過(guò)服務(wù)器處理程序后，再將用戶所需信息送回客戶端的瀏覽器上，這樣網(wǎng)頁(yè)就具有了交互性。最常見的表單主要包括文本框、單選按鈕、復(fù)選框、按鈕等，如下圖所示，是一個(gè)常見的注冊(cè)頁(yè)面，它包含了文本框、單選按鈕、復(fù)選框、按鈕等表單內(nèi)容。CompanyLogo常見表單文本框單選按鈕密碼框按鈕復(fù)選框重置按鈕CompanyLogo表單標(biāo)簽<Form><formname="表單名"method="傳送方式"action="表單處理程序">

METHOD=“post或get”ACTIONMETHOD指定提交后由服務(wù)器上哪個(gè)處理程序處理指定向服務(wù)器提交的方法:一般為post或get方法,

post方法比較安全ACTION=“URL”CompanyLogo表單元素類型按表單元素的填寫方式可以將表單分為輸入類控件和菜單列表類控件輸入類控件一般以input標(biāo)記開始，說(shuō)明這一表單元素需要用戶的輸入；菜單列表類以select開始，表示用戶需要選擇。

CompanyLogoInput所包含的元素類型CompanyLogo文本字段Text和密碼Password身份證號(hào)<inputtype="Text"name="PID"value=“”size="20”maxlength="18">密碼：<INPUTtype=passwordvalue=“”name=“pass"size=15>CompanyLogo單選按鈕（radio）單選按鈕用于一組相互排斥的值。組中的每個(gè)單選按鈕應(yīng)具有相同的名稱。用戶一次只能選擇一個(gè)選項(xiàng)<p>性別：<inputtype=“radio”name=“sex”value=“male”>男<inputtype="radio"name="sex"value="female">女

可設(shè)置默認(rèn)選項(xiàng)：checked="checked"CompanyLogo復(fù)選框（checkbox）元素checkbox用于創(chuàng)建復(fù)選框。用戶可以選擇多個(gè)復(fù)選框。選擇了復(fù)選框時(shí)，會(huì)將一個(gè)name/value對(duì)與form一起提交。<p>請(qǐng)選擇你的愛好：</p><p><inputtype="checkbox"name="test1"value="A1">上網(wǎng)<inputtype="checkbox"name="text2"value="A2">游泳<inputtype="checkbox"name="test3"value="A3">登山<inputtype="checkbox"name="test4"value="A4">寫作CompanyLogo按鈕（Button）

<INPUTname="button1"type="submit"value="提交"><INPUTname="button2"type="reset"value="重置"><INPUTname="button3"type="button"value="普通按鈕">BUTTON（按鈕）CompanyLogo隱藏域（hidden）隱藏域主要用來(lái)傳遞一些參數(shù)，而這些參數(shù)不需要在頁(yè)面中顯示。當(dāng)瀏覽者提交表單時(shí)，隱藏域的內(nèi)容會(huì)一起提交給處理程序。創(chuàng)建隱藏域的語(yǔ)法如下：<inputtype=”hidden”name=”隱藏域名稱”value=”提交的值”>CompanyLogo隱藏域（hidden）示例<html><head><title>隱藏域和action屬性對(duì)比示例</title></head><body><formname="exam5"action="exam1.html"method="get">下面是幾種不同屬性的文本字段：<p>姓名：<inputtype="text"name="username"size=15><p>年齡：<inputtype="text"name="age"size=15maxlength=3><p><inputtype="hidden"name="page_id"value="example"><p><inputtype=“submit”name=“Submit”value=“提交”></form></body></html>CompanyLogo25文件域（File）文件域在上傳文件時(shí)常常用到，它用于查找硬盤中的文件路徑，然后通過(guò)表單將選中的文件上傳<html><head><title>文件域示例</title></head><body><formaction="mailto:yu@163.com"name="research"method="post">下面是某網(wǎng)站的注冊(cè)頁(yè)面：<p>用

戶

名:<inputname="username"type="text"size=20><p>密

碼:<inputname="password1"type="password"size=20><p>請(qǐng)上傳你的頭像：<inputtype="file"name="picture"></form></body></html>

當(dāng)用戶點(diǎn)擊瀏覽后，會(huì)彈“選擇文件”對(duì)話框。CompanyLogo菜單列表類和表單元素（Select）<p>證件類型<selectname="cardtype"><optionvalue="id_card">身份證</option><optionvalue="stu_card">學(xué)生證</option><optionvalue="drive_card">駕駛證</option><optionvalue="other_card">其它證件</option></select><p>關(guān)心的欄目<selectname="content"size="3"multiple><optionvalue="m1">體育欄目</option><optionvalue="m2">科技欄目</option><optionvalue="m3">新聞欄目</option><optionvalue="m4">汽車欄目</option><optionvalue="m5">房產(chǎn)欄目</option></se

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論