《Web前端開發(fā)基礎(chǔ)》課件-7 表格

任務(wù)四用表格實現(xiàn)招聘頁面的制作表格及其屬性《Web前端基礎(chǔ)》課程任務(wù)效果展示1第一部分Knowledge表格相關(guān)標(biāo)簽一、定義表格的基本語法表格中一般通過三個標(biāo)記來構(gòu)建，分別是表格標(biāo)記<table>、行標(biāo)記<tr>和單元格標(biāo)記<td>表格標(biāo)記是<table>和</table>，<table>標(biāo)記的屬性表格標(biāo)記及屬性1屬性名描述常用屬性值border設(shè)置表格的邊框（默認為0，無邊框）像素值cellspacing設(shè)置單元格與單元格邊框之間的空間間距像素值（默認為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空間間距像素值（默認為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置網(wǎng)頁中的水平對齊方式Left、center、rightbgcolor表格的背景顏色預(yù)定義的顏色值、十六進制#RGBrgb(r,g,b)background表格的背景圖像url地址二、表格行的設(shè)定表格是按行組織的，一個表格有幾行組成就要有幾個行標(biāo)簽<tr>，行標(biāo)簽用它的屬性值來修飾，屬性都是可選的，<tr>標(biāo)簽的屬性如表表格標(biāo)簽及屬性1屬性名描述常用屬性值height設(shè)置行高度像素值align設(shè)置一行內(nèi)容水平對齊方式Left、center、rightvalign設(shè)置一行內(nèi)容垂直對齊方式Top、middle、bottombgcolor設(shè)置行的背景顏色預(yù)定義的顏色值、十六進制#RGBrgb(r,g,b)background設(shè)置行的背景圖像url地址表格標(biāo)記及屬性1三、單元格的設(shè)定<th>和<td>都是插入單元格標(biāo)簽，這兩個標(biāo)簽必須嵌套在<tr>標(biāo)簽內(nèi)，都是成對出現(xiàn)<th>用于表頭標(biāo)簽，表頭標(biāo)簽一般位于首行或首列，標(biāo)簽之間的內(nèi)容就是位于該單元格內(nèi)的標(biāo)簽內(nèi)容，其中的文字以粗體居中顯示。<td>就是該單元格中的具體數(shù)據(jù)內(nèi)容，<th>和<td>標(biāo)簽的屬性都是一樣的，屬性設(shè)定如表

屬性描述width/height單元格的寬和高，接受絕對值（如80）及相對值（80%）colspan單元格向右打通的欄數(shù)rowspan單元格向下打通的列數(shù)align單元格內(nèi)容的水平對齊方式，可選值為：left、center、rightvalign單元格內(nèi)容的垂直對齊方式，可選值為：top、middle、bottombgcolor單元格的背景顏色bordercolor單元格邊框顏色bordercolorlight單元格邊框向光部分的顏色bordercolordark單元格邊框背光部分的顏色background單元格的背景圖片表格標(biāo)記及屬性1四、單元格的跨行與跨列設(shè)定1.水平跨度-colspan語法：<tdcolspan=跨的列數(shù)>單元格水平跨度是指在復(fù)雜的表格結(jié)構(gòu)中，有些單元格是跨多個列的?？绲牧袛?shù)就是這個單元格所跨列的個數(shù)，也可以說是單元格向右打通的單元格個數(shù)。

表格標(biāo)簽及屬性1例：跨多列的表格<tableborder="2"><tr><tdcolspan="3">學(xué)生成績表</td></tr><tr><td>英語</td><td>數(shù)學(xué)</td><td>語文</td></tr><tr><td>95</td><td>98</td><td>89</td></tr></table>COLSPAN=“n”屬性表示跨多少列？表格標(biāo)記及屬性12.垂直跨度-rowspan語法：<tdrowspan=單元格跨行數(shù)>單元格除了可以在水平方向上跨列，還可在垂直方向上跨行?？缧性O(shè)置需要使用rowspan參數(shù)。與水平跨度相對應(yīng)，rowspan設(shè)置的是單元格在垂直方向上跨行的個數(shù)，也可以說是單元格向下打通的單元格個數(shù)。

表格標(biāo)簽及屬性1例：跨多行的表格<tableborder="1"><tr><tdrowspan=“3”>早上菜譜</td><td>食物</td><td>雞蛋</td></tr><tr><td>飲料</td><td>牛奶</td></tr><tr><td>甜點</td><td>開心粉</td></tr></table>rowspan=“n”屬性表示跨多少行？表格標(biāo)簽及屬性1例：跨行跨列的表格表格標(biāo)簽及屬性1第二部分Knowledge表格樣式屬性1.設(shè)置表格及單元格邊框：同border屬性2.設(shè)置表格及單元格寬度與高度:width:寬度height:高度

3.表格邊框?qū)傩裕罕砀駱邮綄傩?（1）border-collapse語法：border-collapse:separate|collapse設(shè)置是否把表格邊框合并為單一的邊框取值：

separate:默認值。邊框獨立（標(biāo)準(zhǔn)HTML）collapse:相鄰邊被合并例：table{border-collapse:collapse;}Table,td{border:1pxsolidblack;}4.設(shè)置表格及單元格文本對齊方式text-align:水平對齊方式（left/center/right）vertical-align：垂直對齊方式（top/middle/bottom）表格樣式屬性1（2）border-spacing

