《HTML5+CSS3網(wǎng)站設計基礎教程（第3版）》 課件 第7、8章 表格和表單、多媒體嵌入

第7章表格和表單《HTML5+CSS3網(wǎng)站設計基礎教程（第3版）》學習目標/Target掌握CSS控制表格樣式的方法，能夠使用CSS設置表格樣式。了解表單的構成，能夠說出表單的構成部分。熟悉表格相關標簽的屬性，能夠運用這些屬性設置不同形態(tài)的表格。掌握創(chuàng)建表格的方法，能夠在網(wǎng)頁中創(chuàng)建表格。學習目標/Target掌握HTML5表單新增屬性，包括input控件類型、form標簽、input屬性、form屬性。掌握CSS控制表單樣式的方法，能夠使用CSS美化表單樣式。掌握各類表單控件，能夠創(chuàng)建不同功能的表單控件。掌握創(chuàng)建表單的方法，能夠在網(wǎng)頁中創(chuàng)建表單。章節(jié)概述/Summary表格與表單是HTML網(wǎng)頁中的重要標簽，利用表格可以對網(wǎng)頁進行排版，使網(wǎng)頁信息有條理地顯示出來，而使用表單則使網(wǎng)頁從單向的信息傳遞發(fā)展到能夠與用戶進行交互對話，實現(xiàn)了網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。本章將對表格與表單的相關知識進行詳細地講解。目錄/Contents7.3表單7.2CSS控制表格樣式7.1表格目錄/Contents7.3階段案例——信息登記表7.2CSS控制表單樣式7.1HTML5表單新屬性表格7.17.1表格日常生活中，為了清晰地顯示數(shù)據(jù)或信息，常常使用表格對數(shù)據(jù)或信息進行整理，同樣在制作網(wǎng)頁時，為了使網(wǎng)頁中的元素有條理地顯示，也可以使用表格對網(wǎng)頁內(nèi)容進行規(guī)劃。為此，HTML語言提供了一系列的表格標簽，本節(jié)將對這些標簽進行詳細地講解。掌握創(chuàng)建表格的方法，能夠在網(wǎng)頁中創(chuàng)建表格。學習目標7.1.1創(chuàng)建表格7.1表格7.1.1創(chuàng)建表格表格是怎樣形成的？說到表格，其實大家并不陌生課程表排行榜查票7.1表格7.1.1創(chuàng)建表格使用標簽創(chuàng)建表格的語法格式<table><tr> <td>單元格內(nèi)的文字</td> ...</tr>...</table>用于定義一個表格的開始與結束用于定義表格中的單元格，必須嵌套在<tr>標簽中用于定義表格中的一行，必須嵌套在<table>標簽中7.1表格7.1.1創(chuàng)建表格案例演示7.1表格注意：<tr>標簽中只能嵌套<td>標簽，不可以在<tr>標簽中輸入文字。7.1.1創(chuàng)建表格7.1表格熟悉<table>標簽的屬性，能夠運用這些屬性設置不同樣式的表格。學習目標7.1.2<table>標簽的屬性7.1表格7.1.2<table>標簽的屬性<table>標簽包含了大量屬性，雖然大部分屬性都可以使用CSS替代，但是HTML語言中也為<table>標簽提供了一系列的屬性，用于控制表格的顯示樣式。7.1表格屬性描述常用屬性值border設置表格的邊框（默認border="0"為無邊框）像素值cellspacing設置單元格與單元格之間的空間像素值（默認為2像素）cellpadding設置單元格內(nèi)容與單元格邊緣之間的空間像素值（默認為1像素）width設置表格的寬度像素值<table>標簽的屬性-17.1.2<table>標簽的屬性7.1表格屬性描述常用屬性值height設置表格的高度像素值align設置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設置表格的背景顏色顏色的英文單詞、十六進制顏色值#RGB、RGB顏色值rgb(r,g,b)background設置表格的背景圖像背景圖像的URL地址<table>標簽的屬性-27.1.2<table>標簽的屬性7.1表格border屬性在<table>標簽中，border屬性用于設置表格的邊框，默認值為0。例如：7.1.2<table>標簽的屬性7.1表格注意：直接使用<table>標簽的邊框屬性或其他取值為像素值的屬性時，可以省略單位“px”。7.1.2<table>標簽的屬性7.1表格cellspacing屬性cellspacing屬性用于設置單元格與單元格之間的空間，默認距離為2px。例如：7.1.2<table>標簽的屬性7.1表格cellpadding屬性cellpadding屬性用于設置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1px。例如：7.1.2<table>標簽的屬性7.1表格width屬性和height屬性表格的寬度和高度是自適應的，依靠表格內(nèi)的內(nèi)容來支撐，要想更改表格的尺寸，就需要對其應用寬度屬性width和高度屬性height。例如：7.1.2<table>標簽的屬性7.1表格align屬性align屬性可用于定義表格的水平對齊方式，其可選屬性值為left、center、right。例如：7.1.2<table>標簽的屬性7.1表格bgcolor屬性在<table>標簽中，bgcolor屬性用于設置表格的背景顏色。例如：7.1.2<table>標簽的屬性7.1表格background屬性在<table>標簽中，background屬性用于設置表格的背景圖像。例如：熟悉<tr>標簽的屬性，能夠將表格中的某一行特殊顯示。學習目標7.1.3<tr>標簽的屬性7.1表格7.1表格制作網(wǎng)頁時，有時需要表格中的某一行特殊顯示，這時就可以為<tr>標簽添加屬性7.1.3<tr>標簽的屬性屬性描述常用屬性值height設置行高度像素align設置一行內(nèi)容的水平對齊方式left、center、rightvalign設置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設置行背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)background設置行背景圖像背景圖像的URL地址7.1表格7.1.3<tr>標簽的屬性案例演示<tr>標簽無寬度屬性width，其寬度取決于表格標簽<table>。在實際工作中均可用相應的CSS樣式屬性來替代<tr>標簽的屬性。7.1表格7.1.3<tr>標簽的屬性熟悉<td>標簽的屬性，能夠針對某一個單元格進行控制。學習目標7.1.4<td>標簽的屬性7.1表格7.1表格在網(wǎng)頁制作過程中，想要對某一個單元格進行控制，就需要為單元格標簽<td>定義屬性。7.1.4<td>標簽的屬性屬性名含義常用屬性值width設置單元格的寬度像素height設置單元格的高度像素align設置單元格內(nèi)容的水平對齊方式left、center、rightvalign設置單元格內(nèi)容的垂直對齊方式top、middle、bottom7.1表格在網(wǎng)頁制作過程中，想要對某一個單元格進行控制，就需要為單元格標簽<td>定義屬性。7.1.4<td>標簽的屬性屬性名含義常用屬性值bgcolor設置單元格的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)background設置單元格的背景圖像url地址colspan設置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設置單元格豎跨的行數(shù)（用于合并垂直方向的單元格）正整數(shù)7.1表格案例演示7.1.4<td>標簽的屬性7.1表格7.1.4<td>標簽的屬性合并單元格的規(guī)則注釋或刪除需要合并的單元格在預留的單元格中添加colspan或rolspan屬性，屬性值為水平合并的列數(shù)或豎直合并的行數(shù)。7.1表格7.1.4<td>標簽的屬性注意：1.在<td>標簽的屬性中，重點掌握colspan屬性和rolspan屬性。其他的屬性了解即可，不建議使用，這些屬性均可用CSS樣式屬性替代。2.當對某一個<td>標簽應用width屬性設置寬度時，該列中的所有單元格均會以設置的寬度顯示。3.當對某一個<td>標簽應用height屬性設置高度時，該行中的所有單元格均會以設置的高度顯示。熟悉<th>標簽的屬性，能夠為表格設置表頭。學習目標7.1.5<th>標簽7.1表格7.1.5<th>標簽7.1表格應用表格時經(jīng)常需要為表格設置表頭，以使表格的結構更加清晰，方便查閱。表頭一般位于表格的第一行或第一列，其文本加粗居中顯示。7.1.5<th>標簽7.1表格<th>標簽與<td>標簽的屬性、用法完全相同，但是它們具有不同的語義。<th>標簽用于定義表頭單元格，其文本默認加粗居中顯示，而<td>標簽定義的為普通單元格，其文本為普通文本且水平左對齊顯示。熟悉表格的結構標簽，能夠運用這些標簽設置網(wǎng)頁基礎結構。學習目標7.1.6表格的結構7.1表格7.1.6表格的結構7.1表格<thead>表格的結構用于定義表格的頭部，必須位于<table>標簽中，一般包含網(wǎng)頁的logo和導航等頭部信息。<tfoot>用于定義表格的頁腳，位于<table>標簽中<thead>標簽之后，一般包含網(wǎng)頁底部的企業(yè)信息等。<tbody>用于定義表格的主體，位于<table>標簽中<tfoot>標簽之后，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。7.1.6表格的結構7.1表格案例演示7.1.6表格的結構7.1表格一個表格只能定義一個<thead>、一個<tfoot>，但可以定義多個<tbody>，它們必須按<thead>、<tfoot>和<tbody>的順序使用。之所以將<tfoot>置于<tbody>之前，是為了使瀏覽器在接收到全部內(nèi)容之前即可顯示頁腳。使用CSS控制表格樣式7.27.2使用CSS控制表格樣式除了表格標簽自帶的屬性外，還可用CSS的邊框、寬度、高度、顏色等來控制表格樣式。此外，CSS中還提供了表格專用屬性，以便控制表格樣式。本節(jié)將從表格邊框、單元格邊距和單元格寬高三個方面，詳細講解CSS控制表格樣式的具體方法。掌握CSS控制表格邊框的方法，能夠設置表格邊框的樣式。學習目標7.2.1使用CSS控制表格邊框7.2使用CSS控制表格樣式7.2.1使用CSS控制表格邊框使用CSS邊框樣式屬性border，可以更改邊框的顏色，或改變單元格的邊框寬度。案例演示7.2使用CSS控制表格樣式7.2.1使用CSS控制表格邊框注意：1.當表格的border-collapse屬性設置為collapse時，HTML中設置的cellspacing屬性值無效。2.<tr>標簽無border樣式屬性。7.2使用CSS控制表格樣式掌握CSS控制單元格邊距的方法，能夠設置單元格的邊距。學習目標7.2.2使用CSS控制單元格邊距7.2使用CSS控制表格樣式提問：使用<table>標簽的屬性美化表格時，可以通過屬性和屬性控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離？7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距答案：使用<table>標簽的屬性美化表格時，可以通過屬性和屬性控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離？cellpaddingcellspacing7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距是否可以使用CSS對單元格設置內(nèi)邊距padding和外邊距margin樣式實現(xiàn)這種效果呢？7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距案例演示7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距答案:<th>標簽和<td>標簽無外邊距屬性margin，要想設置相鄰單元格邊框之間的距離，只能對<table>標簽應用cellspacing屬性。7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距注意：<tr>標簽無內(nèi)邊距屬性padding和外邊距屬性margin。7.2使用CSS控制表格樣式7.2.2使用CSS控制單元格邊距掌握CSS控制單元格寬高的方法，能夠設置單元格的寬度和高度。學習目標7.2使用CSS控制表格樣式7.2.3使用CSS控制單元格的寬度和高度單元格的寬度和高度，有著和其他標簽不同的特性，主要表現(xiàn)在單元格之間的互相影響上。使用CSS中的width屬性和height屬性可以控制單元格的寬高。案例演示7.2使用CSS控制表格樣式7.2.3使用CSS控制單元格的寬度和高度表單7.37.3表單表單是可以通過網(wǎng)絡接收其他用戶數(shù)據(jù)的平臺，例如注冊頁面的賬戶密碼輸入、網(wǎng)上訂貨頁等，都是以表單的形式來收集用戶信息，并將這些信息傳遞給后臺服務器，實現(xiàn)網(wǎng)頁與用戶間的溝通對話，本節(jié)將對表單進行詳細的講解。7.3.1表單的構成7.3表單了解表單的構成，能夠說出表單的構成部分。學習目標7.3.1表單的構成7.3表單登錄快遞查詢注冊想想表單由哪些構成？7.3.1表單的構成7.3表單7.3.1表單的構成7.3表單包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、搜索框等說明性的文字，提示用戶進行填寫和操作相當于一個容器，用于采集用戶的輸入或選擇的數(shù)據(jù)。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。表單控件表單域提示信息7.3.2創(chuàng)建表單7.3表單掌握創(chuàng)建表單的方法，能夠在網(wǎng)頁中創(chuàng)建表單。學習目標7.3表單7.3.2創(chuàng)建表單在HTML5中，<form>標簽用于創(chuàng)建表單，即定義表單域，以實現(xiàn)用戶信息的收集和傳遞，<form>標簽中的所有內(nèi)容都會被提交給服務器。創(chuàng)建表單的語法格式<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form><form>與</form>之間的表單控件是由用戶自定義的action、method和name為表單標簽<form>的常用屬性7.3表單7.3.2創(chuàng)建表單action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址1.action屬性<form>標簽的常用屬性例如：<formaction="form_action.asp"><formaction=mailto:htmlcss@163.com>action的屬性值可以是相對路徑或絕對路徑，還可以為接收數(shù)據(jù)的E-mail郵箱地址。7.3表單7.3.2創(chuàng)建表單<form>標簽的常用屬性例如：<formaction="form_action.asp"method="get">method屬性的取值為get或post，get為method屬性的默認值。method屬性用于設置表單數(shù)據(jù)的提交方式。2.method屬性7.3表單7.3.2創(chuàng)建表單<form>標簽的常用屬性采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，所以使用method="post"可以大量的提交數(shù)據(jù)。2.method屬性7.3表單7.3.2創(chuàng)建表單<form>標簽的常用屬性例如：name屬性用于指定表單的名稱。3.name屬性7.3表單7.3.3表單控件掌握各類表單控件，能夠創(chuàng)建不同功能的表單控件。學習目標7.3表單7.3.3表單控件1.input控件瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復選框、提交按鈕、重置按鈕等，要想定義這些元素就需要使用input控件。input控件的語法格式<inputtype="控件類型"/>7.3表單7.3.3表單控件1.input控件input控件的常用屬性-1屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復選框button普通按鈕7.3表單7.3.3表單控件1.input控件input控件的常用屬性-2屬性屬性值描述typesubmit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域7.3表單7.3.3表單控件屬性屬性值描述name由用戶自定義控件的名稱value由用戶自定義input控件中的默認文本內(nèi)容size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）1.input控件input控件的常用屬性-37.3表單7.3.3表單控件屬性屬性值描述checkedchecked定義選擇控件默認被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)1.input控件input控件的常用屬性-47.3表單7.3.3表單控件1.input控件案例演示7.3表單7.3.3表單控件1.input控件（1）單行文本輸入框<inputtype="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。<inputtype="text"value="張三"maxlength="6"/>7.3表單7.3.3表單控件1.input控件（2）密碼輸入框<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點的形式顯示。<inputtype="password"size="40"/>7.3表單7.3.3表單控件1.input控件（3）單選按鈕<inputtype="radio"/>單選按鈕用于單項選擇，如選擇性別、是否操作等。在定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣“單選”才會生效。<inputtype="radio"name="sex"checked="checked"/>男<inputtype="radio"name="sex"/>女7.3表單7.3.3表單控件1.input控件（4）復選框<inputtype="checkbox"/>復選框常用于多項選擇，如選擇興趣、愛好等，可對其應用checked屬性，指定默認選中項。<inputtype="checkbox"/>唱歌<inputtype="checkbox"/>跳舞<inputtype="checkbox"/>游泳7.3表單7.3.3表單控件1.input控件（5）普通按鈕<inputtype="button"/>普通按鈕常常配合javascript腳本語言使用。<inputtype="button"value="普通按鈕"/>7.3表單7.3.3表單控件1.input控件（6）提交按鈕<inputtype="submit"/>提交按鈕是表單中的核心控件，用戶完成信息的輸入后，一般都需要單擊提交按鈕才能完成表單數(shù)據(jù)的提交?？梢詫ζ鋺胿alue屬性，改變提交按鈕上的默認文本。<inputtype="submit"/>7.3表單7.3.3表單控件1.input控件（7）重置按鈕<inputtype="reset"/>當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息?？梢詫ζ鋺胿alue屬性，改變重置按鈕上的默認文本。<inputtype="reset"/>7.3表單7.3.3表單控件1.input控件（8）圖像形式的提交按鈕<inputtype="image"/>圖像形式的提交按鈕與提交按鈕在功能上基本相同，顯示效果上會使用圖像替代了默認的按鈕，外觀上更加美觀。必須為圖像按鈕定義src屬性指定圖像的url地址。<inputtype="image"src="images/login.gif"/>7.3表單7.3.3表單控件1.input控件（9）隱藏域<inputtype="hidden"/>隱藏域對于用戶是不可見的，通常用于后臺的程序<inputtype="hidden"/>7.3表單7.3.3表單控件1.input控件（10）文件域<inputtype="file"/>當定義文件域時，頁面中將出現(xiàn)一個文本框和一個“選擇文件”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺服務器。<inputtype="file"/><br/><br/>7.3表單7.3.3表單控件1.input控件在實際運用中，常常需要將<input/>控件聯(lián)合<label>標簽使用，以擴大控件的選擇范圍，從而提供更好的用戶體驗，例如在選擇性別時，希望單擊提示文字“男”或者“女”也可以選中相應的單選按鈕。7.3表單7.3.3表單控件1.input控件案例演示7.3表單7.3.3表單控件2.textarea控件textarea控件可以輕松地創(chuàng)建多行文本輸入框。textarea控件的語法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>定義多行文本輸入框每行的字符數(shù)定義多行文本輸入框顯示的行數(shù)7.3表單7.3.3表單控件2.textarea控件textarea控件可選屬性可選屬性屬性值描述name由用戶自定義控件的名稱readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）7.3表單7.3.3表單控件2.textarea控件案例演示7.3表單7.3.3表單控件2.textarea控件各瀏覽器對clos屬性和rows屬性的理解不同，當對textarea控件應用clos屬性和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width屬性和height屬性來定義多行文本輸入框的寬高。7.3表單7.3.3表單控件3.select控件瀏覽網(wǎng)頁時，經(jīng)常會看到包含多個選項的下拉菜單，例如選擇所在的城市、出生年月、興趣愛好等。7.3表單7.3.3表單控件3.select控件使用select控件可以制作下拉菜單效果。select控件的語法格式<select> <option>選項1</option><option>選項2</option><option>選項3</option>...</select>用于在表單中添加一個下拉菜單用于定義下拉菜單中的具體選項每個<select>標簽中至少應包含一對<option>標簽7.3表單7.3.3表單控件3.select控件<select>標簽和<option>標簽的常用屬性標簽名常用屬性描述<select>size指定下拉菜單的可見選項數(shù)，取值為正整數(shù)multiple定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住“Ctrl”鍵的同時選擇多項<option>selected定義selected="selected"時，當前項即為默認選中項7.3表單7.3.3表單控件3.select控件案例演示7.3表單7.3.3表單控件3.select控件案例演示HTML5表單的新增控件類型、標簽和屬性7.47.4HTML5表單的新增控件類型、標簽和屬性HTML5中增加了許多新的表單功能，例如新的input控件類型、新的<form>標簽、新的input屬性、新的form屬性。這些新增內(nèi)容可以幫助設計人員更加高效和省力地制作出標準的Web表單。本節(jié)將對HTML5新增的表單屬性做詳細講解。7.4.1新的input控件類型掌握新的input控件類型，能夠更好的實現(xiàn)表單的控制和驗證。學習目標7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型color類型<inputtype="color"/>number類型<inputtype="number"/>range類型<inputtype="range"/>Datepickers類型<inputtype=date,month,week…"/>email類型<inputtype="email"/>url類型<inputtype="url"/>tel類型<inputtype="tel"/>search類型<inputtype="search"/>（1）（2）（3）（4）（5）（6）（7）（8）7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（1）email類型<inputtype="email"/>email類型的input控件是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應的錯誤信息。（2）url類型<inputtype="url"/>url類型的input控件是一種用于輸入URL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會提交數(shù)據(jù)到服務器；如果輸入的值不符合URL地址格式，則不允許提交，并且會有提示信息。7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（3）tel類型<inputtype="tel"/>tel類型是用于輸入電話號碼的文本框，通常會和pattern屬性配合使用。（4）search類型<inputtype="search"/>search類型是一種專門用于輸入搜索關鍵詞的文本框，它能自動記錄一些字符。7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（5）color類型<inputtype="color"/>color類型用于提供設置顏色的文本框，其基本形式是#RRGGBB，默認值為#000000，通過value屬性值可以更改默認顏色。7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（6）number類型<inputtype="number"/>number類型的input控件用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。number類型具體屬性說明value：指定輸入框的默認值。max：指定輸入框可以接受的最大的輸入值。min：指定輸入框可以接受的最小的輸入值。step：輸入域合法的間隔，如果不設置，默認值是1。7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（7）range類型<inputtype="range"/>range類型的input控件用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動條。range類型具體屬性說明min屬性：設置最小值。max屬性：設置最大值，step屬性：指定每次滑動的步幅。7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型（8）Datepickers類型<inputtype=date,month,week…"/>Datepickers類型是指時間和日期類型。時間和日期類型時間和日期類型說明date選取日、月、年month選取月、年week選取周和年time選取時間（小時和分鐘）datetime選取時間、日、月、年（UTC時間）datetime-local選取時間、日、月、年（本地時間）7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標簽和屬性7.4.1新的input控件類型注意：對于瀏覽器不支持的input控件輸入類型，將會在網(wǎng)頁中顯示為一個普通輸入框。7.4HTML5表單的新增控件類型、標簽和屬性7.4HTML5表單的新增控件類型、標簽和屬性7.4.2新的表單標簽掌握新的<form>標簽，能夠更好的實現(xiàn)特殊的表單效果。學習目標7.4HTML5表單的新增控件類型、標簽和屬性1.<datalist>標簽0102030405列表項通過<datalist>標簽內(nèi)的<option>標簽進行創(chuàng)建<datalist>標簽通常與input控件配合使用，來定義input控件的取值在使用<datalist>標簽時，需要通過id屬性為其指定一個唯一的標識如果用戶不希望從列表中選擇某項，也可以自行輸入其他內(nèi)容用于定義輸入框的選項列表datalist7.4.2新的表單標簽7.4HTML5表單的新增控件類型、標簽和屬性案例演示1.<datalist>標簽7.4.2新的表單標簽7.4HTML5表單的新增控件類型、標簽和屬性2.<output>標簽<output>標簽用于定義不同類型控件的輸出，輸出結果會顯示在<output>標簽中。<output>標簽通常配合input控件使用。<output>標簽的常用屬性屬性說明for定義輸出域相關的一個或多個元素form定義輸入字段所屬的一個或多個表單name定義對象的唯一名稱7.4.2新的表單標簽7.4HTML5表單的新增控件類型、標簽和屬性2.<output>標簽案例演示7.4.2新的表單標簽7.4HTML5表單的新增控件類型、標簽和屬性7.4.3新的input控件屬性掌握新的input屬性，能夠設置功能豐富的表單控件。學習目標7.4HTML5表單的新增控件類型、標簽和屬性autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標簽的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。autofocus屬性1案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性form屬性可以把表單內(nèi)的子元素寫在頁面中的任意位置。form屬性2案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性list屬性用于指定輸入框所綁定的<datalist>標簽，制作提示輸入效果，其值是某個<datalist>標簽的id。list屬性3案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性multiple屬性指定輸入框可以選擇多個值，該屬性適用于email和file類型的input控件。multiple屬性4案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性min、max和step屬性用于為包含數(shù)字或日期的input控件規(guī)定限值適用于Date

