HTML 5 快速導覽 - MIME 型態

MIME 是 Multipurpose Internet Mail Extensions 的頭字母縮寫詞，原本用於電子郵件，使電子郵件能使用非 ASCII 以外的訊息，後來廣泛用於 HTTP 之中，指定 HTML 媒體元素 (element) 所用的媒體型態




常用的 MIME 型態如下表
Adobe Flashapplication/x-shockwave-flash
Atom feedsapplication/atom+xml
CSStext/css
DTDapplication/xml-dtd
ECMAScript/JavaScriptapplication/ecmascript, application/javascript
GIFimage/gif
GoogleWebToolkit datatext/x-gwt-rpc
Gzipapplication/x-gzip
HTMLtext/html
ICOimage/vnd.microsoft.icon
JPEGimage/jpeg, image/pjpeg
jQuery template datatext/x-jquery-tmpl
LaTeXapplication/x-latex
MP3, MPEGaudio/mpeg
MP4audio/mp4
Oggapplication/ogg
PDFapplication/pdf
PNGimage/png
PostScriptapplication/postscript
QuickTimevideo/quicktime
RARapplication/x-rar-compressed
RealAudioaudio/vnd.rn-realaudio
RSS feedsapplication/rss+xml
SVGimage/svg+xml
Textual datatext/plain
TIFFimage/tiff
WAVaudio/vnd.wave
WebMaudio/webm
Web Open Font Formatapplication/font-woff
Windows Media Audioaudio/x-ms-wma, audio/x-ms-wax
Windows Media Videovideo/x-ms-wmv
XHTMLapplication/xhtml+xml
XMLtext/xml
ZIPapplication/zip


通常內嵌元素 (embedded content) 如 <object> 、 <embed> 需要設定 type 屬性 (attribute) ，該屬性值必須是有效的 MIME 型態，一旦設定 type 就得與指定來源檔案的 src 屬性相符，不然有可能導致瀏覽器 (broswer) 無法處理，例如
<!DOCTYPE html>  
<html>  
  <head>  
     <title>HTML 5 DEMO</title> 
     <style>
       article {
         display: block;
       }
     </style>
  </head>  
  <body>
    <section>
      <article>
        <embed type="text/plain" src="example.jpg">
      </article>
    </section>  
  </body>  
</html>  

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：mimetest.html
     功能：示範 HTML 5 標記語言 
     作者：張凱慶
     時間：西元 2011 年 12 月 -->


Firefox 開啟如下



由於 <embed> 的 type 設定成 text/plain ， src 卻是 example.jpg ，因此造成瀏覽器無法處理。


這裡須留意，如果沒有設定 type 屬性，瀏覽器大多會主動依 src 的來源檔案進行處理，有些媒體格式則一定得設定 type ，否則瀏覽器無法處理，因此最好認識網頁所需處理的媒體檔案是屬於哪種 MIME 型態，並且適當的設定 type 屬性。


中英文術語對照
元素element
內嵌元素embedded content
屬性attribute
瀏覽器broswer


您可以繼續參考
基本概念


相關目錄
HTML 5 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#mime-types
http://www.w3.org/TR/html5/video.html#mime-types
http://en.wikipedia.org/wiki/MIME
http://en.wikipedia.org/wiki/Internet_media_type
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)