HTML+CSS+JavaScript項(xiàng)目6-教學(xué)講解課件

項(xiàng)目6

“千年之戀”注冊頁面制作·CSS控制表格樣式·CSS控制表單樣式·表格的創(chuàng)建·表單控件HTML項(xiàng)目6“千年之戀”注冊頁面制作·CSS控制表格樣式·表【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記【任務(wù)6-2】CSS控制表格樣式【任務(wù)6-3】認(rèn)識(shí)表單【任務(wù)6-6】制作“千年之戀”注冊頁【任務(wù)6-4】表單控件【任務(wù)6-5】CSS控制表單樣式目錄【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記【任務(wù)6-2】CSS控制表格樣知識(shí)引入需求分析在文檔處理中，表格是一種很常見的表現(xiàn)手法。在網(wǎng)頁制作中，表格同樣起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進(jìn)行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應(yīng)用非常廣泛?！救蝿?wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記知識(shí)引入需求分析在文檔處理中，表格是一種很常見的表現(xiàn)手法。在12<table>標(biāo)記的屬性3<tr>標(biāo)記的屬性知識(shí)引入表格的創(chuàng)建4<td>標(biāo)記的屬性【任務(wù)6-1】知識(shí)儲(chǔ)備12<table>標(biāo)記的屬性3<tr>標(biāo)記的屬性知識(shí)引入表格1、表格的創(chuàng)建創(chuàng)建表格的具體語法格式如下：對上述語法的具體解釋如下：<table></table>：用于定義一個(gè)表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標(biāo)記中，在<table></table>中包含幾對<tr></tr>，就表示該表格有幾行。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。<table>

<tr>

<td>單元格內(nèi)的文字</td> ...</tr>...</table>【任務(wù)6-1】知識(shí)點(diǎn)講解1、表格的創(chuàng)建<table>【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性<table>標(biāo)記的屬性如下表所示。屬性名含義常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"無邊框）

像素值cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認(rèn)為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認(rèn)為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性<table>標(biāo)記的屬性如下表2、<table>標(biāo)記的屬性（1）border屬性在<table>標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認(rèn)為0。代碼如下：（2）cellspacing屬性cellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認(rèn)為2px。代碼如下：<tableborder=“10”cellspacing=“20”>

<tableborder=“10”>

【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（1）border屬性<tab2、<table>標(biāo)記的屬性（3）cellpadding屬性cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認(rèn)為1px。代碼如下：注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離，cellspacing則指的是外部單元格與單元格之間的距離?？梢越Y(jié)合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。<tableborder=“20”cellspacing=“20”cellpadding=“10”>

【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（3）cellpadding屬2、<table>標(biāo)記的屬性（4）width與height屬性默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對其應(yīng)用寬度屬性width或高度屬性height。注意:當(dāng)為表格標(biāo)記<table>同時(shí)設(shè)置width、height和cellpadding屬性時(shí)，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設(shè)置寬高的情況下測試cellpadding屬性?！救蝿?wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（4）width與height2、<table>標(biāo)記的屬性（5）align屬性align屬性用于定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當(dāng)對<table>標(biāo)記應(yīng)用align屬性時(shí)，控制的為表格的水平對齊方式，單元格中的內(nèi)容不受影響。（6）bgcolor屬性在<table>標(biāo)記中，bgcolor屬性用于設(shè)置表格的背景顏色。（7）background屬性在<table>標(biāo)記中，background屬性用于設(shè)置表格的背景圖像?！救蝿?wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（5）align屬性【任務(wù)6-3、<tr>標(biāo)記的屬性制作網(wǎng)頁時(shí)，有時(shí)需要表格中的某一行特殊顯示，這時(shí)就可以為行標(biāo)記<tr>定義屬性，其常用屬性如下表所示。屬性名含義常用屬性值height設(shè)置行高度

像素值

