Web前端開發(fā) 課件 第5章 HTML5進(jìn)階_第1頁(yè)
Web前端開發(fā) 課件 第5章 HTML5進(jìn)階_第2頁(yè)
Web前端開發(fā) 課件 第5章 HTML5進(jìn)階_第3頁(yè)
Web前端開發(fā) 課件 第5章 HTML5進(jìn)階_第4頁(yè)
Web前端開發(fā) 課件 第5章 HTML5進(jìn)階_第5頁(yè)
已閱讀5頁(yè)，還剩41頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第5章

HTML5進(jìn)階《Web前端開發(fā)》HTML5未來(lái)(2012)分化點(diǎn)分歧HTML

1.01993年(IETF)HTML

2.01995年(W3C)HTML

3.21996年(W3C)HTML

4.01997年(W3C)HTML

4.011999年(W3C)XHTML

1.02000年(W3C)XHTML

1.12001年(W3C)XHTML2.0?（W3C）HTML5草案2004年(WHATWG)HTML5正式版草案2008年(合并)5.1HTML語(yǔ)言版本變遷HTML5的文檔聲明HTML5沒有指定的具體的版本，表示最新的

html版本5.2HTML5新特性HTML5中的一些有趣的新特性：用于繪畫的canvas元素用于媒介回放的video和audio元素對(duì)本地離線存儲(chǔ)的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search5.2HTML5新特性HTML5文檔結(jié)構(gòu)同樣是由頭部和主體兩部分組成，只是新增了一些結(jié)構(gòu)元素，如header、nav、article、section、aside、footer六個(gè)結(jié)構(gòu)元素，這些元素都是塊級(jí)元素。13.2.1HTML5頁(yè)面結(jié)構(gòu)圖13-2HTML4.01頁(yè)面布局圖13-3HTML5結(jié)構(gòu)元素布局5.3HTML5新增結(jié)構(gòu)元素HTML5頁(yè)面結(jié)構(gòu)元素語(yǔ)法：<body><header> <nav>...</nav></header><article> <section>...</section></article><aside>...</aside><footer>...</footer></body>5.3HTML5新增結(jié)構(gòu)元素1．header標(biāo)記header標(biāo)記定義文檔和區(qū)域的頁(yè)眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫在網(wǎng)頁(yè)頭部，也可以寫在網(wǎng)頁(yè)內(nèi)容里面。通常<header>標(biāo)記至少包含（但不局限于）一個(gè)標(biāo)題標(biāo)記（h1～h6），也可以包括hgroup（標(biāo)題組合）標(biāo)記、表格標(biāo)識(shí)、搜索表單、導(dǎo)航等。<header> <hgroup> <h1>HTML5是下一代的HTML。</h1> <h3>什么是HTML5？</h3> <h5>HTML5將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。</h5> </hgroup></header>5.3HTML5新增結(jié)構(gòu)元素2．nav標(biāo)記nav標(biāo)記代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組。建議不要在footer元素中使用nav元素，否則易造成頁(yè)面顯示不正確。配置相應(yīng)的CSS代碼可以實(shí)現(xiàn)水平導(dǎo)航。<body><header><nav><ul><li><ahref="#">HTML參考手冊(cè)</a></li><li><ahref="#">HTML實(shí)例</a></li><li><ahref="#">HTML測(cè)驗(yàn)</a></li></ul></nav></header></body>5.3HTML5新增結(jié)構(gòu)元素3.article標(biāo)記article標(biāo)記是一個(gè)特殊的section標(biāo)記，它比section具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用，可包含header，footer。例如論壇帖子、博客文章、新聞故事、評(píng)論等。<article><header><hgroup><h1>HTML5結(jié)構(gòu)元素的簡(jiǎn)介</h1><h2>HTML5的誕生</h2></hgroup><timedatetime="2017-04-28">2017-04-28</time></header><p>HTML5引入了許多新元素，包括幾個(gè)用于更好地描述文本結(jié)構(gòu)的元素……</p></article>5.3HTML5新增結(jié)構(gòu)元素4．section標(biāo)記section標(biāo)記定義文檔中的節(jié)。例如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開始一個(gè)新的節(jié)。它用來(lái)表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，通常由內(nèi)容及其標(biāo)題組成。section元素不是一個(gè)普通的容器元素，它表示一段專題性的內(nèi)容，可以帶有標(biāo)題。<section><h1>section標(biāo)記</h1><p>用來(lái)定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。</p></section><article><h1>article標(biāo)記</h1><p>article標(biāo)記標(biāo)識(shí)了Web頁(yè)面中的主要內(nèi)容。以博客為例，每篇帖子都構(gòu)成一個(gè)重要內(nèi)容。</p></article>5.3HTML5新增結(jié)構(gòu)元素5．a(chǎn)side標(biāo)記aside（側(cè)欄，也稱為旁注）標(biāo)記用來(lái)說明其所包含的內(nèi)容與頁(yè)面主要內(nèi)容相關(guān)，但不是該頁(yè)面的一部分，類似于使用括號(hào)對(duì)正文進(jìn)行注釋（就像這樣）。括號(hào)中的內(nèi)容提供關(guān)于該元素的一些附加信息，例如廣告、成組的鏈接、側(cè)欄等。<header>我的博客</header><section><article><p>這是頁(yè)面上重要的內(nèi)容部分。也許是博客文章。帶aside元素。</p><aside><p>這是第一篇博客文章。</p></aside></article><article><p>這是頁(yè)面上重要的內(nèi)容部分。也許是博客文章。不帶aside元素</p></article></section>5.3HTML5新增結(jié)構(gòu)元素6．footer標(biāo)記footer標(biāo)記定義section或文檔的頁(yè)腳，包含了與頁(yè)面、文章或部分內(nèi)容有關(guān)的信息，例如文章的作者或者日期。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它與頁(yè)眉header標(biāo)記用法相同，在一個(gè)頁(yè)面中可以多次使用，若在一個(gè)區(qū)段的最后使用footer標(biāo)記，那么它就相當(dāng)于該區(qū)段的頁(yè)腳。<footerstyle="text-align:center;"><section><ahref="/"target="_blank">CAICT中國(guó)信通院</a><a>……</a><a>……</a></section><spanstyle="padding:2px5px;">京ICP備12046007號(hào)-5</span><spanstyle="padding:2px5px;">HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟版權(quán)所有</span></footer>5.3HTML5新增結(jié)構(gòu)元素1.輸入框占位符placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息，以提示用戶輸入何種內(nèi)容。在輸入框?yàn)榭諘r(shí)顯式提示信息，當(dāng)輸入框獲得焦點(diǎn)時(shí)，提示信息消失。案例演示5.4

