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

下載本文檔

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

文檔簡介

※掌握創(chuàng)建表格的HTML標(biāo)記；※掌握表格的CSS樣式控制；※掌握創(chuàng)建表單的HTML標(biāo)記；※掌握表單的CSS樣式控制。

第6章表格與表單學(xué)習(xí)目標(biāo)：第6章表格與表單6.1表格案例：學(xué)生信息表制作學(xué)生信息表，瀏覽效果如圖6-1所示。具體要求如下：（1）創(chuàng)建一個6行7列的表格。（2）設(shè)置表格標(biāo)題——學(xué)生信息表。（3）在表格標(biāo)記中添加相應(yīng)文本內(nèi)容，并用<th>標(biāo)記為表格設(shè)置表頭。（4）通過CSS整體控制表格邊框樣式。（5）通過CSS設(shè)置單元格邊框樣式。第6章表格與表單6.2.1表格標(biāo)記例6-1在網(wǎng)頁上創(chuàng)建如圖6-2所示的簡單表格。文件名：6-1.html6.2表格相關(guān)知識第6章表格與表單代碼如下：<body><h2>學(xué)生成績表</h2><tableborder="1"><tr><th>學(xué)號</th><th>姓名</th><th>性別</th><th>成績</th></tr><tr><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛濤</td><td>男</td><td>92</td></tr><tr><td>03</td><td>張軍力</td><td>男</td><td>98</td></tr></table></body>第6章表格與表單創(chuàng)建表格的基本標(biāo)記有：<table></table>：用于定義一個表格。<tr></tr>：用于定義表格的一行，該標(biāo)記必須包含在<table></table>中，表格有幾行，在<table></table>中就要有幾對tr></tr>標(biāo)記。<th></th>：用于定義表頭的單元格，該標(biāo)記必須包含在<tr></tr>中，表頭行有幾個單元格，在<tr></tr>中就要有幾對<th></th>標(biāo)記。該單元格中的文字自動設(shè)為粗體、在單元格中居中對齊顯示。<td></td>：用于定義表格的普通單元格，該標(biāo)記必須包含在<tr></tr>中，一行有幾個單元格，在<tr></tr>中就要有幾對<td></td>標(biāo)記。該單元格中的文字自動設(shè)為左對齊顯示。在例6-1的代碼中，在<table>標(biāo)記中用到了border屬性，其作用是給表格添加邊框，如果卻掉該屬性，則表格默認(rèn)情況下無邊框。默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。如果要進一步設(shè)置表格的外觀樣式，可以設(shè)置表格的相關(guān)屬性來實現(xiàn)。

第6章表格與表單6.2.2<table>標(biāo)記的屬性屬性名作用屬性值border設(shè)置表格的邊框像素width設(shè)置表格的寬度像素height設(shè)置表格的高度像素align設(shè)置表格的對齊方式left｜center｜rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置表格的背景圖像URL地址cellspacing設(shè)置單元格與單元格之間的空白間距默認(rèn)為2像素cellpadding設(shè)置單元格與邊框之間的空白間距默認(rèn)為1像素第6章表格與表單6.2.2<table>標(biāo)記的屬性例6-2網(wǎng)頁上創(chuàng)建如圖6-3所示的表格。文件名：6-2.html第6章表格與表單修改6-1.html中的代碼如下：<body><h2align="center">學(xué)生成績表</h2><tableborder="5"align="center"width="400"height="150"="#99FFCC"cellpadding="3"cellspacing="5"bgcolor="#99FFCC"><tr><th>學(xué)號</th><th>姓名</th><th>性別</th><th>成績</th></tr><tr><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr><tr><td>02</td><td>牛濤</td><td>男</td><td>92</td></tr>第6章表格與表單6.2.3<tr>標(biāo)記的屬性屬性名作用屬性值height設(shè)置行的高度像素align設(shè)置一行內(nèi)容的水平對齊方式left｜center｜rightvalign設(shè)置一行內(nèi)容的垂直對齊方式top｜middle｜bottombgcolor設(shè)置行的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置行的背景圖像URL地址第6章表格與表單例6-3在網(wǎng)頁上創(chuàng)建如圖6-4所示的表格。文件名：6-3.html第6章表格與表單代碼如下：<h2align="center">學(xué)生成績表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0">