align設(shè)置一行內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址【任務(wù)6-1】知識(shí)點(diǎn)講解3、<tr>標(biāo)記的屬性制作網(wǎng)頁時(shí)，有時(shí)需要表格中的某一行特殊3、<tr>標(biāo)記的屬性作為初學(xué)者，學(xué)習(xí)<tr>的屬性時(shí)需要注意以下幾點(diǎn)：<tr>標(biāo)記無寬度屬性width，其寬度取決于表格標(biāo)記<table>?？梢詫?lt;tr>標(biāo)記應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對齊方式。雖然可以對<tr>標(biāo)記應(yīng)用background屬性，但是在<tr>標(biāo)記中此屬性兼容問題嚴(yán)重。【任務(wù)6-1】知識(shí)點(diǎn)講解3、<tr>標(biāo)記的屬性作為初學(xué)者，學(xué)習(xí)<tr>的屬性時(shí)需要注4、<td>標(biāo)記的屬性在網(wǎng)頁制作過程中，通過為單元格標(biāo)記<td>定義屬性，可以單獨(dú)對某一個(gè)單元格進(jìn)行控制，其常用屬性如下表所示。屬性名含義常用屬性值width設(shè)置單元格的寬度像素值

height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置單元格的背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)【任務(wù)6-1】知識(shí)點(diǎn)講解4、<td>標(biāo)記的屬性在網(wǎng)頁制作過程中，通過為單元格標(biāo)記<t4、<td>標(biāo)記的屬性注意:1、在<td>標(biāo)記的屬性中，重點(diǎn)掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用width屬性設(shè)置寬度時(shí)，該列中的所有單元格均會(huì)以設(shè)置的寬度顯示。當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用height屬性設(shè)置高度時(shí)，該行中的所有單元格均會(huì)以設(shè)置的高度顯示?！救蝿?wù)6-1】知識(shí)點(diǎn)講解4、<td>標(biāo)記的屬性注意:【任務(wù)6-1】知識(shí)點(diǎn)講解5、<th>標(biāo)記及其屬性th是TableHeading的簡寫，意為表格標(biāo)題（也稱表格表頭）。<th>標(biāo)記與<td>標(biāo)記的區(qū)別在于：表頭一般位于表格的第一行或第一列，且<th>標(biāo)記控制的文本顯示為粗體?！救蝿?wù)6-1】知識(shí)點(diǎn)講解5、<th>標(biāo)記及其屬性th是TableHeading的簡知識(shí)引入需求分析雖然表格布局逐漸被DIV+CSS布局所替代，但是作為傳統(tǒng)的HTML元素，表格在網(wǎng)頁制作中的作用是不可取代的，它不僅是實(shí)現(xiàn)數(shù)據(jù)顯示的最好方式，而且還可以輕松地對網(wǎng)頁元素進(jìn)行排版。下面將對CSS控制表格的樣式進(jìn)行講解?！救蝿?wù)6-2】CSS控制表格樣式知識(shí)引入需求分析雖然表格布局逐漸被DIV+CSS布局所替代，12CSS控制單元格邊框3CSS控制單元格的寬高知識(shí)引入CSS控制表格邊框【任務(wù)6-1】知識(shí)儲(chǔ)備12CSS控制單元格邊框3CSS控制單元格的寬高知識(shí)引入CS1、CSS控制表格邊框表格的邊框及寬高等可以由<table>標(biāo)記的屬性設(shè)置，直接寫在HTML結(jié)構(gòu)中，同樣這些特性可以由CSS控制，寫在樣式表中，更方便技術(shù)人員操作和修改。在設(shè)置表格的邊框時(shí)，還要給單元格單獨(dú)設(shè)置相應(yīng)的邊框。【任務(wù)6-2】知識(shí)點(diǎn)講解1、CSS控制表格邊框表格的邊框及寬高等可以由<table>2、CSS控制單元格邊距設(shè)置單元格內(nèi)容與邊框之間的距離，可以對<td>標(biāo)記應(yīng)用內(nèi)邊距樣式屬性padding，或?qū)?lt;table>標(biāo)記應(yīng)用HTML標(biāo)記屬性cellpadding。而<td>標(biāo)記無外邊距屬性margin，要想設(shè)置相鄰單元格邊框之間的距離，只能對<table>標(biāo)記應(yīng)用HTML標(biāo)記屬性cellspacing?！救蝿?wù)6-2】知識(shí)點(diǎn)講解2、CSS控制單元格邊距設(shè)置單元格內(nèi)容與邊框之間的距離，可以3、CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時(shí)，最終的寬度或高度將取其中的較大者?！救蝿?wù)6-2】知識(shí)點(diǎn)講解3、CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素知識(shí)引入需求分析表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上提交的的登錄和注冊信息，就是通過表單作為載體傳遞給服務(wù)器的，也就是說表單是用戶和瀏覽器交互的重要媒介?！救蝿?wù)6-3】認(rèn)識(shí)表單知識(shí)引入需求分析表單可以用來收集用戶在客戶端提交的各種信息，12創(chuàng)建表單知識(shí)引入初識(shí)表單【任務(wù)6-3】知識(shí)儲(chǔ)備12創(chuàng)建表單知識(shí)引入初識(shí)表單【任務(wù)6-3】知識(shí)儲(chǔ)備1、初識(shí)表單在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成，如下圖所示，即為一個(gè)簡單的HTML表單界面及其構(gòu)成?！救蝿?wù)6-3】知識(shí)點(diǎn)講解1、初識(shí)表單【任務(wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單在HTML中，<form></form>標(biāo)記被用于定義表單域，即表單開始和結(jié)束的位置，所有的表單元素都要在這對標(biāo)記之間才有效。創(chuàng)建表單的基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【任務(wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單<formaction="url地址"met2、創(chuàng)建表單<form>標(biāo)記的常用屬性如下表所示：屬性名含義action用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。methodmethod屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中g(shù)et為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制。name用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。注意:<form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件。【任務(wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單屬性名含義action用于指定接收并處理表單數(shù)據(jù)知識(shí)引入需求分析表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密碼輸入框、文本域、下拉列表、復(fù)選框等，只有掌握了這些控件的使用方法才能正確的創(chuàng)建表單?！救蝿?wù)6-4】表單控件知識(shí)引入需求分析表單控件為表單的核心內(nèi)容，不同的表單控件具有12textarea控件知識(shí)引入input控件3select控件【任務(wù)6-4】知識(shí)儲(chǔ)備12textarea控件知識(shí)引入input控件3select1、input控件input控件的基本語法格式如下：在上面的語法中，<input/>標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，其常用屬性如下表所示。<inputtype=“控件類型”>【任務(wù)6-4】知識(shí)點(diǎn)講解1、input控件input控件的基本語法格式如下：<inp1、input控件屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)【任務(wù)6-4】知識(shí)點(diǎn)講解1、input控件屬性屬性值描述typetext單行文本輸入1、input控件值得一提的是，常常需要將<input/>控件聯(lián)合<label>標(biāo)記使用，以擴(kuò)大控件的選擇范圍，從而提供更好的用戶體驗(yàn)，例如在選擇性別時(shí)，希望單擊提示文字“男”或者“女”也可以選中相應(yīng)的單選按鈕?！救蝿?wù)6-4】知識(shí)點(diǎn)講解1、input控件值得一提的是，常常需要將<input/>2、textarea控件如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：在上面的語法格式中，cols和rows為<textarea>標(biāo)記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>【任務(wù)6-4】知識(shí)點(diǎn)講解2、textarea控件如果需要輸入大量的信息，就需要用到<2、textarea控件注意:各瀏覽器對cols和rows屬性的理解不同，當(dāng)對textarea控件應(yīng)用cols和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。【任務(wù)6-4】知識(shí)點(diǎn)講解2、textarea控件注意:【任務(wù)6-4】知識(shí)點(diǎn)講解3、select控件下圖為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉符號(hào)“

