Web交互界面設(shè)計(jì)與制作第6章HTML5和CSS3進(jìn)階目錄01HTML5表格02HTML5表單03媒體對象04CSS3進(jìn)階05案例實(shí)現(xiàn)：flex布局01HTML5表格表格基本屬性表格由3個(gè)基本元素組成：table元素、tr元素、td元素。（1）table元素：用來定義表格，整個(gè)表格包含在<table>和</table>標(biāo)簽中。（2）tr元素：用來定義表格中的行。一對<tr></tr>標(biāo)簽表示表格中的一行。（3）td元素：表格的列標(biāo)簽，也是表格的單元格，包含在表格的行標(biāo)簽<tr>中。（4）th元素：有時(shí)候我們會(huì)看到表格中存在th元素，其實(shí)它與td元素一樣也可以表示表格的單元格，但不同的是，它可以用來創(chuàng)建表格的頭信息單元格，俗稱表頭元素。（5）caption元素：表格的標(biāo)題標(biāo)簽。01HTML5表格表格的基本結(jié)構(gòu)01HTML5表格表格的屬性（1）<table>標(biāo)簽的width、height和border屬性<tablewidth="600"height="500"border="1">…</table>width屬性：用來設(shè)置表格的寬度。height屬性：用來設(shè)置表格的高度。border屬性：用來設(shè)置表格邊框的粗細(xì)。01HTML5表格表格的屬性（2）<td>標(biāo)簽的水平對齊方式align和垂直對齊方式valign屬性表格中的單元格具有水平方向?qū)R和垂直方向?qū)R兩種對齊方式。align屬性用于設(shè)置水平對齊方式valign屬性用于設(shè)置垂直對齊方式01HTML5表格表格的屬性（3）表格的背景屬性表格的背景分為背景顏色和背景圖像。通常情況也把這些屬性寫到CSS中。bgcolor屬性：用來設(shè)置整個(gè)表格或者某個(gè)單元格的背景顏色。background屬性：用來設(shè)置整個(gè)表格或者某個(gè)單元格的背景圖像。01HTML5表格單元格的合并及拆分1．單元格的合并合并單元格是將表格中相鄰的多個(gè)單元格合并成一個(gè)單元格，有橫向上的合并和縱向上的合并兩種。（1）橫向合并單元格（2）縱向合并單元格2．單元格的拆分一個(gè)單元格可以拆分成多個(gè)單元格。單元格拆分時(shí)可以拆分成多行，也可以拆分成多列。01HTML5表格表格的嵌套表格可以用來布局網(wǎng)頁，但是網(wǎng)頁的欄目板塊有時(shí)候是不規(guī)則展示的。因此，用標(biāo)準(zhǔn)的表格布局不規(guī)則的網(wǎng)頁欄目時(shí)，會(huì)采用一定的表格嵌套。表格的嵌套就是在建立的表格中的某一個(gè)單元格中再創(chuàng)建一個(gè)表格。01HTML5表格案例實(shí)現(xiàn)：課程表制作01HTML5表格案例實(shí)現(xiàn)：課程表制作01HTML5表格案例實(shí)現(xiàn)：課程表制作02HTML5表單表單基本屬性網(wǎng)頁中的表單用<form></form>標(biāo)簽創(chuàng)建。表單標(biāo)簽常用的屬性如下。（1）name屬性：用來設(shè)置表單的名稱。（2）action屬性：用于設(shè)定表單數(shù)據(jù)處理程序URL。例如，http://localhost/test.asp。（3）method屬性：規(guī)定以何種方式發(fā)送表單數(shù)據(jù)。常用的屬性值有2種。GetPost02HTML5表單創(chuàng)建表單控件用戶與表單交互是通過表單的控件進(jìn)行的。表單控件通過name屬性標(biāo)識(shí)，通過value屬性值獲取輸入數(shù)據(jù)。表單的提交是通過表單的提交按鈕完成的。input元素控件的類型由type屬性值決定，不同的type屬性值對應(yīng)不同類型的表單控件02HTML5表單HTML5新增表單控件02HTML5表單HTML5新增表單屬性1．a(chǎn)utofocus屬性該屬性規(guī)定頁面加載后，表單控件是否自動(dòng)獲取輸入焦點(diǎn)。表單的<button>、<input>、<keygen>、<select>和<textarea>標(biāo)簽都可以使用autofocus屬性，例如：<inputtype="text"name="user_name"autofocus>2．width和height屬性在HTML5中新增了width和height屬性，但它們只適用于image類型的input元素。width和height屬性定義圖像按鈕的寬和高，例如：<inputtype="image"src="button.gif"width="100"height="25">02HTML5表單HTML5新增表單屬性3．list屬性list屬性定義文本框的datalist元素的id值，datalist元素定義下拉列表的選項(xiàng)，如下面的代碼所示。02HTML5表單HTML5新增表單屬性4．min、max和step屬性這3個(gè)屬性通常用于為包含數(shù)字或日期的表單控件設(shè)置限定條件。min屬性設(shè)置限定的最小值，max屬性設(shè)置限定的最大值，step屬性設(shè)置表單控件允許的數(shù)字間隔。如step=5，則控件允許的合法數(shù)字是-5、0、5、10等，例如：<inputtype="number"name="shuzi"min="0"max="10"step="3">02HTML5表單HTML5新增表單屬性5．pattern屬性該屬性用于驗(yàn)證文本框的正則表達(dá)式，適用于input元素的text、search、url、tel、email和password控件。6．placeholder屬性該屬性從字面上可以理解其作用為占位。在文本框中設(shè)置屬性值，當(dāng)文本框?yàn)榭諘r(shí)顯示設(shè)置的屬性值，當(dāng)文本框中具有輸入內(nèi)容時(shí)設(shè)置的屬性值消失。例如，在注冊頁面中的用戶名文本框中提示用戶用手機(jī)號(hào)或郵箱進(jìn)行注冊。<inputtype="text"name="user_name"placeholder="手機(jī)號(hào)/郵箱">02HTML5表單HTML5新增表單屬性7．required屬性required屬性規(guī)定在表單提交時(shí)，表單中文本框的內(nèi)容不能為空，否則會(huì)有錯(cuò)誤提示信息。例如，在登錄頁面中，用戶名文本框和密碼框的內(nèi)容不能為空，例如：提交表單時(shí)，如果用戶名文本框和密碼文本框其中之一為空，則會(huì)有錯(cuò)誤提示信息彈出，03媒體對象embed對象embed用來嵌入對象，如多媒體對象flash。該對象是一個(gè)空元素，也是一個(gè)單標(biāo)簽。其語法結(jié)構(gòu)如下。<embedsrc="屬性值"type="類型"height="屬性值"width="屬性值">例如，插入Flash文件。<embedsrc="01.swf"type="application/x-shockwave-flash"width="400"height="300"></embed>例如，插入AVI影片。<embedsrc="01.avi"type="video/mpeg"width="400"height="300"></embed>03媒體對象video對象video對象是用來播放視頻的元素。在video對象的標(biāo)簽中可放入相關(guān)的文字說明，當(dāng)舊的瀏覽器不支持video對象時(shí)，這些內(nèi)容將顯示在網(wǎng)頁文件中。其語法結(jié)構(gòu)如下。<videosrc="屬性值"controlsloopautoplayposter="屬性值"height="屬性值"width="屬性值">

