HTML5多媒體應用的技巧

HTML5多媒體應用的技巧，希望對大家有所幫助！

1..加入音樂有兩種標識：

<video>可以顯示圖像

<audio>只有聲音

語法如下：

·src="music.mp3"：設置音樂文件名及路徑， <audio>標記支持MP3、WAV及OGG 3種音樂格式；

·autoplay:是否自動播放音樂。

語法為：<audio src="music.ogg" autoplay></audio>

·controls:是否顯示播放面板。

·loop:是否循環播放。

·preload:是否預先加載,減少用戶等待時間。屬性值有auto、metadata及none3種。當設置autoplay屬性

時，preload屬性就會被忽略。

* auto:網頁打開時就加載影音。

* metadata:只加載meta信息。

* none:網頁打開時不加載影音。

·width/height:設置播放面板的寬度和高度，單位為像素。

·type="audio/mpeg":指定播放類型，不需要讓瀏覽器去檢驗文件格式，type必須指定適當的MIME類型。

語法為：<audio controls="controls">

</audio>

2.添加影音動畫

<video>其屬性大致與<audio>相同。支持MP4、WEBM(VP8編碼)、OGG（Theora編碼）語法如下：

3.Flash動畫是矢量格式，文件小并不失真。

在網頁中播放的格式是.swf文件，在網頁中加入Flash動畫可利用<embed>標記，語法如下：

4.使用iframe嵌入優酷視頻

其中的設置屬性為：

·src="new_page.htm" ：顯示在窗格中的文件路徑及文件名；

·name ="f1"：框架窗格名稱；

·width="300"/height="400"

·seamless:隱藏邊框及滾動條，讓網頁看不出來嵌入了iframe框架；

如果想嵌入視頻，則src改成視頻網址即可。

切圖 qietu(.com)

傳統的技術相比，HTML5 的語法特征更加明顯，可以更加便捷地處理多媒體內容，而且 HTML5 中還結合了其他元素，對原有的功能進行調整和修改，進行標準化工作。HTML5 在 2012 年已形成了穩定的版本。

HTML5 的優勢

1. 解決了跨瀏覽器問題

在 HTML5 之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到的頁面效果也不同。在 HTML5 中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式 IE 瀏覽器，只需簡單地添加 JavaScript 代碼就可以使用新的元素。

2. 新增了多個新特性

HTML 語言從 1.0 到 5.0 經歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經過多年的完善，已經發展成為一種非常重要的標記語言。 HTML5 新增的特性如下。

新的語義標簽，比如 header、nav、section、article、footer。
新的表單元素，比如 calendar、date、time、email、url、search。
用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好支持。
地理位置、拖曳、攝像頭等 API。

3. 用戶優先的原則

HTML5 標準的制定是以用戶優先為原則的，一旦遇到無法解決的沖突時，規范會把用戶放在第一位。另外，為了增強 HTML5 的使用體驗，還加強了以下兩方面的設計。

安全機制的設計

為確保 HTML5 的安全，在設計 HTML5 時做了很多針對安全的設計。HTML5 引入了一種新的基于來源的安全模型，該模型不僅易用，而且對不同的 API（Application Programming Interface ，應用程序編程接口）都通用。使用這個安全模型，不需要借助于任何不安全的 hack 就能跨域進行安全對話。

表現和內容分離

表現和內容分離是 HTML5 設計中的另一個重要內容。實際上，表現和內容的分離早在 HTML4.0 中就有設計，但是分離得并不徹底。為了避免可訪問性差、代碼復雜度高、文件過大等問題，HTML5 有了更加明晰的規范。但是考慮到 HTML5 的兼容性問題，一些陳舊的內容還是可以兼容使用的。

4. 化繁為簡的優勢

作為當下流行的通用標記語言，HTML5 盡可能地簡化，嚴格遵循了簡單至上的原則，主要體現在這幾個方面：

簡化的字符集聲明;
簡化的 DOCTYPE;
簡單而強大的 HTML5 API;
以瀏覽器原生能力替代復雜的 JavaScript 代碼。

從新增的標簽來看，HTML5 有以下幾個特點：

HTML5 的文檔類型可以簡寫為 <!DOCTYPE html>。
HTML5 的字符編碼可以簡寫為 <meta charset=“utf-8”/>。
標簽不分大小寫，但實際開發中，建議所有標簽都使用小寫。
允許屬性值不加引號。
允許部分屬性值可以省略。

隨著 HTML 的不斷發展，其經歷了“從 HTML4 的寬松到 XHTML 的嚴格再到 HTML5 寬松”的發展路程。

相比較 HTML4 和 XHTML 的結構標簽而言，HTML5 對結構標簽進行了較大簡化，精簡了聲明部分標簽的定義過程，使得結構標簽更加的簡潔。

語義化標簽

在引入語義化標簽之前，我們常常采用 DIV + CSS 來布局，這樣的布局方式使得文檔的結構不清晰。為了解決這個問題，在 HTML5 中新增了一些標簽，來幫助我們更清晰地展現文檔的結構。

所謂語義化標簽就是一看標簽名，我們就知道該標簽里內容的作用。

語義標簽的優點：

在樣式丟失的情況下，頁面也能呈現出很好地內容結構、代碼結構。
比 <div> 標簽有更加豐富的含義，方便開發與維護。
有利于 SEO，提高搜索引擎的有效爬取。
方便其他設備解析（如移動設備）。

在我們的課程中會給大家講解如下所示的語義化標簽：

header 標簽
nav 標簽
section 標簽
article 標簽
aside 標簽
footer 標簽

圖像地圖是帶有可點擊區域的圖像，通常情況下，每個區域是一個相關的超級鏈接。點擊某個區域，就會到達相關的鏈接，也可以通過圖像地圖實現圖片切換效果。

1 什么是圖像地圖

把一幅圖像分成為多個區域，每個區域指向不同的URL地址。例如，將一幅中國地圖的圖像按照省市劃分為若干個區域，這些區域就被稱為熱點，單擊熱點區域，就可以連接到與相應的省市有關的頁面，這就是圖像地圖。

2 怎么制作

1．首先必須定義出圖像上的各個熱點區域的形狀，位置坐標，及指向的URL地址等信息，這個過程叫做圖像熱點映射。圖像熱點映射需要使用<map name=mapname></map>標簽對進行說明，其中的name屬性為該圖像熱點映射指定了一個名稱。

2．圖像熱點映射中的各個區域用<area>標簽說明，<area>標簽的格式為：<area shape=”形狀”cords=”坐標”href=”URL”>，href部分也可以用nohref替換，表示在該區域單擊鼠標無效。<area>標簽還可以有一個target屬性，用來指明瀏覽器在哪個窗口或者幀中顯示href屬性所指向的網頁資源。<area>標簽的屬性及描述如表1所示。

3．定義好了圖像熱點之后，接著就要在<img>圖像標簽中增加一個名為usemap的屬性設置，usemap屬性指定該圖像被用作圖像地圖，其設置值為所使用的圖像熱點映射名稱，格式為：在<map>標簽中的name屬性設置值前多加一個“#”字符。例如，<img src=”china.jpg”usemap=”#mymap”>。

表1 <area>標簽的屬性及描述

在線咨詢

上一篇：碎片時間學編程「112]：轉義 HTML
下一篇：布局升級秘籍：掌握CSS Grid網格布局，打造響應式網頁設計

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5多媒體應用的技巧

HTML5 的優勢

語義化標簽

您的項目需求