<trheight="50"bgcolor="#CCCCCC"><th>學(xué)號</th><th>姓名</th><th>性別</th><th>成績</th></tr><tralign="center"><td>01</td><td>馬麗文</td><td>女</td><td>94</td></tr>……第6章表格與表單6.2.4<th>和<td>標(biāo)記的屬性屬性名作用屬性值width設(shè)置單元格的寬度像素height設(shè)置單元格的高度像素align設(shè)置單元格內(nèi)容的水平對齊方式left｜center｜rightvalign設(shè)置單元格內(nèi)容的垂直對齊方式top｜middle｜bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值｜#RGB｜rgb()background設(shè)置單元格的背景圖像URL地址colspan

設(shè)置單元格合并的列數(shù)正整數(shù)rowspan設(shè)置單元格合并的行數(shù)正整數(shù)第6章表格與表單例6-4在網(wǎng)頁上創(chuàng)建如圖6-5所示的表格。文件名：6-4.html第6章表格與表單代碼如下：<h2align="center">學(xué)生情況表</h2><tableborder="1"align="center"width="400"cellpadding="0"cellspacing="0"><trheight="50"bgcolor="#CCCCCC"><thcolspan="3">基本信息</th>

<thcolspan="3">成績信息</th></tr>……注意：在<th>標(biāo)記中使用colspan屬性實現(xiàn)單元格的合并，使用bgcolor設(shè)置了兩個單元格的背景顏色為紅色。第6章表格與表單6.2.5使用CSS設(shè)置表格樣式例6-5將例6-4創(chuàng)建的表格使用CSS屬性設(shè)置表格的樣式。效果如圖6-6所示。文件名：6-5.html，代碼如下：第6章表格與表單…<body><h2>學(xué)生情況表</h2><table><trclass="firstLine"><thcolspan="3">基本信息</th><thcolspan="3">成績信息</th></tr><tr><th>學(xué)號</th><th>姓名</th><th>性別</th><th>數(shù)學(xué)</th><th>語文</th><th>英語</th></tr>…1.搭建表格結(jié)構(gòu)：2.設(shè)置CSS樣式：<styletype="text/css">h2{text-align:center;}table{width:400px;height:200px;border:1pxsolid#000;border-collapse:collapse;margin:0auto;}th,td{border:1pxsolid#000;}.firstLine{ background:#dedede; height:50px;}.redTd{

background:#f00;}</style>第6章表格與表單6.3表格案例實現(xiàn)第6章表格與表單1.搭建表格結(jié)構(gòu)<h3>學(xué)生信息表</h3><tableclass="gridtable"><tr><th>學(xué)號</th><th>姓名</th><th>性別</th><th>家庭住址</th><th>聯(lián)系電話</th><th>QQ</th><th>電子郵箱</th></tr><tr><td>2016020101</td><td>王紅俠</td><td>女</td><td>山東濟寧市</td><td>lt;/td><td>642076813</td><td>whongx@126.com</td></tr>……2.設(shè)置CSS樣式<styletype="text/css">h3{ text-align:center;}table.gridtable{ font-family:verdana,arial,sans-serif; font-size:12px; color:#333; border:1px#666solid; border-collapse:collapse; margin:0auto;}table.gridtableth{ border:1pxsolid#666; padding:8px; background-color:#dedede;}table.gridtabletd{ border:1pxsolid#666; padding:8px; background-color:#fff;}</style>第6章表格與表單6.4表單案例：用戶注冊表第6章表格與表單6.5表單相關(guān)知識6.5.1認(rèn)識表單表單是用于實現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對象。圖6-10所示是用戶登錄信息表單。表單是允許瀏覽者進行輸入的區(qū)域，可以使用表單從客戶端收集信息。瀏覽者在表單中輸入信息，然后將這些信息提交給網(wǎng)站服務(wù)器，服務(wù)器中的應(yīng)用程序會對這些信息進行處理，進行響應(yīng)，這樣就完成了瀏覽者和網(wǎng)站服務(wù)器之間的交互。第6章表格與表單6.5.2表單標(biāo)記表單的基本語法及格式為：<formname="表單名稱"action="URL地址"method="提交方式">…</form><form>標(biāo)記主要處理表單結(jié)果的處理和傳送，常用屬性的含義如下：name屬性：給定表單名稱，以區(qū)分同一個頁面中的多個表單。action屬性：指定處理表單信息的服務(wù)器端應(yīng)用程序。method屬性：用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中，get為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，使用method="post"可以大量的提交數(shù)據(jù)。注意：<form>標(biāo)記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件。第6章表格與表單6.5.3表單控件

1.input控件Input控件用于定義文本框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。其基本語法格式如下：<inputtype=“控件類型”/>說明：<input/>標(biāo)記為單標(biāo)記，type屬性取值如表6-4所示。屬性屬性值作用typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域第6章表格與表單6.5.3表單控件

2.textarea控件當(dāng)定義input控件的type屬性值為text時，可以創(chuàng)建一個單行文本輸入框。如果需要輸入大量信息，字?jǐn)?shù)沒有限制時，就需要使用<textarea></textarea>標(biāo)記。例如，在用戶信息注冊表單中，輸入個人簡歷時的控件就是textarea控件。其基本語法格式如下：<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>第6章表格與表單6.5.3表單控件