您的瀏覽器不支持video對象。</video>03媒體對象audio對象audio對象是用來播放聲音文件的對象。在audio對象的標(biāo)簽中可放入相關(guān)的文字說明，當(dāng)舊的瀏覽器不支持audio對象時(shí)，這些內(nèi)容將顯示在網(wǎng)頁文件中。其語法結(jié)構(gòu)如下。<audiosrc="屬性值"controlsloopautoplay>

您的瀏覽器不支持audio對象。</audio>03媒體對象source對象source是video與audio對象的子對象。因各個(gè)瀏覽器對HTML5audio與video對象的播放影片、聲音文件格式支持不一致，所以要使網(wǎng)頁文件能夠兼容各種主流瀏覽器，并通過audio、video對象來播放影片和聲音文件，需要準(zhǔn)備多個(gè)類型的文件。由于audio、video對象的src屬性只能有一個(gè)URL，所以必須利用source對象來定義多個(gè)影片、聲音文件來源，而不是使用audio與video對象的src屬性。在audio和video對象中，可以同時(shí)使用多個(gè)source對象，由于使用了source屬性，所以不可再為video和audio設(shè)定src屬性，否則video與audio對象的source對象等同無效。03媒體對象source對象source是video與audio對象的子對象。因各個(gè)瀏覽器對HTML5audio與video對象的播放影片、聲音文件格式支持不一致，所以要使網(wǎng)頁文件能夠兼容各種主流瀏覽器，并通過audio、video對象來播放影片和聲音文件，需要準(zhǔn)備多個(gè)類型的文件。例如，支持多個(gè)格式的聲音文件。<audiocontrols><sourcesrc="01.mp3"><sourcesrc="02.ogg"></audio>04CSS3進(jìn)階偽類和偽對象所謂“偽”，就是指不是真正的，而是表示結(jié)構(gòu)標(biāo)簽的一種狀態(tài)或代表一個(gè)虛擬的元素/對象。按照是否創(chuàng)造了新元素，分為偽類、偽元素選擇器和偽對象。1．常用的CSS偽類在網(wǎng)頁中，我們單擊超鏈接后，它會(huì)改變顏色或者變換樣式。這通常是使用CSS中稱為偽類的技術(shù)實(shí)現(xiàn)的。04CSS3進(jìn)階偽類和偽對象2．偽元素選擇器所謂偽元素選擇器，并不是針對真正的元素使用的選擇器，而是針對CSS中已經(jīng)定義好的偽元素使用的選擇器，其語法結(jié)構(gòu)如下。選擇器:偽元素{屬性:值}偽元素選擇器也可以與類配合使用，其語法結(jié)構(gòu)如下。選擇器類名:偽元素{屬性:值}04CSS3進(jìn)階偽類和偽對象3．偽對象偽對象用于對元素中的特定內(nèi)容進(jìn)行操作。設(shè)計(jì)偽元素的目的是選取諸如元素內(nèi)容第一個(gè)字或字母、文本第一行等特定內(nèi)容。選取某些內(nèi)容前面或后面的內(nèi)容用普通的選擇器無法完成。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽對象。04CSS3進(jìn)階Animation動(dòng)畫1．幀動(dòng)畫Keyframes它可以定義到每一個(gè)時(shí)間刻度上的展現(xiàn)內(nèi)容，我們一般用幀動(dòng)畫來做頁面的loading、小人物的簡單動(dòng)畫。04CSS3進(jìn)階Animation動(dòng)畫2．動(dòng)畫名稱animation-nameanimation-name可以用來定義動(dòng)畫的名稱。其語法結(jié)構(gòu)如下。選擇符{animation-name:動(dòng)畫名;}04CSS3進(jìn)階Animation動(dòng)畫3．動(dòng)畫時(shí)長animation-duration該屬性用于指定元素的動(dòng)畫持續(xù)時(shí)間，與transition-duration的使用方法一樣，其取值范圍不詳述，其語法結(jié)構(gòu)如下。選擇符{animation-duration:持續(xù)時(shí)間;}04CSS3進(jìn)階Animation動(dòng)畫4．動(dòng)畫變換速率animation-timing-function該屬性用于指定元素動(dòng)畫運(yùn)動(dòng)時(shí)的變換速率，其使用方法也與transtion-timingfunction相似。其語法結(jié)構(gòu)如下。選擇符{animation-timing-function:ease|ease-in|ease-out|linear|ease-in-out;}04CSS3進(jìn)階Animation動(dòng)畫5．動(dòng)畫開始時(shí)間animation-delay該屬性用來指定元素動(dòng)畫開始時(shí)間。與transition-delay的使用方法一樣，其默認(rèn)值也是0，語法結(jié)構(gòu)如下。選擇符{animation-delay:1s;}04CSS3進(jìn)階Animation動(dòng)畫6．循環(huán)播放次數(shù)animation-iteration-count該屬性用來指定元素循環(huán)播放動(dòng)畫的次數(shù)，其語法結(jié)構(gòu)如下。選擇符{animation-iteration-count:number;}04CSS3進(jìn)階Animation動(dòng)畫7．動(dòng)畫播放方向animation-direction該屬性用來指定元素動(dòng)畫播放的方向，有兩個(gè)取值，分別為normal、alternate。normal指的是動(dòng)畫每次循環(huán)都向前播放，alternate指的是動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。該屬性不常用。04CSS3進(jìn)階Animation動(dòng)畫8．簡寫屬性animation與前面所講的transition一樣，在animation屬性中可同時(shí)加入以上屬性的值，屬性值之間用空格分隔。其語法結(jié)構(gòu)如下。選擇符{animation:animation-name,animation-duration/animation-timingfunction/…;}04CSS3進(jìn)階flex布局任何一個(gè)容器都可以指定為flex布局，例如：display:flex;行內(nèi)元素也可以使用flex布局，例如：display:inline-flex04CSS3進(jìn)階flex布局1．flex相關(guān)概念采用flex布局的元素稱為flex容器（FlexContainer），簡稱“容器”。它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目（FlexItem），簡稱“項(xiàng)目”“子項(xiàng)”，04CSS3進(jìn)階flex布局2．flex容器屬性flex容器也就是我們理解的父標(biāo)簽，與它相關(guān)的屬性有6個(gè)04CSS3進(jìn)階flex布局3．item項(xiàng)目屬性item的屬性在子元素item中設(shè)置。item有6種屬性04CSS3進(jìn)階響應(yīng)式布局響應(yīng)式布局的概念于2010年5月提出，目的是實(shí)現(xiàn)網(wǎng)頁頁面適應(yīng)屏幕、打印機(jī)、手機(jī)等多種不同大小的終端。響應(yīng)式布局可以通過CSS3的媒體查詢（MediaQueries）模塊實(shí)現(xiàn)，通過添加媒體查詢表達(dá)式、指定媒體類型，并根據(jù)媒體類型或?yàn)g覽器窗口的大小來選擇不同的樣式。目前的瀏覽器和各種移動(dòng)終端都能很好地支持響應(yīng)式布局。04CSS3進(jìn)階響應(yīng)式布局1．視口視口（Viewport）是手機(jī)Web制作非常重要的概念。手機(jī)在視口中呈遞頁面，而不是分辨率的物理窗口。視口中的1px等于真實(shí)物理的多個(gè)px。處理方法為使用一個(gè)<meta>標(biāo)簽：使手機(jī)認(rèn)為自己的視口是device-width（當(dāng)前設(shè)備）的視口寬度，示例代碼如下。<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>04CSS3進(jìn)階響應(yīng)式布局2．媒體查詢媒體查詢功能的核心是通過CSS3來查詢媒體類型或者尺寸范圍，然后調(diào)用對應(yīng)的樣