《網(wǎng)頁設(shè)計制作》課件-項目6

《網(wǎng)頁設(shè)計制作》項目66.1表格標(biāo)簽6.2CSS美化表格6.3表單標(biāo)簽6.4CSS美化表單目

錄6.1表格標(biāo)簽什么是表格？6.1表格標(biāo)簽如何創(chuàng)建表格？說到表格，其實大家并不陌生課程表網(wǎng)上購物查票6.1表格標(biāo)簽

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

<td></td>定義一個表格定義表格中的一行，嵌套在<table></table>中定義表格中的單元格，嵌套在<tr></tr>中創(chuàng)建table表格，離不開以下3對標(biāo)簽:6.1表格標(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地址6.1表格標(biāo)簽<table>標(biāo)簽屬性在實體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding<table>標(biāo)簽的屬性6.1表格標(biāo)簽<table>標(biāo)簽屬性在實體表格中的表現(xiàn)如下圖所示：<table>標(biāo)簽的屬性align="center"bgcolor="CCCCCC"6.1表格標(biāo)簽<table>標(biāo)簽屬性在實體表格中的表現(xiàn)如下圖所示：<table>標(biāo)簽的屬性background6.1表格標(biāo)簽<tr>標(biāo)簽的屬性屬性描述常用屬性值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地址6.1表格標(biāo)簽學(xué)習(xí)<tr>的屬性時需要注意以下幾點：<tr>標(biāo)簽無寬度屬性width，其寬度取決于表格標(biāo)簽<table>。雖然可以對<tr>標(biāo)簽應(yīng)用background屬性，但是在<tr>標(biāo)簽中此屬性兼容問題嚴(yán)重。對<tr>標(biāo)簽應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對齊方式。ABC<tr>標(biāo)簽的屬性6.1表格標(biāo)簽<td>標(biāo)簽的屬性屬性名含義常用屬性值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ù)6.1表格標(biāo)簽學(xué)習(xí)<td>的屬性時需要注意以下幾點：在<td>標(biāo)簽的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。當(dāng)對某一個<td>標(biāo)簽應(yīng)用height屬性設(shè)置高度時，該行中的所有單元格均會以設(shè)置的高度顯示。當(dāng)對某一個<td>標(biāo)簽應(yīng)用width屬性設(shè)置寬度時，該列中的所有單元格均會以設(shè)置的寬度顯示。ABC<td>標(biāo)簽的屬性6.1表格標(biāo)簽<th>標(biāo)簽的屬性知識概述<th></th>標(biāo)簽用來設(shè)置表頭，其文本默認(rèn)加粗居中顯示。表頭表頭6.1表格標(biāo)簽6.2CSS美化表格6.3表單標(biāo)簽6.4CSS美化表單目

