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

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

各種表單控件</form><form>與</form>之間的表單控件是由用戶自定義的action、method和name為表單標(biāo)簽<form>的常用屬性7.3表單7.3.2創(chuàng)建表單action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址1.action屬性<form>標(biāo)簽的常用屬性例如：<formaction="form_action.asp"><formaction=mailto:htmlcss@163.com>action的屬性值可以是相對(duì)路徑或絕對(duì)路徑，還可以為接收數(shù)據(jù)的E-mail郵箱地址。7.3表單7.3.2創(chuàng)建表單<form>標(biāo)簽的常用屬性例如：<formaction="form_action.asp"method="get">method屬性的取值為get或post，get為method屬性的默認(rèn)值。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式。2.method屬性7.3表單7.3.2創(chuàng)建表單<form>標(biāo)簽的常用屬性采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，所以使用method="post"可以大量的提交數(shù)據(jù)。2.method屬性7.3表單7.3.2創(chuàng)建表單<form>標(biāo)簽的常用屬性例如：name屬性用于指定表單的名稱。3.name屬性7.3表單7.3.3表單控件掌握各類表單控件，能夠創(chuàng)建不同功能的表單控件。學(xué)習(xí)目標(biāo)7.3表單7.3.3表單控件1.input控件瀏覽網(wǎng)頁時(shí)經(jīng)常會(huì)看到單行文本輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等，要想定義這些元素就需要使用input控件。input控件的語法格式<inputtype="控件類型"/>7.3表單7.3.3表單控件1.input控件input控件的常用屬性-1屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕7.3表單7.3.3表單控件1.input控件input控件的常用屬性-2屬性屬性值描述typesubmit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域7.3表單7.3.3表單控件屬性屬性值描述name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本內(nèi)容size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）1.input控件input控件的常用屬性-37.3表單7.3.3表單控件屬性屬性值描述checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)1.input控件input控件的常用屬性-47.3表單7.3.3表單控件1.input控件案例演示7.3表單7.3.3表單控件1.input控件（1）單行文本輸入框<inputtype="text"/>單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號(hào)、證件號(hào)碼等，常用的屬性有name、value、maxlength。<inputtype="text"value="張三"maxlength="6"/>7.3表單7.3.3表單控件1.input控件（2）密碼輸入框<inputtype="password"/>密碼輸入框用來輸入密碼，其內(nèi)容將以圓點(diǎn)的形式顯示。<inputtype="password"size="40"/>7.3表單7.3.3表單控件1.input控件（3）單選按鈕<inputtype="radio"/>單選按鈕用于單項(xiàng)選擇，如選擇性別、是否操作等。在定義單選按鈕時(shí)，必須為同一組中的選項(xiàng)指定相同的name值，這樣“單選”才會(huì)生效。<inputtype="radio"name="sex"checked="checked"/>男<inputtype="radio"name="sex"/>女7.3表單7.3.3表單控件1.input控件（4）復(fù)選框<inputtype="checkbox"/>復(fù)選框常用于多項(xiàng)選擇，如選擇興趣、愛好等，可對(duì)其應(yīng)用checked屬性，指定默認(rèn)選中項(xiàng)。<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ù)的提交?？梢詫?duì)其應(yīng)用value屬性，改變提交按鈕上的默認(rèn)文本。<inputtype="submit"/>7.3表單7.3.3表單控件1.input控件（7）重置按鈕<inputtype="reset"/>當(dāng)用戶輸入的信息有誤時(shí)，可單擊重置按鈕取消已輸入的所有表單信息?？梢詫?duì)其應(yīng)用value屬性，改變重置按鈕上的默認(rèn)文本。<inputtype="reset"/>7.3表單7.3.3表單控件1.input控件（8）圖像形式的提交按鈕<inputtype="image"/>圖像形式的提交按鈕與提交按鈕在功能上基本相同，顯示效果上會(huì)使用圖像替代了默認(rèn)的按鈕，外觀上更加美觀。必須為圖像按鈕定義src屬性指定圖像的url地址。<inputtype="image"src="images/login.gif"/>7.3表單7.3.3表單控件1.input控件（9）隱藏域<inputtype="hidden"/>隱藏域?qū)τ谟脩羰遣豢梢姷?，通常用于后臺(tái)的程序<inputtype="hidden"/>7.3表單7.3.3表單控件1.input控件（10）文件域<inputtype="file"/>當(dāng)定義文件域時(shí)，頁面中將出現(xiàn)一個(gè)文本框和一個(gè)“選擇文件”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺(tái)服務(wù)器。<inputtype="file"/><br/><br/>7.3表單7.3.3表單控件1.input控件在實(shí)際運(yùn)用中，常常需要將<input/>控件聯(lián)合<label>標(biāo)簽使用，以擴(kuò)大控件的選擇范圍，從而提供更好的用戶體驗(yàn)，例如在選擇性別時(shí)，希望單擊提示文字“男”或者“女”也可以選中相應(yīng)的單選按鈕。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第一次加載頁面時(shí)禁用該控件（顯示為灰色）7.3表單7.3.3表單控件2.textarea控件案例演示7.3表單7.3.3表單控件2.textarea控件各瀏覽器對(duì)clos屬性和rows屬性的理解不同，當(dāng)對(duì)textarea控件應(yīng)用clos屬性和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width屬性和height屬性來定義多行文本輸入框的寬高。7.3表單7.3.3表單控件3.select控件瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單，例如選擇所在的城市、出生年月、興趣愛好等。7.3表單7.3.3表單控件3.select控件使用select控件可以制作下拉菜單效果。select控件的語法格式<select> <option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select>用于在表單中添加一個(gè)下拉菜單用于定義下拉菜單中的具體選項(xiàng)每個(gè)<select>標(biāo)簽中至少應(yīng)包含一對(duì)<option>標(biāo)簽7.3表單7.3.3表單控件3.select控件<select>標(biāo)簽和<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)7.3表單7.3.3表單控件3.select控件案例演示7.3表單7.3.3表單控件3.select控件案例演示HTML5表單的新增控件類型、標(biāo)簽和屬性7.47.4HTML5表單的新增控件類型、標(biāo)簽和屬性HTML5中增加了許多新的表單功能，例如新的input控件類型、新的<form>標(biāo)簽、新的input屬性、新的form屬性。這些新增內(nèi)容可以幫助設(shè)計(jì)人員更加高效和省力地制作出標(biāo)準(zhǔn)的Web表單。本節(jié)將對(duì)HTML5新增的表單屬性做詳細(xì)講解。7.4.1新的input控件類型掌握新的input控件類型，能夠更好的實(shí)現(xiàn)表單的控制和驗(yàn)證。學(xué)習(xí)目標(biāo)7.4HTML5表單的新增控件類型、標(biāo)簽和屬性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表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（1）email類型<inputtype="email"/>email類型的input控件是一種專門用于輸入E-mail地址的文本輸入框，用來驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯(cuò)誤信息。（2）url類型<inputtype="url"/>url類型的input控件是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器；如果輸入的值不符合URL地址格式，則不允許提交，并且會(huì)有提示信息。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（3）tel類型<inputtype="tel"/>tel類型是用于輸入電話號(hào)碼的文本框，通常會(huì)和pattern屬性配合使用。（4）search類型<inputtype="search"/>search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（5）color類型<inputtype="color"/>color類型用于提供設(shè)置顏色的文本框，其基本形式是#RRGGBB，默認(rèn)值為#000000，通過value屬性值可以更改默認(rèn)顏色。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（6）number類型<inputtype="number"/>number類型的input控件用于提供輸入數(shù)值的文本框。在提交表單時(shí)，會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。number類型具體屬性說明value：指定輸入框的默認(rèn)值。max：指定輸入框可以接受的最大的輸入值。min：指定輸入框可以接受的最小的輸入值。step：輸入域合法的間隔，如果不設(shè)置，默認(rèn)值是1。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（7）range類型<inputtype="range"/>range類型的input控件用于提供一定范圍內(nèi)數(shù)值的輸入范圍，在網(wǎng)頁中顯示為滑動(dòng)條。range類型具體屬性說明min屬性：設(shè)置最小值。max屬性：設(shè)置最大值，step屬性：指定每次滑動(dòng)的步幅。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型（8）Datepickers類型<inputtype=date,month,week…"/>Datepickers類型是指時(shí)間和日期類型。時(shí)間和日期類型時(shí)間和日期類型說明date選取日、月、年month選取月、年week選取周和年time選取時(shí)間（小時(shí)和分鐘）datetime選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local選取時(shí)間、日、月、年（本地時(shí)間）7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型案例演示7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.1新的input控件類型注意：對(duì)于瀏覽器不支持的input控件輸入類型，將會(huì)在網(wǎng)頁中顯示為一個(gè)普通輸入框。7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.2新的表單標(biāo)簽掌握新的<form>標(biāo)簽，能夠更好的實(shí)現(xiàn)特殊的表單效果。學(xué)習(xí)目標(biāo)7.4HTML5表單的新增控件類型、標(biāo)簽和屬性1.<datalist>標(biāo)簽0102030405列表項(xiàng)通過<datalist>標(biāo)簽內(nèi)的<option>標(biāo)簽進(jìn)行創(chuàng)建<datalist>標(biāo)簽通常與input控件配合使用，來定義input控件的取值在使用<datalist>標(biāo)簽時(shí)，需要通過id屬性為其指定一個(gè)唯一的標(biāo)識(shí)如果用戶不希望從列表中選擇某項(xiàng)，也可以自行輸入其他內(nèi)容用于定義輸入框的選項(xiàng)列表datalist7.4.2新的表單標(biāo)簽7.4HTML5表單的新增控件類型、標(biāo)簽和屬性案例演示1.<datalist>標(biāo)簽7.4.2新的表單標(biāo)簽7.4HTML5表單的新增控件類型、標(biāo)簽和屬性2.<output>標(biāo)簽<output>標(biāo)簽用于定義不同類型控件的輸出，輸出結(jié)果會(huì)顯示在<output>標(biāo)簽中。<output>標(biāo)簽通常配合input控件使用。<output>標(biāo)簽的常用屬性屬性說明for定義輸出域相關(guān)的一個(gè)或多個(gè)元素form定義輸入字段所屬的一個(gè)或多個(gè)表單name定義對(duì)象的唯一名稱7.4.2新的表單標(biāo)簽7.4HTML5表單的新增控件類型、標(biāo)簽和屬性2.<output>標(biāo)簽案例演示7.4.2新的表單標(biāo)簽7.4HTML5表單的新增控件類型、標(biāo)簽和屬性7.4.3新的input控件屬性掌握新的input屬性，能夠設(shè)置功能豐富的表單控件。學(xué)習(xí)目標(biāo)7.4HTML5表單的新增控件類型、標(biāo)簽和屬性autofocus屬性用于指定頁面加載后是否自動(dòng)獲取焦點(diǎn)，將標(biāo)簽的屬性值指定為true時(shí)，表示頁面加載完畢后會(huì)自動(dòng)獲取該焦點(diǎn)。autofocus屬性1案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標(biāo)簽和屬性form屬性可以把表單內(nèi)的子元素寫在頁面中的任意位置。form屬性2案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標(biāo)簽和屬性list屬性用于指定輸入框所綁定的<datalist>標(biāo)簽，制作提示輸入效果，其值是某個(gè)<datalist>標(biāo)簽的id。list屬性3案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標(biāo)簽和屬性multiple屬性指定輸入框可以選擇多個(gè)值，該屬性適用于email和file類型的input控件。multiple屬性4案例演示7.4.3新的input控件屬性7.4HTML5表單的新增控件類型、標(biāo)簽和屬性min、max和step屬性用于為包含數(shù)字或日期的input控件規(guī)定限值適用于Date

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

的視頻格式以及ogg、mp3和wav的音頻格式，但并不是所有的瀏覽器都支持這些格式，因此我們?cè)谇度胍曨l、音頻文件格式時(shí)，就要考慮瀏覽器的兼容性問題。8.3嵌入視頻和音頻8.3.3視頻、音頻文件的兼容性問題瀏覽器支持的視頻、音頻格式視頻格式

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