HTML多媒體標記與框架標記

多媒體標記

在html中可以使用多媒體標記來在網頁上播放音頻文件，或者顯示一些好看的圖片用來裝飾網頁。Flash文件也可以通過相應的標記顯示在網頁上，<video>標簽是用于在網頁上播放視頻文件的。

video里需要嵌套source標簽來指定視頻文件的路徑，或者網址路徑。source里有兩個屬性：src和type，前者是用于指定視頻文件的地址，后者是指定視頻文件的格式，例如mp4、wave、webm等等。

video里常用的屬性有width：設置視頻在頁面上的寬度，height：設置視頻在頁面上的高度，autoplay：設置視頻自動播放，也就是當網頁打開就自動播放視頻，loop：設置循環播放，controls：設置將視頻的控制面板顯示出來，src：也可以用來指定視頻文件的地址。

示例：

運行結果：

這是Chrome瀏覽器上的效果，每個瀏覽器的控制面板會有區別。

思維導圖：

<audio>是用于在網頁上播放音樂文件的標簽，和video一樣需要嵌套source標簽來指定音樂文件的路徑，雖然可以在audio標簽上使用src來指定，但是會覆蓋source里的src，也就是說，會全局默認為audio里的src路徑，audio標簽里的source用法和video里標簽的用法是一樣的。

audio里也有autoplay、loop、autoplay屬性，這些屬性代表的意義和video里的屬性是一樣的。

示例：

運行結果：

思維導圖：

接下來是<img>標簽，這是用于在網頁上顯示圖片的標簽，其中的src屬性不用說也知道是用來指定圖片文件的路徑的，img里也有width和height屬性，但是在img里一般只設置其中一個。因為有一個特性：只設置其中一個瀏覽器就會自動調整圖片寬高的比例，兩個都一起設置的話就要計算好圖片的比例，不然圖片比例不對看起來就是扭曲的，不設置height和width屬性就會按照圖片原本的比例顯示。

示例：

運行結果：

alt屬性，此屬性可以指定在圖片加載失敗的時候顯示一些文字，例如我把圖片路徑弄錯一下，實現這個效果：

運行結果：

align屬性，這個屬性之前也多次用到過，在img里將這個屬性的值設置為left的話，文字就可以在圖片旁邊顯示，可以使用vspace調整圖片與文字的上下間隔，hspace則可以調整圖片與文字的左右間隔。

示例：

運行結果：

像新聞或者某些有圖片的文章就會用到這種效果。

熱點標記：在img標簽還有一個應用：設置圖片熱點，當你點擊圖片中的熱點時就會跳轉到指定的頁面中。一個圖片設置了熱點的話，你鼠標移動到熱點的位置就會變成一個小手。

給圖片設置熱點需要使用map和area標簽，map需要設置一下name屬性，然后img標簽里的usemap屬性指定map里name屬性的值，usemap的值需要在前面加上一個#符號。

area是嵌套在map標簽里的，area用于設置熱點的形狀、大小、跳轉的頁面等等，shape屬性是用來設置熱點的形狀的，可以選擇以下幾種形狀：

coords則是用來設置熱點的大小，和超鏈接一樣使用href來設置跳轉頁面，area里還可以使用target屬性。

示例：

運行結果：

可以看到圖片上有個正方形的形狀，這是因為我點擊了一下熱點，所以顯示出了形狀，如果沒有點擊的話，是不會出現任何形狀的，就好像什么都沒有一樣。

<applet>標簽是用來插入Java的Applet程序的，讓程序可以在瀏覽器中運行，但是有一個運行條件，就是需要有安裝JVM虛擬機，不過這個標簽已經淘汰了，幾乎不再使用了，因為Java也放棄了Applet的開發，所以了解一下即可。

<embed>標簽用來引入插件，例如Flash就可以使用這個標簽引入，示例：

運行結果：

有使用過的網銀的人都知道，在登錄賬戶或者進行轉賬交易的時候，都會需要下載或更新一個安全控件，這個控件就是一個插件，也是使用<embed>標簽來引入的。

思維導圖：

多媒體標記思維導圖總結：

框架標記

其實框架就在能夠在一個窗口中嵌套幾個網頁顯示，框架標記有iframe、frame、frameset，后面的兩個基本上是淘汰了，只有iframe會用得。iframe是用來在網頁中再嵌套一個網頁的，我們其實經常看到這種應用，例如新聞網站或者其他網站上的那些廣告，就是iframe的一個應用。例如：

iframe應用的比較多的原因，是因為需要把一些經常要更新的內容和幾乎不怎么更新的內容分離開來，例如像圖片上的文章就基本不會更新的，而旁邊的廣告則經常要更新，如果不分離開將這兩種類型的頁面放在一塊的話，每次向服務器讀取數據的時候都得讀取不需要更新的內容，這樣的話會浪費帶寬資源、增大服務器的壓力。

iframe使用src來指定網頁地址，同樣的也具備width和height屬性，用來調整頁面的寬高。

示例：

運行結果：

使用scrolling屬性可以設置滾動條是否顯示，值設置為no則是不顯示，frameborder屬性可以設置邊框是否顯示，設置為0或者no表示不顯示。

示例：

運行結果：

iframe設置name屬性后，可以結合超鏈接標簽里的target屬性來顯示頁面，點擊一下超鏈接后將頁面顯示在iframe上，示例：

運行結果：

以上是iframe的基本使用方式。

最后是frameset和frame，這兩個是結合在一起使用的，frameset用來制定頁面顯示的方式，frame用來指定顯示的頁面。frameset有個cols屬性用來設置網頁為左中右的顯示方式，示例：

運行結果：

rows屬性則是設置網頁為上中下的顯示方式，示例：

運行結果：

雖然frameset和frame基本上很少使用了，但是在論壇、貼吧等類型的網頁可能會應用到。