錄6.2CSS控制表格樣式CSS控制表格邊框除了表格標(biāo)簽自帶的屬性外，還可用CSS的邊框、寬高、顏色等來控制表格樣式。日歷的邊框border日歷的單元格邊距paddingheightwidthCSS控制表格邊框CSS代碼如下所示：table{ width:280px; height:280px; border:1pxsolid#F00;/*設(shè)置table的邊框*/}td,th{border:1pxsolid#F00;}/*為單元格單獨設(shè)置邊框*/6.2CSS控制表格樣式CSS控制表格邊框?qū)W習(xí)CSS控制表格邊框時需要注意以下幾點：border-collapse屬性的屬性值除了collapse（合并）之外，還可以為separate（分離），默認(rèn)為separate。行標(biāo)簽<tr>無border樣式屬性，本書不再做具體的演示，初學(xué)者可以自己測試加深理解。當(dāng)表格的border-collapse屬性設(shè)置為collapse時，HTML中設(shè)置的cellspacing屬性值無效。ABC6.2CSS控制表格樣式CSS控制單元格邊距知識概述設(shè)置單元格內(nèi)容與邊框之間的距離，可以對<td>標(biāo)簽應(yīng)用內(nèi)邊距樣式屬性padding，或?qū)?lt;table>標(biāo)簽應(yīng)用HTML標(biāo)簽屬性cellpadding。th,td{ border:1pxsolid#30F;/*為單元格單獨設(shè)置邊框*/padding:20px;/*為單元格內(nèi)容與邊框設(shè)置20px的內(nèi)邊距*/margin:20px;/*為單元格與單元格邊框之間設(shè)置20px的外邊距*/}6.2CSS控制表格樣式學(xué)習(xí)CSS控制單元格邊距時需要注意以下幾點：行標(biāo)簽<tr>無內(nèi)邊距屬性padding和外邊距屬性margin。外邊距屬性margin對單元格無效，要想設(shè)置相鄰單元格邊框之間的距離，只能對<table>標(biāo)簽應(yīng)用HTML標(biāo)簽屬性cellspacing。ABCSS控制單元格邊距6.2CSS控制表格樣式CSS控制單元格寬高知識概述對單元格標(biāo)簽<td>應(yīng)用width和height屬性，可以控制單元格寬度和高度。td{ width:20px; Height:20px;}對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時，最終的寬度或高度將取其中的較大者。6.2CSS控制表格樣式6.1表格標(biāo)簽6.2CSS美化表格6.3表單標(biāo)簽6.4CSS美化表單目

錄6.3認(rèn)識表單什么是表單？6.3認(rèn)識表單“表單”是網(wǎng)頁上用于輸入信息的區(qū)域，用來實現(xiàn)網(wǎng)頁與用戶的交互、溝通。例如注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單相關(guān)的標(biāo)簽定義的。6.3認(rèn)識表單以電商注冊頁面為例，分析表單的構(gòu)成。提示信息表單域表單控件表單的構(gòu)成6.3認(rèn)識表單一個表單中通常需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。提示信息表單控件表單域表單的構(gòu)成6.3認(rèn)識表單創(chuàng)建表單知識概述<form></form>標(biāo)簽用來創(chuàng)建表單。<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form>【結(jié)論】<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標(biāo)簽<form>的常用屬性。6.3認(rèn)識表單表單屬性action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。action屬性method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。method屬性name屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。name屬性autocomplete屬性用于指定表單是否有自動完成功能autocomplete屬性novalidate屬性指定在提交表單時取消對表單進(jìn)行有效的檢查。novalidate屬性

表單控件什么是表單控件？6.3認(rèn)識表單你了解這些表單控件？表單控件常用在登錄和注冊模塊6.3認(rèn)識表單大致可分為input控件、textarea控件、select控件三大類。select控件textarea控件

表單控件input控件知識概述<input/>元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復(fù)選框等都是通過它定義的。<inputtype="控件類型"/><input/>標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。input控件屬性屬性值描述type

text單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emaile-mail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Datepickers(date,month,week,time,datetime,datetime-local)日期和時間的輸入類型search搜索域color顏色輸入類型tel電話號碼輸入類型

表單控件input控件name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)autocompleteon/off設(shè)定是否自動完成表單字段內(nèi)容autofocusautofocus指定頁面加載后是否自動獲取焦點form

form元素的id設(shè)定字段隸屬于哪一個或多個表單listdatalist元素的id指定字段的候選數(shù)據(jù)值列表multiplemultiple指定輸入框是否可以選擇多個值min、max和step數(shù)值規(guī)定輸入框所允許的最大值、最小值及間隔pattern字符串驗證輸入的內(nèi)容是否與定義的正則表達(dá)式匹配placeholder字符串為input類型的輸入框提供一種提示requiredrequired規(guī)定輸入框填寫的內(nèi)容不能為空

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。

表單控件單行文本輸入框<inputtype="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。<inputtype="text"value="張三"maxlength="6"/>在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。密碼輸入框<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。<inputtype="password"size="40"/><input/>標(biāo)簽的type屬性

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。單選按鈕<inputtype="radio"/>單選按鈕用于單項選擇，如選擇性別、是否操作等。<inputtype="radio"name="sex"checked="checked"/>男

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。復(fù)選框<inputtype="checkbox"/>復(fù)選框常用于多項選擇，如選擇興趣、愛好等，可對其應(yīng)用checked屬性，指定默認(rèn)選中項。<inputtype="checkbox"/>唱歌

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。普通按鈕<inputtype="button"/>普通按鈕常常配合javascript腳本語言使用，讀者了解即可。<inputtype="button"value="普通按鈕"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。提交按鈕<inputtype="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交。<inputtype="submit"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。重置按鈕<inputtype="reset"/>當(dāng)用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。可以對其應(yīng)用value屬性，改變重置按鈕上的默認(rèn)文本。<inputtype="reset"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。圖像形式的提交按鈕<inputtype="image"/>圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。<inputtype="image"src="images/login.gif"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。隱藏域<inputtype="hidden"/>隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺的程序，讀者了解即可。<inputtype="hidden"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。文件域<inputtype="file"/>當(dāng)定義文件域時，頁面中將出現(xiàn)一個文本框和一個“瀏覽...”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺服務(wù)器。<inputtype="file"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。email類型<inputtype="email"/>email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯誤信息。請輸入您的郵箱：<inputtype="email"name="formmail"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。url類型<inputtype="url"/>url類型的input元素是一種用于輸入URL地址的文本框。請輸入個人網(wǎng)址：<inputtype="url"name="user_url"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。tel類型<inputtype="tel"/>tel類型用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實現(xiàn)一個通用的格式。因此，tel類型通常會和pattern屬性配合使用。請輸入電話號碼：<inputtype="tel"name="telphone"pattern="^\d{11}$"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。search類型<inputtype="search"/>search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動記錄一些字符。在用戶輸入內(nèi)容后，其右側(cè)會附帶一個刪除圖標(biāo)，單擊這個圖標(biāo)按鈕可以快速清除內(nèi)容。輸入搜索關(guān)鍵詞：<inputtype="search"name="searchinfo"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。color類型<inputtype="color"/>color類型用于提供設(shè)置顏色的文本框，用于實現(xiàn)一個RGB顏色輸入。其基本形式是#RRGGBB，默認(rèn)值為#000000，通過value屬性值可以更改默認(rèn)顏色。請選取一種顏色：<inputtype="color"name="color1"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。number類型<inputtype="number"/>number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會出現(xiàn)錯誤提示。請輸入數(shù)值：<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。range類型<inputtype="range"/>range類型的input元素用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動條。它的常用屬性與number類型一樣。請輸入數(shù)值：<inputtype=“range"name="number1"value="1"min="1"max="20"step="4"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。Datepickers類型<inputtype=date,month,week…"/>Datepickers類型是指時間日期類型，HTML5中提供了多個可供選取日期和時間的輸入類型，用于驗證輸入的日期<inputtype="date"/>