語法：border-spacing

:

length

設(shè)置分隔單元格邊框的距離取值：length

如：3px

由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負值。例：table{border-collapse:separate;border-spacing:10px;}任務(wù)表單頁的制作表單元素與屬性《Web前端基礎(chǔ)》課程任務(wù)效果展示本次課任務(wù)：步驟二：表單對象驗證及美化教學(xué)目標(biāo)1.知識目標(biāo)2.能力目標(biāo)掌握HTML5中新增的表單及表單驗證相關(guān)屬性及屬性值及應(yīng)用技巧熟練應(yīng)用各類樣式進行表單及表單對象的美化能綜合利用各類樣式進行表單及表單對象的美化能綜合利用HTML5新增表單驗證相關(guān)屬性進行頁面交互制作第一部分Knowledge新增表單元素1.Input類型-emailemail類型用于應(yīng)該包含e-mail地址的輸入域。在提交表單時，會自動驗證email域的值，必須符合email格式才能通過驗證并提交。例：<inputtype="email“name="useremail"/>新增表單元素一2.Input類型-url

url輸入類型用于應(yīng)該包含URL地址的輸入字段。會在提交表單時對url字段的值自動進行驗證。例：<inputtype="url"name="user_url"/>新增表單元素一3.Input類型-number

number輸入類型用于包含數(shù)字值的輸入字段。您可以設(shè)置可接受數(shù)字的限制。下面的屬性來為number類型規(guī)定限制：例：<inputtype="number"name=“month"min="1"max="12"step="1"/>新增表單元素一4.Input類型-rangerange類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型顯示為滑動條。您還能夠設(shè)定對所接受的數(shù)字的限定：例：<inputtype="range"name="points"min="1"max="10"/>新增表單元素一5.Input類型-dateHTML5擁有多個可供選取日期和時間的新輸入類型：date-選取日、月、年month-選取月、年week-選取周和年time-選取時間（小時和分鐘）datetime-選取時間、日、月、年（UTC時間）datetime-local-選取時間、日、月、年（本地時間）。例：<inputtype=“date"name=“birthday”/><inputtype=“month"name=“month”/><inputtype=“time"name=“time”/>新增表單元素一6.Input類型–colorcolor輸入類型用于規(guī)定顏色。該輸入類型允許您從拾色器中選取顏色：例：<inputtype="color"name="user_color"/>新增表單元素一7.Input類型–teltel類型用來輸入電話號碼，通常與pattern屬性進行配合使用。例：<inputtype="tel"name="tel"pattern="^\d{11}"/>新增表單元素一8.Input類型–search

search類型用于搜索域，比如站點搜索或Google搜索。search域顯示為常規(guī)的文本域。例：<inputtype="search"name="search"/>新增表單元素一第二部分Knowledge新增表單元素屬性1.required屬性：required屬性可以用用在大多數(shù)的輸入元素上（除了隱藏元素、圖片元素按鈕上等）。required屬性表示此輸入框是必填項，當(dāng)提交的時候，如果此輸入框為空，那么將提示用戶輸入后提交。例：

<inputname=“username”required=“required”type="text"/>表單元素屬性二表單元素屬性二2.Placeholder屬性

Placeholder屬性提供可描述輸入字段預(yù)期值的提示信息。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。例：

<inputname=“username”Placeholder=“請輸入你的姓名”type="text"/>3.pattern屬性：

pattern屬性的值一般為正則表達式，當(dāng)用戶輸入的內(nèi)容符合一定的格式，那么才能提交，否則將提示用戶不符合要求，如上所示必須輸入3位數(shù)字。正則表達式使用單個字符串來描述、匹配一系列符合某個句法規(guī)則的字符串。在很多文本編輯器里，正則表達式通常被用來檢索、替換那些符合某個模式的文本。

一般我們在驗證”聯(lián)系電話”時，給出：pattern=”^\d{11,13}$”，表示11到13位的數(shù)字

例：<inputname=“phone"pattern="^\d{13}$"type=“tel"/>表單元素屬性二4.autocomplete屬性：

autocomplete屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。自動完成允許瀏覽器預(yù)測對字段的輸入。當(dāng)用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應(yīng)該顯示出在字段中填寫的選項。autocomplete屬性適用于<form>，以及下面的<input>類型：text,search,url,telephone,email,password,datepickers,range以及color。屬性值：on默認值。規(guī)定啟用自動完成功能。off規(guī)定禁用自動完成功能。

例：<inputname=“useremail"type=“email”autocomplete=“on”/>表單元素屬性二5.novalidate屬性：

novalidate屬性規(guī)定當(dāng)提交表單時不對其進行驗證。如果表單使用該屬性，則表單不會驗證表單的輸入。注釋：novalidate屬性適用于：<form>，以及以下類型的<input>標(biāo)簽：text,search,url,tel,email,password,datepickers,range以及color。

例：<formaction="demo_form.asp"novalidate="novalidate"/>表單元素屬性二6.autofocus屬性：

autofocus屬性規(guī)定當(dāng)頁面加載時input元素應(yīng)該自動獲得焦點。如果使用該屬性，則input元素會獲得焦點。

例：<inputtype="email"name="u