HTML 5 快速導覽 - 文件資料元素 <meta>

<meta> 為 HTML 文件的文件資料元素 (element) ，用來設定目前網頁文件的相關資訊，凡是無法用 <title> 、 <base> 、 <link> 、 <style> 、 <script> 設定的都被歸到 <meta> 。



<meta> 除了全域屬性外，另有定義四個屬性 (attribute)
  • name
  • http-equiv
  • content
  • charset


其中 charset 設定網頁的編碼，例如
<meta charset="utf-8">


這是將網頁文件宣告為 UTF-8 編碼。


基本上 <meta> 是先設定 name 或 http-equiv ，然後設定相關的 content ，因此 name 或 http-equiv 是與 content 配對的設定。標準的 name 有以下五種設定值
  • application-name
  • author
  • description
  • generator
  • keywords


application-name 為伺服器應用程式的名稱， author 為網頁作者名稱， description 為網頁描述， generator 為產生網頁的軟體套件， keywords 則是網頁關鍵字。以下為 keywords 例子
<meta name="keywords" content="british,type face,font,fonts,highway,highways" />


http-equiv 則是設定網頁文件的狀態，有以下的關鍵字供設定
  • content-language
  • content-type
  • default-style
  • refresh
  • set-cookie


content-language 為網頁內容的語言， content-type 為網頁的語系編碼， default-style 設定預設的替換樣式表， refresh 用以更新網頁， set-cookie 則是設定 HTTP cookie 。


此外， <meta> 的文件物件模型 (DOM) 介面為 HTMLMetaElement ，有三個額外的屬性
  • name
  • http-equiv
  • content


這分別對應到 <meta> 相同的屬性名稱。


舉例如下
<!DOCTYPE html>  
<html>  
  <head>  
     <title>HTML 5 DEMO</title> 
     <meta http-equiv="refresh" content="10; URL=http://www.google.com.tw/">
     <style>
       header, nav, section, article, footer {
         display: block;
       }
       header, nav, section, article, footer {
         color: white;
       }
       header, footer {
         text-align: center;
         width: 100%;
       }
       header {
         background-color: red;
         font-size: 36px;
         font-weight: bold;
       }
       nav {
         position: fixed;
         top: 40px;
         right: 25px;
         background-color: blue;
         width: 100px;
       }
       section {
         width: 86%;
         background-color: gray;
         padding: 20px;
         margin: 20px;
       }
       footer {
         background-color: green;
         font-size: 10px;
       }
     </style> 
  </head>  
  <body>  
    <header>  
       header  
    </header>  
    <nav>  
      <ul>
        <li>nav 1</li>
        <li>nav 2</li>
      </ul>  
    </nav>
    <section>
      <article>
        網頁將會在 10 秒後切換到 Google 首頁....
      </article>
    </section>      
    <footer>  
      <p>
        footer © 2011 
      </p>       
    </footer>  
  </body>  
</html>  

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


我們將 <meta> 的 http-equiv 設定成 refresh 
<meta http-equiv="refresh" content="10; URL=http://www.google.com.tw/">


然後 content 設定為 10 ，分號、 URL 、等號然後是 Google 的網址。


利用 Firefox 開啟如下



10 秒後網頁切換到 Google 首頁



中英文術語對照
元素element
屬性attribute
文件物件模型DOM


您可以繼續參考
JavaScript 範例

根元素

文件資料元素


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


參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element
http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-meta-element
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)