”時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件?！救蝿?wù)6-4】知識(shí)點(diǎn)講解3、select控件下圖為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉符號(hào)“”3、select控件使用select控件定義下拉菜單的基本語法格式如下：在上面的語法中，<select></select>標(biāo)記用于在表單中添加一個(gè)下拉菜單，<option></option>用于定義下拉菜單中的具體選項(xiàng)，每對<select></select>中至少應(yīng)包含一對<option></option>。<select>

<option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select>【任務(wù)6-4】知識(shí)點(diǎn)講解3、select控件使用select控件定義下拉菜單的基本語3、select控件值得一提的是，在HTML中，可以為<select>和<option>標(biāo)記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表所示。標(biāo)記名常用屬性描述<select>size指定下拉菜單的可見選項(xiàng)數(shù)（取值為正整數(shù)）。multiple定義multiple="multiple"時(shí)，下拉菜單將具有多項(xiàng)選擇的功能，方法為按住Ctrl鍵的同時(shí)選擇多項(xiàng)。<option>selected定義selected="selected"時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)?！救蝿?wù)6-4】知識(shí)點(diǎn)講解3、select控件值得一提的是，在HTML中，可以為<se3、select控件在實(shí)際網(wǎng)頁制作過程中，有時(shí)候需要對下拉菜單中的選項(xiàng)進(jìn)行分組，這樣當(dāng)存在很多選項(xiàng)時(shí)，要想找到相應(yīng)的選項(xiàng)就會(huì)更加容易，通常可通過在下拉菜單中使用<optgroup></optgroup>標(biāo)記來實(shí)現(xiàn)這一功能?！救蝿?wù)6-4】知識(shí)點(diǎn)講解3、select控件在實(shí)際網(wǎng)頁制作過程中，有時(shí)候需要對下拉菜知識(shí)引入需求分析使用表單的最終目的是提供更好的用戶體驗(yàn)，因此在網(wǎng)頁設(shè)計(jì)時(shí)，不僅需要表單具有相應(yīng)的功能，同時(shí)還希望各種表單控件的樣式更加美觀。使用CSS可以輕松地控制表單控件的樣式，主要體現(xiàn)在控制表單控件的字體、邊框、背景和內(nèi)邊距等?！救蝿?wù)6-5】CSS控制表單樣式知識(shí)引入需求分析使用表單的最終目的是提供更好的用戶體驗(yàn)，因此1知識(shí)引入CSS控制表單樣式【任務(wù)6-5】知識(shí)儲(chǔ)備1知識(shí)引入CSS控制表單樣式【任務(wù)6-5】知識(shí)儲(chǔ)備1、CSS控制表單樣式在使用CSS控制表單樣式時(shí)，讀者需要注意以下幾個(gè)問題。（1）由于form是塊元素，重置瀏覽器的默認(rèn)樣式時(shí)，需要清除其內(nèi)邊距padding和外邊距margin，如上面CSS樣式代碼中的第2行代碼所示。（2）input控件默認(rèn)有邊框效果，當(dāng)使用<input/>標(biāo)記定義各種按鈕時(shí)，通常需要清除其邊框，如上面CSS樣式代碼中的第2行代碼所示。（3）通常情況下需要對文本框和密碼框設(shè)置2到3像素的內(nèi)邊距，以使用戶輸入的內(nèi)容不會(huì)緊貼輸入框，如上面CSS樣式代碼中的第22行代碼所示?！救蝿?wù)6-5】知識(shí)點(diǎn)講解1、CSS控制表單樣式【任務(wù)6-5】知識(shí)點(diǎn)講解最終效果如圖所示：【任務(wù)6-6】布局及定義基礎(chǔ)樣式最終效果如圖所示：【任務(wù)6-6】布局及定義基礎(chǔ)樣式效果如圖所示：【任務(wù)6-7】制作頭部及導(dǎo)航模塊效果如圖所示：【任務(wù)6-7】制作頭部及導(dǎo)航模塊效果如圖所示：【任務(wù)6-8】制作banner及內(nèi)容模塊效果如圖所示：【任務(wù)6-8】制作banner及內(nèi)容模塊效果如圖所示：【任務(wù)6-9】制作頁腳模塊效果如圖所示：【任務(wù)6-9】制作頁腳模塊建議讀者在制作項(xiàng)目前先理解表格的創(chuàng)建方法，掌握表格樣式的控制，掌握表單相關(guān)標(biāo)記，熟悉表單樣式的控制。input控件屬于行內(nèi)元素，但可以對其設(shè)置寬高和對齊屬性，有些資料稱其為行內(nèi)塊元素。編輯代碼過程中，需整體把控頁面的結(jié)構(gòu)，每完成一部分需通過瀏覽器檢測，測試通過后再進(jìn)行下面的部分。項(xiàng)目總結(jié)建議讀者在制作項(xiàng)目前先理解表格的創(chuàng)建方法，掌握表格樣式的控制HTML+CSS+JavaScript項(xiàng)目6-“教學(xué)講解課件項(xiàng)目6

