網(wǎng)頁設計與制作項目教程項目6-“千年之戀”注冊張課件

項目6“千年之戀”注冊頁面制作·

表格樣式的控制·

表單樣式的控制·表格的創(chuàng)建·表單的相關標記

HTML項目6“千年之戀”注冊頁面制作·表格樣式的控制·表格的創(chuàng)學習目標理解表格的創(chuàng)建1熟悉表單樣式的控制42掌握表格樣式的控制理解掌握熟悉掌握3掌握表單相關標記學習目標理解表格的創(chuàng)建1熟悉表單樣42掌握表格樣式的控制理解目錄CSS控制表格樣式?點擊查看本小節(jié)知識架構認識表單?點擊查看本小節(jié)知識架構【任務6-1】認識表格相關標記?點擊查看本小節(jié)知識架構【任務6-2】【任務6-3】表單控件?點擊查看本小節(jié)知識架構CSS控制表單樣式?點擊查看本小節(jié)知識架構【任務6-4】【任務6-5】目錄CSS控制表格樣式?點擊查看本小節(jié)知識架構認識表單?目錄制作頭部及導航模塊制作banner及內(nèi)容模塊【任務6-6】布局及定義基礎樣式【任務6-7】【任務6-8】制作頁腳模塊【任務6-9】目錄制作頭部及導航模塊制作banner及內(nèi)容模塊【任務6知識架構12345表格的創(chuàng)建<table>標記的屬性<tr>標記的屬性<td>標記的屬性<th>標記及其屬性【任務6-1】認識表格相關標記知識架構12345表格的創(chuàng)建<table>標記的屬【任務6-2】

CSS控制表格樣式123CSS控制表格邊框CSS控制單元格邊距CSS控制單元格的寬高知識架構【任務6-2】CSS控制表格樣式123CSS控制表格邊框C【任務6-3】

認識表單12初識表單創(chuàng)建表單知識架構【任務6-3】認識表單12初識表單創(chuàng)建表單知識架構【任務6-4】

表單控件123input控件textarea控件select控件知識架構【任務6-4】表單控件123input控件textarea【任務6-5】

CSS控制表單樣式123input控件textarea控件select控件知識架構【任務6-5】CSS控制表單樣式123input控件tex在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應用非常廣泛。下面，將針對表格的相關標記進行詳細講解。

【任務6-1】認識表格相關標記在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多表格是怎樣形成的？說到表格，其實大家并不陌生課程表網(wǎng)上購物查票

【任務6-1】認識表格相關標記表格是怎樣形成的？說到表格，其實大家并不陌生課程表網(wǎng)上購物查

<table></table><tr></tr>

<td></td>定義一個表格定義表格中的一行，嵌套在<table></table>中定義表格中的單元格，嵌套在<tr></tr>中創(chuàng)建table表格，離不開以下3對標簽:表格的創(chuàng)建1.

【任務6-1】認識表格相關標記<table></table><tr></tr><td><table>標記有很多常用屬性，具體如下表所示。<table>標記的屬性2.

【任務6-1】認識表格相關標記<table>標記有很多常用屬性，具體如下表所示。<tabl<table>標記的屬性在實體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding<table>標記的屬性2.

【任務6-1】認識表格相關標記<table>標記的屬性在實體表格中的表現(xiàn)如下圖所示：wid<tr>標記有很多常用屬性，具體如下表所示。<tr>標記的屬性3.

【任務6-1】認識表格相關標記<tr>標記有很多常用屬性，具體如下表所示。<tr>標記的屬學習<tr>的屬性時需要注意以下幾點：<tr>標記無寬度屬性width，其寬度取決于表格標記<table>。雖然可以對<tr>標記應用background屬性，但是在<tr>標記中此屬性兼容問題嚴重。對<tr>標記應用valign屬性，用于設置一行內(nèi)容的垂直對齊方式。對于<tr>標記的屬性了解即可，均可用相應的CSS樣式屬性替代。ABCD<tr>標記的屬性3.

