《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第四章-HTML5多媒體和表格-理論學(xué)習(xí)資料_第1頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第四章-HTML5多媒體和表格-理論學(xué)習(xí)資料_第2頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第四章-HTML5多媒體和表格-理論學(xué)習(xí)資料_第3頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第四章-HTML5多媒體和表格-理論學(xué)習(xí)資料_第4頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第四章-HTML5多媒體和表格-理論學(xué)習(xí)資料_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第四章HTML5多媒體和表格理論內(nèi)容列表標(biāo)簽表格和框架插入多媒體元素1.列表標(biāo)簽列表是網(wǎng)頁(yè)中常見(jiàn)的內(nèi)容組織和表現(xiàn)效果。使用列表標(biāo)簽可以制作導(dǎo)航欄、新聞標(biāo)題列表、排行榜等列表列表標(biāo)簽HTML5有3種列表：無(wú)序列表有序列表定義列表列表標(biāo)簽ul是無(wú)序列表的起始標(biāo)簽，英文全稱unorderedlist。<ul>許多個(gè)<li>標(biāo)簽定義的列表項(xiàng)目......</ul>li標(biāo)簽用于列舉具體的列表項(xiàng)目，英文全稱list。無(wú)論是有序列表還是無(wú)序列表，列表項(xiàng)目均用li標(biāo)簽列出列表標(biāo)簽ol是有序列表的起始標(biāo)簽，英文全稱orderedlist<ol>許多個(gè)<li>標(biāo)簽定義的列表項(xiàng)目......</ol>有序列表中的項(xiàng)目符號(hào)是數(shù)字或字母序列列表標(biāo)簽<ul>

<li>ul稱為無(wú)序列表標(biāo)簽。</li>

<li>無(wú)序列表中的項(xiàng)目符號(hào)是幾何圖形</li></ul><oltype='1'start='2'>

<li>ol稱為有序列表標(biāo)簽。</li>

<li>li稱為列表項(xiàng)目。</li>

<li>有序列表中的項(xiàng)目符號(hào)是數(shù)字或字母序列。</li></ol>有序列表無(wú)序列表2.表格和框架創(chuàng)建表格在網(wǎng)頁(yè)中，除了使用列表組織內(nèi)容，還常用表格呈現(xiàn)基于行列展示效果的內(nèi)容。表格表格常通過(guò)三種標(biāo)簽構(gòu)建，分別是表格標(biāo)簽table、行標(biāo)簽tr、單元格標(biāo)簽td<table> <tr> <td>單元格內(nèi)的文字</td> ...... </tr></table>表格行單元格表格表格的常見(jiàn)屬性見(jiàn)下表屬性說(shuō)明border顯示表格的邊框scope設(shè)置表頭width設(shè)置表格的總體寬度align單元格水平對(duì)齊cellspacing單元格間距cellpadding單元格邊距表格<tableborder="1"><caption>東部地區(qū)的人均GDP下降</caption><tr><thscope="col">第一季度</th><thscope="col">第二季度</th><thscope="col">第三季度</th><thscope="col">第四季度</th></tr><tr><td>20.4</td><td>27.4</td><td>90</td><td>20.4</td></tr></table>表格邊框表格標(biāo)題表格表頭表格表格可分組顯示使用colgroup標(biāo)簽用于定義表格列的分組thead標(biāo)簽，用于定義表格的表頭tfoot標(biāo)簽，用于定義表格的表注底部tbody標(biāo)簽，用于定義表格主體。<tableborder="1"width="100%"><caption>副食品清單</caption><colgroupspan="1"style="background:#1FCEEF;"/><colgroupspan="2"style="background:#EFEFEF;"/><thead> <tr><!--省略--></tr></thead><tfoot> <tr><!--省略--></tr></tfoot><tbody> <tr><!--省略--></tr></tbody></table>背景色表頭底部主體列分組表格表格行列合并表格可以實(shí)現(xiàn)行列合并，只需在tr、th或td中加入rowspan或colspan屬性colspan表示跨越的列數(shù)，rowspan表示跨越的行數(shù)<tdcolspan="#"><tdrowspan="#">表格<tablewidth="100%"><tr> <throwspan="3">值班人員</th></tr><!--省略--></table><tablewidth="100%"><tr> <thcolspan="3">值班人員</th></tr><!--省略--></table>表格寬度合并3行合并3列框架之前所學(xué)的所有HTML5文檔均為單框架文檔，即在一個(gè)瀏覽器中每一次僅顯示一個(gè)HTML5頁(yè)面。但有時(shí)設(shè)計(jì)者需要更為靈活的功能，希望能夠在瀏覽器上一次顯示多頁(yè)面，相互配合，相互轉(zhuǎn)換，這樣需要使用框架。

用框架嵌入廣告用框架嵌入廣告框架HTML5的框架標(biāo)簽是iframeiframe是InlineFrame的意思，用<iframe></iframe>可以將框架置于一個(gè)HTML5頁(yè)面內(nèi)。iframe內(nèi)嵌框架可以完全由設(shè)計(jì)者定義寬度和高度，并且可以放置在網(wǎng)頁(yè)的任何位置。<iframe屬性="屬性值">