“千年之戀”注冊頁面制作·CSS控制表格樣式·CSS控制表單樣式·表格的創(chuàng)建·表單控件HTML項(xiàng)目6“千年之戀”注冊頁面制作·CSS控制表格樣式·表【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記【任務(wù)6-2】CSS控制表格樣式【任務(wù)6-3】認(rèn)識(shí)表單【任務(wù)6-6】制作“千年之戀”注冊頁【任務(wù)6-4】表單控件【任務(wù)6-5】CSS控制表單樣式目錄【任務(wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記【任務(wù)6-2】CSS控制表格樣知識(shí)引入需求分析在文檔處理中，表格是一種很常見的表現(xiàn)手法。在網(wǎng)頁制作中，表格同樣起著重要的作用，除了用來對齊數(shù)據(jù)之外，更多的用來進(jìn)行網(wǎng)頁排版，使一些數(shù)據(jù)信息更容易瀏覽，因此表格在頁面布局中的應(yīng)用非常廣泛?！救蝿?wù)6-1】認(rèn)識(shí)表格相關(guān)標(biāo)記知識(shí)引入需求分析在文檔處理中，表格是一種很常見的表現(xiàn)手法。在12<table>標(biāo)記的屬性3<tr>標(biāo)記的屬性知識(shí)引入表格的創(chuàng)建4<td>標(biāo)記的屬性【任務(wù)6-1】知識(shí)儲(chǔ)備12<table>標(biāo)記的屬性3<tr>標(biāo)記的屬性知識(shí)引入表格1、表格的創(chuàng)建創(chuàng)建表格的具體語法格式如下：對上述語法的具體解釋如下：<table></table>：用于定義一個(gè)表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標(biāo)記中，在<table></table>中包含幾對<tr></tr>，就表示該表格有幾行。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個(gè)單元格）。<table>

