HTML多媒體標記與框架標記


多媒體標記

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

video裏需要嵌套source標籤來指定視頻文件的路徑,或者網址路徑。source裏有兩個屬性:src和type,前者是用於指定視頻文件的地址,後者是指定視頻文件的格式,例如mp4、wave、webm等等。

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

示例:

3478


運行結果:

3479

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


思維導圖:

3480



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

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

示例:

3481


運行結果:

3482


思維導圖:

3483



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

示例:

3484


運行結果:

3485


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

3486


運行結果:

3487


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

示例:

3489


運行結果:

3490

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



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

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

area是嵌套在map標籤裏的,area用於設置熱點的形狀、大小、跳轉的頁面等等,shape屬性是用來設置熱點的形狀的,可以選擇以下幾種形狀:

3491

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

示例:

3492


運行結果:

3493

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


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


<embed>標籤用來引入插件,例如Flash就可以使用這個標籤引入,示例:

3494


運行結果:

3495

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


思維導圖:

3496

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

3497






框架標記

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

3498

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

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

示例:

3499


運行結果:

3500

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

示例:

3501


運行結果:

3502


iframe設置name屬性後,可以結合超鏈接標籤裏的target屬性來顯示頁面,點擊一下超鏈接後將頁面顯示在iframe上,示例:

3503


運行結果:

3504

3505


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

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

3506


運行結果:

3507


rows屬性則是設置網頁爲上中下的顯示方式,示例:

3508

運行結果:

3509

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章