HTML5表單2.輸入框自動(dòng)獲取焦點(diǎn)autofocus屬性用于指定頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)，將autofocus屬性的屬性值指定為true時(shí)，頁(yè)面加載完畢后會(huì)自動(dòng)獲取該焦點(diǎn)。案例演示5.4

HTML5表單3.輸入框?yàn)g覽器歷史用戶輸入的瀏覽歷史數(shù)據(jù)的展示，HTML5之前需要使用ul之類的列表配合CSS完成，HTML5中只需要使用datalist標(biāo)簽并在內(nèi)部添加若干個(gè)option標(biāo)簽即可實(shí)現(xiàn)。例如：5.4

HTML5表單<inputlist="product"><datalistid="product">

<optionvalue="蘋果">

<optionvalue="香蕉">

<optionvalue="橘子"></datalist>（1）email類型<inputtype="email"/>email類型的input控件是一種專門用于輸入E-mail地址的文本輸入框，用來(lái)驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯(cuò)誤信息。5.4

HTML5表單4.新增input標(biāo)簽類型（2）url類型<inputtype="url"/>url類型的input控件是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器；如果輸入的值不符合URL地址格式，則不允許提交，并且會(huì)有提示信息。5.4

HTML5表單4.新增input標(biāo)簽類型（3）日期輸入表單<inputtype="date"/>5.4

HTML5表單4.新增input標(biāo)簽類型（4）日期輸入表單<inputtype="time"/>（5）月份輸入表單<inputtype="month"/>5.4

HTML5表單4.新增input標(biāo)簽類型（6）周日期輸入表單<inputtype="week"/>（7）number類型<inputtype="number"/>5.4

HTML5表單（7）number類型<inputtype="number"/>number類型的input控件用于提供輸入數(shù)值的文本框。在提交表單時(shí)，number類型的input控件會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會(huì)出現(xiàn)錯(cuò)誤提示。number類型具體屬性說明如下。value：指定輸入框的默認(rèn)值。max：指定輸入框可以接受的最大的輸入值。min：指定輸入框可以接受的最小的輸入值。step：輸入域合法的間隔，如果不設(shè)置，默認(rèn)值是1。5.4