<tr>

<td>單元格內(nèi)的文字</td> ...</tr>...</table>【任務(wù)6-1】知識(shí)點(diǎn)講解1、表格的創(chuàng)建<table>【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性<table>標(biāo)記的屬性如下表所示。屬性名含義常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"無邊框）

像素值cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認(rèn)為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認(rèn)為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性<table>標(biāo)記的屬性如下表2、<table>標(biāo)記的屬性（1）border屬性在<table>標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認(rèn)為0。代碼如下：（2）cellspacing屬性cellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認(rèn)為2px。代碼如下：<tableborder=“10”cellspacing=“20”>

<tableborder=“10”>

【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（1）border屬性<tab2、<table>標(biāo)記的屬性（3）cellpadding屬性cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認(rèn)為1px。代碼如下：注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離，cellspacing則指的是外部單元格與單元格之間的距離?？梢越Y(jié)合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。<tableborder=“20”cellspacing=“20”cellpadding=“10”>

【任務(wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（3）cellpadding屬2、<table>標(biāo)記的屬性（4）width與height屬性默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對其應(yīng)用寬度屬性width或高度屬性height。注意:當(dāng)為表格標(biāo)記<table>同時(shí)設(shè)置width、height和cellpadding屬性時(shí)，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設(shè)置寬高的情況下測試cellpadding屬性?！救蝿?wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（4）width與height2、<table>標(biāo)記的屬性（5）align屬性align屬性用于定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當(dāng)對<table>標(biāo)記應(yīng)用align屬性時(shí)，控制的為表格的水平對齊方式，單元格中的內(nèi)容不受影響。（6）bgcolor屬性在<table>標(biāo)記中，bgcolor屬性用于設(shè)置表格的背景顏色。（7）background屬性在<table>標(biāo)記中，background屬性用于設(shè)置表格的背景圖像?！救蝿?wù)6-1】知識(shí)點(diǎn)講解2、<table>標(biāo)記的屬性（5）align屬性【任務(wù)6-3、<tr>標(biāo)記的屬性制作網(wǎng)頁時(shí)，有時(shí)需要表格中的某一行特殊顯示，這時(shí)就可以為行標(biāo)記<tr>定義屬性，其常用屬性如下表所示。屬性名含義常用屬性值height設(shè)置行高度

像素值