pickers、number和range等類型的input控件。min、max和step屬性5max規(guī)定輸入框所允許的最大輸入值。min規(guī)定輸入框所允許的最小輸入值。step為輸入框規(guī)定合法的數(shù)字間隔，默認值是1。7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性pattern屬性用于驗證input類型輸入框中，用戶輸入的內(nèi)容是否與所定義的正則表達式相匹配pattern屬性6pattern屬性常用的正則表達式-1正則表達式說明^[0-9]*$數(shù)字^\d{n}$n位的數(shù)字^\d{n,}$至少n位的數(shù)字^\d{m,n}$m-n位的數(shù)字^(0|[1-9][0-9]*)$零或非零開頭的數(shù)字7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性pattern屬性常用的正則表達式-2正則表達式說明^([1-9][0-9]*)+(.[0-9]{1,2})?$非零開頭的最多帶兩位小數(shù)的數(shù)字^(\-|\+)?\d+(\.\d+)?$正數(shù)、負數(shù)^\d+$或^[1-9]\d*|0$非負整數(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個英文字母組成的字符串7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性pattern屬性常用的正則表達式-3正則表達式說明^\w+$或^\w{3,20}$由數(shù)字、26個英文字母或者下劃線組成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數(shù)字包括下劃線^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/URL地址7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性pattern屬性常用的正則表達式-4正則表達式說明^\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結尾的短身份證號碼^[a-zA-Z][a-zA-Z0-9_]{4,15}$帳號是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)^[a-zA-Z]\w{5,17}$密碼(以字母開頭，長度在6~18之間，只能包含字母、數(shù)字和下劃線。7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性placeholder屬性用于為input類型的輸入框提供相關提示信息。placeholder屬性7案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性注意：placeholder屬性適用于type屬性值為text、search、url、tel、email以及password的<input/>標簽。7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性required屬性用于判斷用戶是否在輸入框中輸入內(nèi)容，當表輸入框容為空時，則不允許用戶提交表單。required屬性8案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標簽和屬性7.4.4新的表單屬性掌握新的form屬性，包括autocomplete屬性和novalidate屬性。學習目標7.4HTML5表單的新增控件類型、標簽和屬性autocomplete屬性用于指定表單是否有自動完成功能。autocomplete屬性1on：表單有自動完成功能。off：表單無自動完成功能。autocomplete屬性的值autocomplete屬性示例代碼<formid="formBox"autocomplete="on">7.4.4新的表單屬性7.4HTML5表單的新增控件類型、標簽和屬性novalidate屬性指定在提交表單時取消對表單進行檢查。novalidate屬性2novalidate屬性示例代碼<formaction="form_action.asp"method="get"novalidate="novalidate">7.4.4新的表單屬性使用CSS控制表單樣式7.57.5使用CSS控制表單樣式掌握CSS控制表單樣式的方法，能夠使用CSS美化表單樣式。學習目標在網(wǎng)頁設計中，表單既要具有相應的功能，也要具有美觀的樣式，使用CSS可以輕松控制表單控件的樣式。案例演示7.5使用CSS控制表單樣式階段案例——信息登記表7.6為了使讀者能夠更好地運用表單控件，本節(jié)將通過案例的形式分步驟制作一個信息登記表。7.6階段案例——信息登記表信息登記表效果7.6階段案例——信息登記表7.6.1分析效果圖7.6階段案例——信息登記表7.6.2制作頁面結構7.6階段案例——信息登記表7.6.3定義CSS樣式7.6階段案例——信息登記表本章小結本章介紹了HTML5中兩個重要的元素——表格與表單，主要包括表格相關標簽、表單相關控件以及如何使用CSS控制表格與表單的樣式。在本章的最后，通過表單控件并使用CSS對表單進行修飾，制作一個常見的信息登記表。通過本章的學習，讀者應該能夠掌握表格和表單的用法，熟練運用表格和表單組織頁面元素。第8章多媒體嵌入《HTML5+CSS3網(wǎng)站設計基礎教程（第3版）》學習目標/Target掌握HTML5中視頻的嵌入方法，能夠在HTML5頁面中添加視頻文件。掌握HTML5中音頻的嵌入方法，能夠在HTML5頁面中添加音頻文件。了解常用的視頻文件格式和音頻文件格式，能夠歸納HTML5支持的視頻和音頻格式。了解視頻、音頻嵌入技術，能夠總結HTML5視頻、音頻嵌入技術的優(yōu)點。學習目標/Target熟悉CSS控制視頻寬度和高度的方法，能夠在網(wǎng)頁中設置視頻寬度和高度。熟悉調(diào)用網(wǎng)絡音頻、視頻文件的方法，能夠調(diào)用網(wǎng)絡中的音頻、視頻文件。了解HTML5中視頻、音頻的兼容性，能夠制作視頻、音頻兼容性較好的網(wǎng)頁。章節(jié)概述/Summary在網(wǎng)頁設計中，多媒體技術主要是指在網(wǎng)頁上運用音頻、視頻傳遞信息的一種方式。在網(wǎng)絡傳輸速度越來越快的今天，視頻和音頻技術已經(jīng)被越來越廣泛的應用在網(wǎng)頁設計中，比起靜態(tài)的圖片和文字，音頻和視頻可以為用戶提供更直觀、豐富的信息。本章將對HTML5多媒體的特性以及嵌入音頻和視頻的方法進行詳細講解。目錄/Contents8.3嵌入視頻和音頻8.2HTML5支持的視頻格式和音頻格式8.1視頻、音頻嵌入技術概述8.4使用CSS控制視頻的寬度和高度8.5階段案例—音樂播放界面視頻、音頻嵌入技術概述8.1了解視頻、音頻嵌入技術，能夠總結HTML5視頻、音頻嵌入技術的優(yōu)點。學習目標8.1.1視頻、音頻嵌入技術概述8.1視頻、音頻嵌入技術概述在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁面的標準方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應用程序置于頁面中。8.1視頻、音頻嵌入技術概述8.1.1視頻、音頻嵌入技術概述復雜冗長8.1視頻、音頻嵌入技術概述8.1.1視頻、音頻嵌入技術概述8.1視頻、音頻嵌入技術概述運用HTML5中新增的<video>標簽和<audio>標簽來嵌入視頻或音頻。簡單精煉8.1.1視頻、音頻嵌入技術概述8.1視頻、音頻嵌入技術概述瀏覽器對<video>標簽和<audio>標簽的支持情況瀏覽器支持版本IE瀏覽器9.0及以上版本Firefox（火狐瀏覽器）3.5及以上版本Opear（歐朋瀏覽器）10.5及以上版本Chrome（谷歌瀏覽器）3.0及以上版本Safari（蘋果瀏覽器）3.1及以上版本Edge瀏覽器12.0及以上版本8.1.1視頻、音頻嵌入技術概述8.1視頻、音頻嵌入技術概述在不同的瀏覽器上運用<video>或<audio>標簽時，瀏覽器顯示音頻、視頻界面樣式也略有不同。Firefox瀏覽器（99.0.1版本）Chrome瀏覽器（100.0版本）8.1.1視頻、音頻嵌入技術概述HTML5支持的視頻格式和音頻格式8.2了解常用的視頻文件格式和音頻文件格式，能夠歸納HTML5支持的視頻和音頻格式。學習目標8.2HTML5支持的視頻格式和音頻格式8.2HTML5支持的視頻格式和音頻格式視頻格式oggmp4Webm音頻格式oggmp3wav8.2HTML5支持的視頻格式和音頻格式嵌入視頻和音頻8.38.3嵌入視頻和音頻通過上一節(jié)的學習，相信讀者對HTML5中視頻和音頻的相關知識有了初步了解。接下來，本節(jié)將進一步講解視頻和音頻的嵌入方法，使讀者能夠熟練運用<video>標簽和<audio>標簽在網(wǎng)頁中嵌入視頻和音頻文件。掌握HTML5中視頻的嵌入方法，能夠在HTML5頁面中添加視頻文件。學習目標8.3嵌入視頻和音頻8.3.1在HTML5中嵌入視頻8.3嵌入視頻和音頻8.3.1在HTML5中嵌入視頻在HTML5中，<video>標簽用于定義視頻文件。使用<video>標簽嵌入視頻的基本語法格式<videosrc="視頻文件路徑"controls="controls"></video>src用于設置視頻文件的路徑controls用于控制是否顯示播放控件<video>標簽之間可插入文字，瀏覽器不支持<video>標簽時，會顯示插入的文字。8.3嵌入視頻和音頻8.3.1在HTML5中嵌入視頻案例演示8.3嵌入視頻和音頻8.3.1在HTML5中嵌入視頻<video>標簽常見屬性在<video>標簽中還可以添加其他屬性，進一步優(yōu)化視頻的播放效果。屬性屬性值描述autoplayautoplay當頁面載入完成后自動播放視頻looploop視頻結束時重新開始播放preloadauto/meta/none如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性posterurl當視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來8.3嵌入視頻和音頻8.3.1在HTML5中嵌入視頻在2018年1月chrome瀏覽器取消了對自動播放功能的支持，也就是說autoplay屬性是無效的，這時如果我們想要自動播放視頻，就需要為<video>標簽添加“muted”屬性，嵌入的視頻就會靜音播放。掌握HTML5中音頻的嵌入方法，能夠在HTML5頁面中添加音頻文件。學習目標8.3嵌入視頻和音頻8.3.2在HTML5中嵌入音頻8.3嵌入視頻和音頻在HTML5中，<audio>標簽用于定義音頻文件。使用<audio>標簽嵌入音頻文件的基本語法格式<audiosrc="音頻文件路徑"controls></audio>src用于設置音頻文件的路徑controls用于為音頻提供播放控件<audio>標簽之間可插入文字，瀏覽器不支持<audio>標簽時，會顯示插入的文字。8.3.2在HTML5中嵌入音頻8.3嵌入視頻和音頻案例演示8.3.2在HTML5中嵌入音頻8.3嵌入視頻和音頻<audio>標簽常見屬性在<audio>標簽中還可以添加其他屬性，來進一步優(yōu)化音頻的播放效果。8.3.2在HTML5中嵌入音頻屬性值描述autoplayautoplay當頁面載入完成后自動播放音頻looploop音頻結束時重新開始播放preloadauto/meta/none如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用autoplay屬性，瀏覽器會忽略preload屬性了解HTML5中視頻、音頻的兼容性，能夠制作視頻、音頻兼容性較好的網(wǎng)頁。學習目標8.3嵌入視頻和音頻8.3.3視頻、音頻文件的兼容性問題8.3嵌入視頻和音頻8.3.3視頻、音頻文件的兼容性問題為什么在前途視頻和音頻時需要考慮瀏覽器的兼容性問題？8.3嵌入視頻和音頻8.3.3視頻、音頻文件的兼容性問題答案:雖然HTML5支持ogg、mp4和Webm

的視頻格式以及ogg、mp3和wav的音頻格式，但并不是所有的瀏覽器都支持這些格式，因此我們在嵌入視頻、音頻文件格式時，就要考慮瀏覽器的兼容性問題。8.3嵌入視頻和音頻8.3.3視頻、音頻文件的兼容性問題瀏覽器支持的視頻、音頻格式視頻格式

IE9以上Firefox4以上Opera11.5以上Chrome8以上Safari12.1以上Edge17以上ogg×支持支持支持×支持mpeg4支持支持支持支持支持支持WebM×支持支持支持支持支持音頻格式ogg×支持支持支持×支持mp3支持支持支持支持支持支持wav×支持支持支持支持支持8.3