HTML5表單（8）tel類型<inputtype="tel"/>tel類型用于提供輸入電話號(hào)碼的文本框，由于電話號(hào)碼的格式千差萬(wàn)別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此tel類型通常會(huì)和pattern屬性配合使用，驗(yàn)證輸入的電話號(hào)碼格式正確與否。5.4

HTML5表單(9)search類型<inputtype="search"/>search類型是一種專門用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符。例如，站點(diǎn)搜索或者Google搜索。在用戶輸入內(nèi)容后，其右側(cè)會(huì)附帶一個(gè)刪除圖標(biāo)，單擊這個(gè)圖標(biāo)按鈕可以快速清除內(nèi)容。5.4

HTML5表單（10）color類型<inputtype="color"/>color類型用于提供設(shè)置顏色的文本框，用于實(shí)現(xiàn)一個(gè)RGB顏色輸入。顏色采用十六進(jìn)制顏色值，基本形式是#RRGGBB，默認(rèn)顏色值為#000，通過value屬性值可以更改默認(rèn)顏色。案例演示5.4

HTML5表單屬性說明autocomplete屬性規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)填充，自動(dòng)填充上一次的值autofocus布爾類型，自動(dòng)獲取焦點(diǎn)form可以在<form>標(biāo)簽之外使用<input>，通過此屬性指定<form>的id，此<input>屬于指定<form>formaction適用于type=submit，當(dāng)有多個(gè)submit，可以通過此屬性指定不同的請(qǐng)求urlformenctype當(dāng)把表單數(shù)據(jù)（form-data）提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼，僅針對(duì)method="post"的表單，formenctype屬性覆蓋<form>元素的enctype屬性。formmethod適用于type=submit，定義請(qǐng)求方式，會(huì)覆蓋<form>中的method，可以在有多個(gè)submit時(shí)使用formnovalidate規(guī)定在提交表單時(shí)不對(duì)

<input>元素進(jìn)行驗(yàn)證formtarget相當(dāng)于<a>的target屬性，是否打開新的頁(yè)面height和width寬高尺寸，僅適用于type="image"list引用<datalist>，一個(gè)單獨(dú)的<datalist>不會(huì)顯示min和max規(guī)定value的最大、最小值，適用于number、range、date、datetime、datetime-local、month、time以及weekmultiple布爾類型，允許用戶在

<input>元素中輸入一個(gè)以上的值，適用于type=file和emailpattern規(guī)定用于檢查

<input>元素值的正則表達(dá)式placeholder預(yù)期提示文字required是否必填/必選step規(guī)定合法數(shù)字間隔，適用于number、range、date、datetime、datetime-local、month、time以及week5.4

HTML5表單5.5HTML5音頻與視頻在網(wǎng)頁(yè)設(shè)計(jì)中，多媒體技術(shù)主要是指在網(wǎng)頁(yè)上運(yùn)用音頻視頻傳遞信息的一種方式。在網(wǎng)絡(luò)傳輸速度越來(lái)越快的今天，音頻和視頻技術(shù)已經(jīng)被越來(lái)越廣泛的應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中。在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁(yè)面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁(yè)面中。復(fù)雜冗長(zhǎng)運(yùn)用HTML5中新增的video標(biāo)簽和audio標(biāo)簽可以避免這樣的問題。5.5HTML5音頻與視頻視頻和音頻編解碼器由于視頻和音頻的原始數(shù)據(jù)一般都比較大，如果不對(duì)其進(jìn)行編碼就放到互聯(lián)網(wǎng)上，傳播時(shí)會(huì)消耗大量時(shí)間，無(wú)法實(shí)現(xiàn)流暢的傳輸或播放。通過視頻和音頻編解碼器對(duì)視頻和音頻文件進(jìn)行壓縮，就可以實(shí)現(xiàn)視頻和音頻的正常傳輸和播放。5.5HTML5音頻與視頻多媒體格式運(yùn)用HTML5的video和audio標(biāo)簽可以在頁(yè)面中嵌入視頻或音頻文件，如果想要這些文件在頁(yè)面中加載播放，還需要設(shè)置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件。5.5HTML5音頻與視頻視頻格式OggMPEGWebM多媒體格式音頻格式VorbisMP3Wav5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，audio標(biāo)簽用于定義播放音頻文件的標(biāo)準(zhǔn)?；菊Z(yǔ)法格式<audiosrc="音頻文件路徑"controls="controls"></audio>src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件。可在<audio>和</audio>之間也可以插入文字，用于不支持audio元素的瀏覽器顯示。5.5HTML5音頻與視頻音頻控件，用于控制音頻文件的播放狀態(tài)播放進(jìn)度條聲音5.5HTML5音頻與視頻5.5.1audio標(biāo)簽屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完成后自動(dòng)播放音頻。looploop音頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。注意：以上列舉的audio元素的屬性和video元素是相同的，這些相同的屬性在嵌入音視頻時(shí)是通用的。5.5HTML5音頻與視頻5.5.1audio標(biāo)簽雖然html5支持Ogg、MPEG4和WebM的視頻格式以及Vorbis、MP3和Wav的音頻格式，但各瀏覽器對(duì)這些格式卻不完全支持視頻格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音頻格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