align設(shè)置一行內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址【任務(wù)6-1】知識(shí)點(diǎn)講解3、<tr>標(biāo)記的屬性制作網(wǎng)頁時(shí)，有時(shí)需要表格中的某一行特殊3、<tr>標(biāo)記的屬性作為初學(xué)者，學(xué)習(xí)<tr>的屬性時(shí)需要注意以下幾點(diǎn)：<tr>標(biāo)記無寬度屬性width，其寬度取決于表格標(biāo)記<table>。可以對<tr>標(biāo)記應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對齊方式。雖然可以對<tr>標(biāo)記應(yīng)用background屬性，但是在<tr>標(biāo)記中此屬性兼容問題嚴(yán)重。【任務(wù)6-1】知識(shí)點(diǎn)講解3、<tr>標(biāo)記的屬性作為初學(xué)者，學(xué)習(xí)<tr>的屬性時(shí)需要注4、<td>標(biāo)記的屬性在網(wǎng)頁制作過程中，通過為單元格標(biāo)記<td>定義屬性，可以單獨(dú)對某一個(gè)單元格進(jìn)行控制，其常用屬性如下表所示。屬性名含義常用屬性值width設(shè)置單元格的寬度像素值

height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置單元格的背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)【任務(wù)6-1】知識(shí)點(diǎn)講解4、<td>標(biāo)記的屬性在網(wǎng)頁制作過程中，通過為單元格標(biāo)記<t4、<td>標(biāo)記的屬性注意:1、在<td>標(biāo)記的屬性中，重點(diǎn)掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用width屬性設(shè)置寬度時(shí)，該列中的所有單元格均會(huì)以設(shè)置的寬度顯示。當(dāng)對某一個(gè)<td>標(biāo)記應(yīng)用height屬性設(shè)置高度時(shí)，該行中的所有單元格均會(huì)以設(shè)置的高度顯示?！救蝿?wù)6-1】知識(shí)點(diǎn)講解4、<td>標(biāo)記的屬性注意:【任務(wù)6-1】知識(shí)點(diǎn)講解5、<th>標(biāo)記及其屬性th是TableHeading的簡寫，意為表格標(biāo)題（也稱表格表頭）。<th>標(biāo)記與<td>標(biāo)記的區(qū)別在于：表頭一般位于表格的第一行或第一列，且<th>標(biāo)記控制的文本顯示為粗體?！救蝿?wù)6-1】知識(shí)點(diǎn)講解5、<th>標(biāo)記及其屬性th是TableHeading的簡知識(shí)引入需求分析雖然表格布局逐漸被DIV+CSS布局所替代，但是作為傳統(tǒng)的HTML元素，表格在網(wǎng)頁制作中的作用是不可取代的，它不僅是實(shí)現(xiàn)數(shù)據(jù)顯示的最好方式，而且還可以輕松地對網(wǎng)頁元素進(jìn)行排版。下面將對CSS控制表格的樣式進(jìn)行講解。【任務(wù)6-2】CSS控制表格樣式知識(shí)引入需求分析雖然表格布局逐漸被DIV+CSS布局所替代，12CSS控制單元格邊框3CSS控制單元格的寬高知識(shí)引入CSS控制表格邊框【任務(wù)6-1】知識(shí)儲(chǔ)備12CSS控制單元格邊框3CSS控制單元格的寬高知識(shí)引入CS1、CSS控制表格邊框表格的邊框及寬高等可以由<table>標(biāo)記的屬性設(shè)置，直接寫在HTML結(jié)構(gòu)中，同樣這些特性可以由CSS控制，寫在樣式表中，更方便技術(shù)人員操作和修改。在設(shè)置表格的邊框時(shí)，還要給單元格單獨(dú)設(shè)置相應(yīng)的邊框?！救蝿?wù)6-2】知識(shí)點(diǎn)講解1、CSS控制表格邊框表格的邊框及寬高等可以由<table>2、CSS控制單元格邊距設(shè)置單元格內(nèi)容與邊框之間的距離，可以對<td>標(biāo)記應(yīng)用內(nèi)邊距樣式屬性padding，或?qū)?lt;table>標(biāo)記應(yīng)用HTML標(biāo)記屬性cellpadding。而<td>標(biāo)記無外邊距屬性margin，要想設(shè)置相鄰單元格邊框之間的距離，只能對<table>標(biāo)記應(yīng)用HTML標(biāo)記屬性cellspacing?！救蝿?wù)6-2】知識(shí)點(diǎn)講解2、CSS控制單元格邊距設(shè)置單元格內(nèi)容與邊框之間的距離，可以3、CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時(shí)，最終的寬度或高度將取其中的較大者。【任務(wù)6-2】知識(shí)點(diǎn)講解3、CSS控制單元格的寬高單元格的寬度和高度，有著和其他元素知識(shí)引入需求分析表單可以用來收集用戶在客戶端提交的各種信息，例如用戶在網(wǎng)站上提交的的登錄和注冊信息，就是通過表單作為載體傳遞給服務(wù)器的，也就是說表單是用戶和瀏覽器交互的重要媒介?！救蝿?wù)6-3】認(rèn)識(shí)表單知識(shí)引入需求分析表單可以用來收集用戶在客戶端提交的各種信息，12創(chuàng)建表單知識(shí)引入初識(shí)表單【任務(wù)6-3】知識(shí)儲(chǔ)備12創(chuàng)建表單知識(shí)引入初識(shí)表單【任務(wù)6-3】知識(shí)儲(chǔ)備1、初識(shí)表單在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成，如下圖所示，即為一個(gè)簡單的HTML表單界面及其構(gòu)成。【任務(wù)6-3】知識(shí)點(diǎn)講解1、初識(shí)表單【任務(wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單在HTML中，<form></form>標(biāo)記被用于定義表單域，即表單開始和結(jié)束的位置，所有的表單元素都要在這對標(biāo)記之間才有效。創(chuàng)建表單的基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【任務(wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單<formaction="url地址"met2、創(chuàng)建表單<form>標(biāo)記的常用屬性如下表所示：屬性名含義action用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。methodmethod屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中g(shù)et為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制。name用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。注意:<form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件?！救蝿?wù)6-3】知識(shí)點(diǎn)講解2、創(chuàng)建表單屬性名含義action用于指定接收并處理表單數(shù)據(jù)知識(shí)引入需求分析表單控件為表單的核心內(nèi)容，不同的表單控件具有不同的功能，如密碼輸入框、文本域、下拉列表、復(fù)選框等，只有掌握了這些控件的使用方法才能正確的創(chuàng)建表單。【任務(wù)6-4】表單控件知識(shí)引入需求分析表單控件為表單的核心內(nèi)容，不同的表單控件具有12textarea控件知識(shí)引入input控件3select控件【任務(wù)6-4】知識(shí)儲(chǔ)備12textarea控件知識(shí)引入input控件3select1、input控件input控件的基本語法格式如下：在上面的語法中，<input/>標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input/>標(biāo)記還可以定義很多其他的屬性，其常用屬性如下表所示。<inputtype=“控件類型”>【任務(wù)6-4】知識(shí)點(diǎn)講解1、input控件input控件的基本語法格式如下：<inp1、input控件屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)【任務(wù)6-4】知識(shí)點(diǎn)講解1、input控件屬性屬性值描述typetext單行文本輸入1、input控件值得一提的是，常常需要將<input/>控件聯(lián)合<label>標(biāo)記使用，以擴(kuò)大控件的選擇范圍，從而提供更好的用戶體驗(yàn)，例如在選擇性別時(shí)，希望單擊提示文字“男”或者“女”也可以選中相應(yīng)的單選按鈕。【任務(wù)6-4】知識(shí)點(diǎn)講解1、input控件值得一提的是，常常需要將<input/>2、textarea控件如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：在上面的語法格式中，cols和rows為<textarea>標(biāo)記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>【任務(wù)6-4】知識(shí)點(diǎn)講解2、textarea控件如果需要輸入大量的信息，就需要用到<2、textarea控件注意:各瀏覽器對cols和rows屬性的理解不同，當(dāng)對textarea控件應(yīng)用cols和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。【任務(wù)6-4】知識(shí)點(diǎn)講解2、textarea控件注意:【任務(wù)6-4】知識(shí)點(diǎn)講解3、select控件下圖為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉符號(hào)“

”時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件?！救蝿?wù)6-4】知識(shí)點(diǎn)講解3、select控件下圖為一個(gè)下拉菜單，當(dāng)點(diǎn)擊下拉符號(hào)“”3、select