替換顯示的內(nèi)容</iframe>框架iframe常見(jiàn)的屬性屬性說(shuō)明src表示框架引用的地址frameborder表示框架是否顯示邊框scrolling表示框架是否顯示滾動(dòng)條width表示框架的顯示寬度height表示框架的顯示高度框架<body><p>iframe可以在HTML5頁(yè)面里顯示另一個(gè)網(wǎng)頁(yè)。</p><p>使用iframe顯示百度頁(yè)面。</p><iframesrc=""width="900"height="300"frameborder="1"scrolling="no"></iframe></body>框架3.嵌入多媒體嵌入多媒體圖片圖片組合視頻圖片網(wǎng)頁(yè)上插入圖片的方法是使用img標(biāo)簽。其眾多屬性可以控制圖片的路徑、尺寸和替換文字等功能<img屬性="屬性值">圖片img的常見(jiàn)屬性屬性說(shuō)明默認(rèn)src圖片地址，可以為gif、jpg及png格式。若圖片文件與該html文件處于同一目錄，則只寫(xiě)文件名稱，否則必須添加正確的相對(duì)路徑或絕對(duì)路徑

Width、height設(shè)定圖片大小，此寬度及高度通常采用象素或百分率作為單位。通常只設(shè)為圖片的真實(shí)大小，以免失真默認(rèn)是圖片的原始大小border圖片邊框厚度

align調(diào)整圖片距旁邊文字的位置，可以控制文字出現(xiàn)在圖片的偏上方、中間、底端、左右等，可選值：top、middle、bottom、left、right默認(rèn)bottomalt此為用于描述該圖形的文字，若瀏覽器不顯示圖片，這些文字則會(huì)代替圖片而被顯示。若圖片顯示，當(dāng)鼠標(biāo)移至圖片上，這些文字會(huì)顯示

圖片<body>

<img

src="img1.jpg"alt="圖片替代文字"title="圖片提示文字:):):):)"width="300"height="260"/></body>圖片組合figure標(biāo)簽用于表示網(wǎng)頁(yè)上一塊獨(dú)立的內(nèi)容，將其從網(wǎng)頁(yè)上移除后不會(huì)對(duì)網(wǎng)頁(yè)上的內(nèi)容產(chǎn)生任何影響。figure表示的內(nèi)容可以是圖片、統(tǒng)計(jì)圖等。figcaption標(biāo)簽表示figure標(biāo)簽的標(biāo)題，它從屬于figure標(biāo)簽，必須書(shū)寫(xiě)在figure標(biāo)簽里面。<body><figure><inputtype="image"src="img2.jpg"width="300"height="200"><inputtype="image"src="img3.jpg"width="300"height="200"><inputtype="image"src="img4.jpg"width="300"height="200"><figcaption>全球十大神秘俱樂(lè)部</figcaption></figure></body>圖片組合視頻HTML5支持視頻播放使用的視頻標(biāo)簽是video它含有src、poster、preload、autoplay、loop、controls、width和height等屬性，以及一個(gè)內(nèi)部使用的標(biāo)簽source屬性說(shuō)明默認(rèn)src指定視頻的地址

poster指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無(wú)效時(shí)顯示（預(yù)覽圖）。視頻數(shù)據(jù)無(wú)效可能是視頻正在加載，或是視頻地址錯(cuò)誤等

preload用于定義視頻是否預(yù)加載。屬性有三個(gè)可選擇的值：none、metadata、auto默認(rèn)為autoautoplay用于設(shè)置視頻是否自動(dòng)播放，是一個(gè)布爾屬性。當(dāng)其出現(xiàn)時(shí)，表示自動(dòng)播放，去掉時(shí)表示不自動(dòng)播放默認(rèn)為falseloop用于指定視頻是否循環(huán)播放，同樣是一個(gè)布爾屬性

controls需要瀏覽器啟用本身的播放控制欄?？刂茩陧毎úシ艜和？刂?、播放進(jìn)度控制、音量控制等。每個(gè)瀏覽器默認(rèn)的播放控制欄在界面上不一樣

視頻source標(biāo)簽用于為video標(biāo)簽或audio標(biāo)簽指定多個(gè)可選擇的媒體文件地址只能在video標(biāo)簽或audio標(biāo)簽沒(méi)有使用src屬性時(shí)使用瀏覽器按source標(biāo)簽的順序檢測(cè)指定的媒體文件是否能夠播放，如果不能播放，則換下一個(gè)source標(biāo)簽不能單獨(dú)出現(xiàn)。此標(biāo)簽包含src、type、media屬性屬性說(shuō)明src用于指定媒體文件的地址type用于說(shuō)明媒體文件的類型，幫助瀏覽器判斷是否支持此類媒體文件格式media用于說(shuō)明媒體在何種媒介中使用，不設(shè)置時(shí)默認(rèn)值為all，表示支持所有媒介視頻<body><videoposter="/2010/05/sintel/poster.png"controls="controls"preload="metadata"loop="loop"width="900"height="240">

<sourcesrc="/2010/05/sintel/trailer.mp4"/></video></body>播放效果啟動(dòng)效果總結(jié)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論