HTML 5 快速導覽 - 區域元素 <body>

<body> 為 HTML 文件的區域元素 (element) ， <html> 裡頭包含兩大元素，其中之一便是 <body> ，網頁內容預設放在 <body> 到 </body> 內。



<body> 除了全域屬性外，另有定義其他屬性 (attribute) 。
  • onafterprint
  • onbeforeprint
  • onbeforeunload
  • onblur
  • onerror
  • onfocus
  • onhashchange
  • onload
  • onmessage
  • onoffline
  • ononline
  • onpagehide
  • onpageshow
  • onpopstate
  • onresize
  • onscroll
  • onstorage
  • onunload


這些屬性的作用同 HTML 元素的事件處理屬性，英文單字的字面意思亦即該屬性的用途，並呼叫適當的 JavaScript 程式作為屬性值。


此外， <body> 的文件物件模型 (DOM) 介面為 HTMLBodyElement ，並具有與 <body> 相同名稱的屬性。


舉例如下
<!DOCTYPE html>  
<html>  
  <head>  
    <title>HTML 5 DEMO</title> 
    <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> 
    <script>
      function update(online) {
        document.getElementById("status").textContent =
        online ? "Online" : "Offline";
      }
    </script>
  </head>  
  <body ononline="update(true)"
        onoffline="update(false)"
        onload="update(navigator.onLine)">
    <header>  
       header  
    </header>  
    <nav>  
      <ul>
        <li>nav 1</li>
        <li>nav 2</li>
      </ul>  
    </nav>
    <section>
      <article>
        <p>You are: <span id="status">(Unknown)</span></p>
      </article>
    </section>      
    <footer>  
      <p>
        footer © 2011 
      </p>       
    </footer>  
  </body>  
</html>  

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


我們在 <body> 中使用三個屬性 ononline 、 onoffline 與 onload
<body ononline="update(true)"
      onoffline="update(false)"
      onload="update(navigator.onLine)">


三者同樣呼叫 run()
function update(online) {
  document.getElementById('status').textContent =
  online ? 'Online' : 'Offline';
}


如果網路有連線就會顯示 "Online" ，離線就會顯示 "Offline" ，利用 Firefox 開啟，結果如下



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


您可以繼續參考
JavaScript 範例

區域元素


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


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

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)