【任務6-1】認識表格相關標記學習<tr>的屬性時需要注意以下幾點：<tr>標記無寬度屬性<td>標記有很多常用屬性，具體如下表所示。<td>標記的屬性4.

【任務6-1】認識表格相關標記<td>標記有很多常用屬性，具體如下表所示。<td>標記的屬學習<td>的屬性時需要注意以下幾點：在<td>標記的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。當對某一個<td>標記應用height屬性設置高度時，該行中的所有單元格均會以設置的高度顯示。當對某一個<td>標記應用width屬性設置寬度時，該列中的所有單元格均會以設置的寬度顯示。ABC<td>標記的屬性4.

【任務6-1】認識表格相關標記學習<td>的屬性時需要注意以下幾點：在<td>標記的屬性中表頭表頭<th></th>標記用來設置表頭，其文本默認加粗居中顯示。<th>標記的屬性5.

【任務6-1】認識表格相關標記表頭表頭<th></th>標記用來設置表頭，其文本默認加粗居在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應用非常廣泛。下面，將針對表格的相關標記進行詳細講解。

【任務6-2】CSS控制表格樣式在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多以日歷為例，分析CSS控制表格樣式日歷的邊框border日歷的單元格邊距paddingheightwidthCSS控制表格邊框1.

【任務6-2】CSS控制表格樣式以日歷為例，分析CSS控制表格樣式日歷的邊框border日歷CSS代碼如下所示：table{ width:280px; height:280px; border:1pxsolid#F00;/*設置table的邊框*/}td,th{border:1pxsolid#F00;}/*為單元格單獨設置邊框*/在設置表格的邊框時，也要給單元格設置相應的邊框。CSS控制表格邊框1.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：table{在設置表格的邊框時，也要給單CSS代碼如下所示：td{ padding:20px;}對單元格標記<td>應用padding屬性?！窘Y論】設置單元格內(nèi)容與邊框之間的距離，可以對<td>標記應用內(nèi)邊距樣式屬性padding，或?qū)?lt;table>標記應用HTML標記屬性cellpadding。CSS控制單元格邊距2.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：td{對單元格標記<td>應用paddi學習CSS控制單元格邊距時需要注意以下幾點：行標記<tr>無內(nèi)邊距屬性padding和外邊距屬性margin。外邊距屬性margin對單元格無效，要想設置相鄰單元格邊框之間的距離，只能對<table>標記應用HTML標記屬性cellspacing。ABCSS控制單元格邊距2.

【任務6-2】CSS控制表格樣式學習CSS控制單元格邊距時需要注意以下幾點：行標記<tr>無CSS代碼如下所示：td{ width:20px; Height:20px;}對單元格標記<td>應用width和height屬性?！窘Y論】對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時，最終的寬度或高度將取其中的較大者。CSS控制單元格的寬高3.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：td{對單元格標記<td>應用width表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上提交的的登錄和注冊信息，就是通過表單作為載體傳遞給服務器的，可以說表單是用戶和瀏覽器交互的重要媒介。下面，將針對表單的相關知識進行詳細講解。

【任務6-3】認識表單表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上什么是表單？

【任務6-3】認識表單什么是表單？【任務6-想想表單的主要功能互聯(lián)網(wǎng)時代表單很常見登錄快遞查詢電商注冊

【任務6-3】認識表單想想表單的主要功能互聯(lián)網(wǎng)時代表單很常見登錄快遞查詢電商注冊以電商注冊頁面為例，分析表單。提示信息表單域表單控件初識表單1.

【任務6-3】認識表單以電商注冊頁面為例，分析表單。提示信息表單域表單控件初識表單一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操作。相當于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。提示信息表單控件表單域初識表單1.

【任務6-3】認識表單一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操要想讓表單中的數(shù)據(jù)傳送給后臺服務器，就必須定義表單域。在HTML中，<form></form>標記被用于定義表單域。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【結論】<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標記<form>的常用屬性。創(chuàng)建表單2.

【任務6-3】認識表單要想讓表單中的數(shù)據(jù)傳送給后臺服務器，就必須定義表單域。在HTaction屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。actionmethodnamename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。創(chuàng)建表單2.

【任務6-3】認識表單action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的ur學習創(chuàng)建表單時需要注意以下幾點：method提交方式中，get提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，使用method="post"可以大量的提交數(shù)據(jù)。<form>標記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在<form>與</form>之間添加相應表單控件。AB創(chuàng)建表單2.

【任務6-3】認識表單學習創(chuàng)建表單時需要注意以下幾點：method提交方式中，ge表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密碼輸入框、文本域、下拉列表、復選框等，只有掌握了這些控件的使用方法才能正確的創(chuàng)建表單。下面，將針對表單控件的相關知識進行詳細講解。

【任務6-4】表單控件表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密什么是表單控件？

【任務6-4】表單控件什么是表單控件？【任務6-你了解這些表單控件？表單控件常用在登錄和注冊模塊

【任務6-4】表單控件你了解這些表單控件？表單控件常用在登錄和注冊模塊瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復選框、提交按鈕、重置按鈕等，要想定義這些元素就需要使用input控件。<inputtype="控件類型"/>input控件1.

【任務6-4】表單控件瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復選框、提交按input控件1.

【任務6-4】表單控件input控件1.【任務6單行文本輸入框密碼輸入框單選按鈕<inputtype="text"/>用來輸入簡短的信息，常用的屬性有name、value、maxlength。<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。<inputtype="radio"/>用于單項選擇，如選擇性別、是否操作等。復選框普通按鈕提交按鈕<inputtype="checkbox"/>用于多項選擇，可對其應用checked屬性，指定默認選中項。<inputtype="button"/>常常配合javaScript腳本語言使用，初學者了解即可。<inputtype="submit"/>可以對其應用value屬性，改變提交按鈕上的默認文本。input控件1.

【任務6-4】表單控件單行文本輸入框密碼輸入框單選按鈕<inputtype="t<label>標記使用，以擴大控件的選擇范圍，從而提供更好的用戶體驗。例如：在選擇性別時，希望單擊提示文字“男”或者“女”也可以選中相應的單選按鈕。<inputtype="radio"name="sex"checked="checked"id="man"/><labelfor="man">男</label>input控件1.

【任務6-4】表單控件<label>標記使用，以擴大控件的選擇范圍，從而提供更好的textarea控件可以創(chuàng)建多行文本輸入框。基本語法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>textarea控件2.

【任務6-4】表單控件textarea控件可以創(chuàng)建多行文本輸入框?；菊Z法格式<t學習textarea控件時需要注意以下幾點：各瀏覽器對cols和rows屬性的理解不同，當對textarea控件應用cols和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。textarea控件2.

【任務6-4】表單控件學習textarea控件時需要注意以下幾點：各瀏覽器對col瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單。select控件3.

【任務6-4】表單控件瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單。select控基本語法格式<select><option>選項1</option><option>選項2</option><option>選項3</option>...</select>使用select控件定義下拉菜單的基本語法格式如下：select控件3.

【任務6-4】表單控件基本語法格式<select>使用select控件定義下拉菜<select>和<option>標記屬性select控件3.

【任務6-4】表單控件<select>和<option>標記屬性select控件3在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，這樣當存在很多選項時，要想找到相應的選項就會更加容易。例如：select控件3.

【任務6-4】表單控件在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，因此在網(wǎng)頁設計時，使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控件的字體、邊框、背景和內(nèi)邊距下面，將針對CSS控制表單控件的相關知識進行詳細講解。

【任務6-5】CSS控制表單樣式因此在網(wǎng)頁設計時，使用CSS可以輕松地控制表單控件的樣式，主使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控件的字體、邊框、背景和內(nèi)邊距等。CSS控制表單樣式1.

【任務6-5】CSS控制表單樣式使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控由于form是塊元素，重置瀏覽器的默認樣式時，需要清除其內(nèi)邊距padding和外邊距margin使用<input/>標記定義各種按鈕時，通常需要清除其邊框通常情況下需要對文本框和密碼框設置2到3像素的內(nèi)邊距，以使用戶輸入的內(nèi)容不會緊貼輸入框123CSS控制表單樣式1.

【任務6-5】CSS控制表單樣式由于form是塊元素，重置瀏覽器的默認樣式時，需要清除其內(nèi)邊網(wǎng)站項目”千年之戀”注冊頁面制作該怎樣開發(fā)一個網(wǎng)站項目呢？“千年之戀”注冊頁面制作網(wǎng)站項目”千年之戀”注冊頁面制作該怎樣開發(fā)一個“千年之戀”注

【任務6-6】布局及定義基礎樣式【任務6-6】拿到效果圖后的準備工作對頁面進行布局，并添加CSS樣式。定義基礎樣式

【任務6-6】布局及定義基礎樣式建立站點切圖準備工作效果分析拿到效果圖后的準備工作對頁面進行布局，并添加CSS樣式。定義準備工作→建立站點1.創(chuàng)建網(wǎng)站根目錄新建站點站點建立完成在根目錄下新建文件step1step2step3step4

【任務6-6】布局及定義基礎樣式準備工作→建立站點1.創(chuàng)建網(wǎng)站根目錄新建站點站點建立完成在根1.

【任務6-6】布局及定義基礎樣式使用AdobeFireworksCS6的切片工具，導出“千年之戀”注冊頁中的素材圖片，存儲在站點中的images文件夾中。準備工作→切圖1.【任務6-6】效果分析2.HTML結構分析CSS樣式分析頁面中的各個模塊居中顯示，寬度為980px，因此，頁面的版心為980px。另外，頁面中的所有字體均為微軟雅黑，字體為14px，a鏈接訪問前和訪問后的字體大小為16px，文字顏色為#fff，這些可以通過CSS公共樣式進行定義?！扒曛畱佟弊皂撁鎻纳系较驴梢苑譃?個模塊。

【任務6-6】布局及定義基礎樣式效果分析2.HTML結構分析CSS頁面中的各個模塊居中效果分析2.“千年之戀”注冊頁面從上到下可以分為5個模塊。

【任務6-6】布局及定義基礎樣式效果分析2.“千年之戀”注冊頁面從上到下可以分為5個模塊。定義基礎樣式3.

【任務6-6】布局及定義基礎樣式/*重置瀏覽器的默認樣式*/*{margin:0;padding:0;list-style:none;outline:none;border:0;background:none;}/*全局控制*/body{font-family:"微軟雅黑";font-size:14px;}a:link,a:visited{text-decoration:none;color:#fff;font-size:16px;}定義基礎樣式3.【制作頭部及導航模塊1.效果圖如下所示：【任務6-7】制作頭部及導航模塊制作頭部及導航模塊1.效果圖如下所示：【任務6-7】制作制作banner及內(nèi)容模塊1.效果圖如下所示：【任務6-8】制作banner及內(nèi)容模塊制作banner及內(nèi)容模塊1.效果圖如下所示：【任務6-8】制作頁腳模塊1.效果圖如下所示：【任務6-9】制作頁腳模塊制作頁腳模塊1.效果圖如下所示：【任務6-9】制作頁腳模塊【項目總結】建議讀者在制作項目前先理解表格的創(chuàng)建方法，掌握表格樣式的控制，掌握表單相關標記，熟悉表單樣式的控制。input控件屬于行內(nèi)元素，但可以對其設置寬高和對齊屬性，有些資料稱其為行內(nèi)塊元素。編輯代碼過程中，需整體把控頁面的結構，每完成一部分需通過瀏覽器檢測，測試通過后再進行下面的部分?！卷椖靠偨Y】建議讀者在制作項目前先理解表格的創(chuàng)建方法，掌握表網(wǎng)頁設計與制作項目教程項目6-“千年之戀”注冊張課件項目6“千年之戀”注冊頁面制作·

表格樣式的控制·

表單樣式的控制·表格的創(chuàng)建·表單的相關標記

HTML項目6“千年之戀”注冊頁面制作·表格樣式的控制·表格的創(chuàng)學習目標理解表格的創(chuàng)建1熟悉表單樣式的控制42掌握表格樣式的控制理解掌握熟悉掌握3掌握表單相關標記學習目標理解表格的創(chuàng)建1熟悉表單樣42掌握表格樣式的控制理解目錄CSS控制表格樣式?點擊查看本小節(jié)知識架構認識表單?點擊查看本小節(jié)知識架構【任務6-1】認識表格相關標記?點擊查看本小節(jié)知識架構【任務6-2】【任務6-3】表單控件?點擊查看本小節(jié)知識架構CSS控制表單樣式?點擊查看本小節(jié)知識架構【任務6-4】【任務6-5】目錄CSS控制表格樣式?點擊查看本小節(jié)知識架構認識表單?目錄制作頭部及導航模塊制作banner及內(nèi)容模塊【任務6-6】布局及定義基礎樣式【任務6-7】【任務6-8】制作頁腳模塊【任務6-9】目錄制作頭部及導航模塊制作banner及內(nèi)容模塊【任務6知識架構12345表格的創(chuàng)建<table>標記的屬性<tr>標記的屬性<td>標記的屬性<th>標記及其屬性【任務6-1】認識表格相關標記知識架構12345表格的創(chuàng)建<table>標記的屬【任務6-2】

CSS控制表格樣式123CSS控制表格邊框CSS控制單元格邊距CSS控制單元格的寬高知識架構【任務6-2】CSS控制表格樣式123CSS控制表格邊框C【任務6-3】

認識表單12初識表單創(chuàng)建表單知識架構【任務6-3】認識表單12初識表單創(chuàng)建表單知識架構【任務6-4】

表單控件123input控件textarea控件select控件知識架構【任務6-4】表單控件123input控件textarea【任務6-5】

CSS控制表單樣式123input控件textarea控件select控件知識架構【任務6-5】CSS控制表單樣式123input控件tex在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應用非常廣泛。下面，將針對表格的相關標記進行詳細講解。

【任務6-1】認識表格相關標記在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多表格是怎樣形成的？說到表格，其實大家并不陌生課程表網(wǎng)上購物查票

【任務6-1】認識表格相關標記表格是怎樣形成的？說到表格，其實大家并不陌生課程表網(wǎng)上購物查

<table></table><tr></tr>

<td></td>定義一個表格定義表格中的一行，嵌套在<table></table>中定義表格中的單元格，嵌套在<tr></tr>中創(chuàng)建table表格，離不開以下3對標簽:表格的創(chuàng)建1.

【任務6-1】認識表格相關標記<table></table><tr></tr><td><table>標記有很多常用屬性，具體如下表所示。<table>標記的屬性2.

【任務6-1】認識表格相關標記<table>標記有很多常用屬性，具體如下表所示。<tabl<table>標記的屬性在實體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding<table>標記的屬性2.

【任務6-1】認識表格相關標記<table>標記的屬性在實體表格中的表現(xiàn)如下圖所示：wid<tr>標記有很多常用屬性，具體如下表所示。<tr>標記的屬性3.

【任務6-1】認識表格相關標記<tr>標記有很多常用屬性，具體如下表所示。<tr>標記的屬學習<tr>的屬性時需要注意以下幾點：<tr>標記無寬度屬性width，其寬度取決于表格標記<table>。雖然可以對<tr>標記應用background屬性，但是在<tr>標記中此屬性兼容問題嚴重。對<tr>標記應用valign屬性，用于設置一行內(nèi)容的垂直對齊方式。對于<tr>標記的屬性了解即可，均可用相應的CSS樣式屬性替代。ABCD<tr>標記的屬性3.

【任務6-1】認識表格相關標記學習<tr>的屬性時需要注意以下幾點：<tr>標記無寬度屬性<td>標記有很多常用屬性，具體如下表所示。<td>標記的屬性4.

【任務6-1】認識表格相關標記<td>標記有很多常用屬性，具體如下表所示。<td>標記的屬學習<td>的屬性時需要注意以下幾點：在<td>標記的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。當對某一個<td>標記應用height屬性設置高度時，該行中的所有單元格均會以設置的高度顯示。當對某一個<td>標記應用width屬性設置寬度時，該列中的所有單元格均會以設置的寬度顯示。ABC<td>標記的屬性4.

【任務6-1】認識表格相關標記學習<td>的屬性時需要注意以下幾點：在<td>標記的屬性中表頭表頭<th></th>標記用來設置表頭，其文本默認加粗居中顯示。<th>標記的屬性5.

【任務6-1】認識表格相關標記表頭表頭<th></th>標記用來設置表頭，其文本默認加粗居在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應用非常廣泛。下面，將針對表格的相關標記進行詳細講解。

【任務6-2】CSS控制表格樣式在網(wǎng)頁制作中，表格起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多以日歷為例，分析CSS控制表格樣式日歷的邊框border日歷的單元格邊距paddingheightwidthCSS控制表格邊框1.

【任務6-2】CSS控制表格樣式以日歷為例，分析CSS控制表格樣式日歷的邊框border日歷CSS代碼如下所示：table{ width:280px; height:280px; border:1pxsolid#F00;/*設置table的邊框*/}td,th{border:1pxsolid#F00;}/*為單元格單獨設置邊框*/在設置表格的邊框時，也要給單元格設置相應的邊框。CSS控制表格邊框1.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：table{在設置表格的邊框時，也要給單CSS代碼如下所示：td{ padding:20px;}對單元格標記<td>應用padding屬性?！窘Y論】設置單元格內(nèi)容與邊框之間的距離，可以對<td>標記應用內(nèi)邊距樣式屬性padding，或?qū)?lt;table>標記應用HTML標記屬性cellpadding。CSS控制單元格邊距2.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：td{對單元格標記<td>應用paddi學習CSS控制單元格邊距時需要注意以下幾點：行標記<tr>無內(nèi)邊距屬性padding和外邊距屬性margin。外邊距屬性margin對單元格無效，要想設置相鄰單元格邊框之間的距離，只能對<table>標記應用HTML標記屬性cellspacing。ABCSS控制單元格邊距2.

【任務6-2】CSS控制表格樣式學習CSS控制單元格邊距時需要注意以下幾點：行標記<tr>無CSS代碼如下所示：td{ width:20px; Height:20px;}對單元格標記<td>應用width和height屬性。【結論】對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時，最終的寬度或高度將取其中的較大者。CSS控制單元格的寬高3.

【任務6-2】CSS控制表格樣式CSS代碼如下所示：td{對單元格標記<td>應用width表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上提交的的登錄和注冊信息，就是通過表單作為載體傳遞給服務器的，可以說表單是用戶和瀏覽器交互的重要媒介。下面，將針對表單的相關知識進行詳細講解。

【任務6-3】認識表單表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上什么是表單？

【任務6-3】認識表單什么是表單？【任務6-想想表單的主要功能互聯(lián)網(wǎng)時代表單很常見登錄快遞查詢電商注冊

【任務6-3】認識表單想想表單的主要功能互聯(lián)網(wǎng)時代表單很常見登錄快遞查詢電商注冊以電商注冊頁面為例，分析表單。提示信息表單域表單控件初識表單1.

【任務6-3】認識表單以電商注冊頁面為例，分析表單。提示信息表單域表單控件初識表單一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操作。相當于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。提示信息表單控件表單域初識表單1.

【任務6-3】認識表單一個表單中通常需要包含一些說明性的文字，提示用戶進行填寫和操要想讓表單中的數(shù)據(jù)傳送給后臺服務器，就必須定義表單域。在HTML中，<form></form>標記被用于定義表單域。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【結論】<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標記<form>的常用屬性。創(chuàng)建表單2.

【任務6-3】認識表單要想讓表單中的數(shù)據(jù)傳送給后臺服務器，就必須定義表單域。在HTaction屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。actionmethodnamename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。創(chuàng)建表單2.

【任務6-3】認識表單action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的ur學習創(chuàng)建表單時需要注意以下幾點：method提交方式中，get提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，使用method="post"可以大量的提交數(shù)據(jù)。<form>標記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在<form>與</form>之間添加相應表單控件。AB創(chuàng)建表單2.

【任務6-3】認識表單學習創(chuàng)建表單時需要注意以下幾點：method提交方式中，ge表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密碼輸入框、文本域、下拉列表、復選框等，只有掌握了這些控件的使用方法才能正確的創(chuàng)建表單。下面，將針對表單控件的相關知識進行詳細講解。

【任務6-4】表單控件表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密什么是表單控件？

【任務6-4】表單控件什么是表單控件？【任務6-你了解這些表單控件？表單控件常用在登錄和注冊模塊

【任務6-4】表單控件你了解這些表單控件？表單控件常用在登錄和注冊模塊瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復選框、提交按鈕、重置按鈕等，要想定義這些元素就需要使用input控件。<inputtype="控件類型"/>input控件1.

【任務6-4】表單控件瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復選框、提交按input控件1.

【任務6-4】表單控件input控件1.【任務6單行文本輸入框密碼輸入框單選按鈕<inputtype="text"/>用來輸入簡短的信息，常用的屬性有name、value、maxlength。<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。<inputtype="radio"/>用于單項選擇，如選擇性別、是否操作等。復選框普通按鈕提交按鈕<inputtype="checkbox"/>用于多項選擇，可對其應用checked屬性，指定默認選中項。<inputtype="button"/>常常配合javaScript腳本語言使用，初學者了解即可。<inputtype="submit"/>可以對其應用value屬性，改變提交按鈕上的默認文本。input控件1.

【任務6-4】表單控件單行文本輸入框密碼輸入框單選按鈕<inputtype="t<label>標記使用，以擴大控件的選擇范圍，從而提供更好的用戶體驗。例如：在選擇性別時，希望單擊提示文字“男”或者“女”也可以選中相應的單選按鈕。<inputtype="radio"name="sex"checked="checked"id="man"/><labelfor="man">男</label>input控件1.

【任務6-4】表單控件<label>標記使用，以擴大控件的選擇范圍，從而提供更好的textarea控件可以創(chuàng)建多行文本輸入框?；菊Z法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>textarea控件2.

【任務6-4】表單控件textarea控件可以創(chuàng)建多行文本輸入框。基本語法格式<t學習textarea控件時需要注意以下幾點：各瀏覽器對cols和rows屬性的理解不同，當對textarea控件應用cols和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。textarea控件2.

【任務6-4】表單控件學習textarea控件時需要注意以下幾點：各瀏覽器對col瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單。select控件3.

【任務6-4】表單控件瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單。select控基本語法格式<select><option>選項1</option><option>選項2</option><option>選項3</option>...</select>使用select控件定義下拉菜單的基本語法格式如下：select控件3.

【任務6-4】表單控件基本語法格式<select>使用select控件定義下拉菜<select>和<option>標記屬性select控件3.

【任務6-4】表單控件<select>和<option>標記屬性select控件3在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，這樣當存在很多選項時，要想找到相應的選項就會更加容易。例如：select控件3.

【任務6-4】表單控件在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，因此在網(wǎng)頁設計時，使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控件的字體、邊框、背景和內(nèi)邊距下面，將針對CSS控制表單控件的相關知識進行詳細講解。

【任務6-5】CSS控制表單樣式因此在網(wǎng)頁設計時，使用CSS可以輕松地控制表單控件的樣式，主使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控件的字體、邊框、背景和內(nèi)邊距等。CSS控制表單樣式1.

【任務6-