3.select控件select控件提供下拉列表選項，供用戶進行選擇。下拉框通過select標(biāo)記和option標(biāo)記來定義。例如，在用戶信息注冊表單中，職業(yè)的選擇項就使用下拉列表實現(xiàn)。其基本語法格式如下：<select><option>選項1</option><option>選項2</option><option>選項3</option>...</select>第6章表格與表單6.5.4使用CSS設(shè)置表單樣式

例6-6創(chuàng)建一個用戶登錄表單，并使用CSS對表單樣式進行設(shè)置，其效果如下圖所示。文件名：6-6.html。第6章表格與表單<formaction="#"method="post"><tableclass="content"><tr><tdclass="left">用戶名：</td><td><inputtype="text"value=""class="num"/></td></tr><tr><tdclass="left">密碼：</td><td><inputtype="password"class="pas"/></td></tr><tr><td> </td><tdclass="btn"><inputtype="button"value=""/></td></tr></table></form>1.創(chuàng)建表單，用表格進行布局

第6章表格與表單<styletype="text/css">body{ font-size:12px; font-family:"宋體";}body,table,form,input{/*重置瀏覽器的默認(rèn)樣式*/ padding:0; margin:0; border:0;}.content{/*表格的樣式*/ width:300px; height:150px; padding-top:20px; margin:50pxauto;/*表格在瀏覽器中居中*/ background:#DCF5FA;}.left{/*左側(cè)單元格的樣式*/ width:90px; text-align:right;}.num,.pas{/*對文本框設(shè)置相同的寬、高、邊框和內(nèi)邊距*/ width:152px; height:18px; border:1pxsolid#38a1bf; padding:2px2px2px22px;}2.設(shè)置CSS樣式

.num{/*定義第一個文本框的背景和文本顏色*/background:url(images/1.jpg)no-repeat5pxcenter#fff;color:#999;}.pas{/*定義第二個文本框的背景*/background:url(images/2.jpg)no-repeat5pxcenter#fff;}.btninput{/*定義按鈕的樣式*/ width:87px; height:24px; background:url(images/3.jpg)no-repeat;}</style>第6章表格與表單在使用CSS控制表單樣式時，注意以下幾個問題。（1）由于form是塊元素，重置瀏覽器的默認(rèn)樣式時，需要清除其內(nèi)邊距padding和外邊距margin。（2）input控件默認(rèn)有邊框效果，當(dāng)使用<input/>標(biāo)記定義各種按鈕時，通常需要清除其邊框。（3）通常情況下需要對文本框和密碼框設(shè)置2到3像素的內(nèi)邊距，以使用戶輸入的內(nèi)容不會緊貼輸入框。第6章表格與表單6.6表單案例實現(xiàn)第6章表格與表單新建一個網(wǎng)頁文件，文件名稱為：reg.html。雙擊文件reg.html，打開該文件，添加頁面結(jié)構(gòu)代碼，然后設(shè)置CSS

溫馨提示

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

最新文檔

評論

0/150

提交評論