支持視頻音頻文件的兼容性問題5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，運(yùn)用source元素可以為video元素或audio元素提供多個(gè)備用文件?；菊Z(yǔ)法格式<audiocontrols="controls"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> ……</audio>src用于指定媒體文件的URL地址。type指定媒體文件的類型。5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，video標(biāo)簽用于定義播放視頻文件的標(biāo)準(zhǔn)。基本語(yǔ)法格式<videosrc="視頻文件路徑"controls="controls"></video>src屬性用于設(shè)置視頻文件的路徑，controls屬性用于為視頻提供播放控件，這兩個(gè)屬性是video元素的基本屬性。5.5HTML5音頻與視頻5.5.2video標(biāo)簽瀏覽器添加的視頻控件，用于控制視頻播放的狀態(tài)播放進(jìn)度條聲音全屏5.5HTML5音頻與視頻5.5.2video標(biāo)簽屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完成后自動(dòng)播放視頻。looploop視頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。posterurl當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定的比例顯示出來(lái)。5.5HTML5音頻與視頻5.5.2video標(biāo)簽在HTML5中，經(jīng)常會(huì)通過為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁(yè)面時(shí)就會(huì)預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁(yè)面的布局不產(chǎn)生變化。注意：通過width和height屬性來(lái)縮放視頻，這樣的視頻即使在頁(yè)面上看起來(lái)很小，但它的原始大小依然沒變，因此在實(shí)際工作中要運(yùn)用視頻處理軟件（如“格式工廠”）對(duì)視頻進(jìn)行壓縮。5.5HTML5音頻與視頻5.5.2video標(biāo)簽使用音頻和視頻注意事項(xiàng)1.

瀏覽器支持的音頻和視頻格式不同，需要在<source>標(biāo)簽中提供不同格式的文件來(lái)兼容不同的瀏覽器。2.

在設(shè)置src屬性時(shí)，應(yīng)該使用相對(duì)路徑或絕對(duì)路徑，避免使用相對(duì)于當(dāng)前頁(yè)面的路徑。3.

使用controls屬性會(huì)顯示默認(rèn)的播放器控件，但是在移動(dòng)設(shè)備上默認(rèn)控件可能無(wú)法顯示或不夠友好。此時(shí)可以使用JavaScript自定義控件。4.

在不同的瀏覽器和操作系統(tǒng)下，對(duì)于媒體的支持情況也可能不同，因此需要在不同的瀏覽器和設(shè)備上進(jìn)行測(cè)試。5.

如果使用自定義控件，需要注意控件的可用性和兼容性，避免在某些瀏覽器或設(shè)備上無(wú)法使用。6.

瀏覽器默認(rèn)情況下不會(huì)自動(dòng)播放媒體文件，需要用戶手動(dòng)點(diǎn)擊播放按鈕。如果希望實(shí)現(xiàn)自動(dòng)播放的效果，需要在設(shè)置<audio>或<video>標(biāo)簽時(shí)添加autoplay屬性。7.

使用媒體文件會(huì)占用網(wǎng)站的帶寬，需要注意使用合適的壓縮方法來(lái)減小文件大小，避免對(duì)網(wǎng)站性能造成負(fù)面影響?？傊?，在使用<audio>和<video>標(biāo)簽時(shí)，需要進(jìn)行充分的測(cè)試和優(yōu)化，以提供良好的用戶體驗(yàn)和兼容性。5.5HTML5音頻與視頻5.6繪圖HTML5中增加了用于繪制圖形的canvas

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論