表單控件<input/>標(biāo)簽的type屬性在HTML5中，<input>標(biāo)簽擁有多個type屬性值，用于定義不同的控件類型。Datepickers類型—時間和日期類型時間和日期類型說明date選取日、月、年month選取月、年week選取周和年time選取時間（小時和分鐘）datetime選取時間、日、月、年（UTC時間）datetime-local選取時間、日、月、年（本地時間）

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標(biāo)簽的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。autofocus屬性1

表單控件除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。HTML5中的form屬性，可以把表單內(nèi)的子元素寫在頁面中的任一位置，只需為這個元素指定form屬性并設(shè)置屬性值為該表單的id即可。form屬性2<input/>標(biāo)簽的的其他屬性

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。list屬性用于指定輸入框所綁定的datalist元素，其值是某個datalist元素的id。list屬性3

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。multiple屬性指定輸入框可以選擇多個值，該屬性適用于email和file類型的input元素。multiple屬性4

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。HTML5中的min、max和step屬性用于為包含數(shù)字或日期的input輸入類型規(guī)定限值，也就是給這些類型的輸入框加一個數(shù)值的約束，適用于date、pickers、number和range標(biāo)簽。min、max和step屬性5max規(guī)定輸入框所允許的最大輸入值。min規(guī)定輸入框所允許的最小輸入值。step為輸入框規(guī)定合法的數(shù)字間隔，如果不設(shè)置，默認(rèn)值是1。

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。pattern屬性用于驗證input類型輸入框中，用戶輸入的內(nèi)容是否與所定義的正則表達(dá)式相匹配。pattern屬性適用于的類型是：text、search、url、tel、email和password的<input/>標(biāo)簽。pattern屬性6

表單控件<input/>標(biāo)簽的的其他屬性正則表達(dá)式說明^[0-9]*$數(shù)字^\d{n}$n位的數(shù)字^\d{n,}$至少n位的數(shù)字^\d{m,n}$m-n位的數(shù)字^(0|[1-9][0-9]*)$零和非零開頭的數(shù)字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零開頭的最多帶兩位小數(shù)的數(shù)字^(\-|\+)?\d+(\.\d+)?$正數(shù)、負(fù)數(shù)、和小數(shù)^\d+$或^[1-9]\d*|0$非負(fù)整數(shù)^-[1-9]\d*|0$或^((-\d+)|(0+))$非正整數(shù)^[\u4e00-\u9fa5]{0,}$漢字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文和數(shù)字^[A-Za-z]+$由26個英文字母組成的字符串^[A-Za-z0-9]+$由數(shù)字和26個英文字母組成的字符串常用的正則表達(dá)式和說明

表單控件<input/>標(biāo)簽的的其他屬性正則表達(dá)式說明^\w+$或^\w{3,20}$由數(shù)字、26個英文字母或者下劃線組成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數(shù)字包括下劃線^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$URL地址^\d{15}|\d{18}$身份證號(15位、18位數(shù)字)^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以數(shù)字、字母x結(jié)尾的短身份證號碼^[a-zA-Z][a-zA-Z0-9_]{4,15}$帳號是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)^[a-zA-Z]\w{5,17}$密碼(以字母開頭，長度在6~18之間，只能包含字母、數(shù)字和下劃線)常用的正則表達(dá)式和說明

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息，以描述輸入框期待用戶輸入何種內(nèi)容。placeholder屬性7

表單控件<input/>標(biāo)簽的的其他屬性除了type屬性之外，<input/>標(biāo)簽還可以定義很多其他的屬性，以實現(xiàn)