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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第5章

HTML5進階《Web前端開發(fā)》HTML5未來(2012)分化點分歧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語言版本變遷HTML5的文檔聲明HTML5沒有指定的具體的版本，表示最新的

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

HTML5表單2.輸入框自動獲取焦點autofocus屬性用于指定頁面加載后是否自動獲取焦點，將autofocus屬性的屬性值指定為true時，頁面加載完畢后會自動獲取該焦點。案例演示5.4

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

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

<optionvalue="蘋果">

<optionvalue="香蕉">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音頻格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

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

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

在設置src屬性時，應該使用相對路徑或絕對路徑，避免使用相對于當前頁面的路徑。3.

使用controls屬性會顯示默認的播放器控件，但是在移動設備上默認控件可能無法顯示或不夠友好。此時可以使用JavaScript自定義控件。4.

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

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

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

使用媒體文件會占用網(wǎng)站的帶寬，需要注意使用合適的壓縮方法來減小文件大小，避免對網(wǎng)站性能造成負面影響。總之，在使用<audio>和<video>標簽時，需要進行充分的測試和優(yōu)化，以提供良好的用戶體驗和兼容性。5.5HTML5音頻與視頻5.6繪圖HTML5中增加了用于繪制圖形的canvas

溫馨提示

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

評論

0/150

提交評論