DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML 5 中的新元素
HTML 5 中的新元素
編輯:HTML5詳解     
新千年以來,超文本標記語言(HTML)5 第一次向 Html 中引入新的元素。新的結構元素包括 aside、figure 和 section。新的內聯元素包括 time、meter 和 progress。新的內嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。

超文本標記語言(HTML)的開發到 1999 年 HTML 4 就停止了。萬維網聯盟(W3C)把重點轉向將 Html 的底層語法從標准通用標記語言(SGML)改為可擴展標記語言(XML),以及可縮放向量圖型(SVG)、XForms 和 MathML 這些全新的標記語言。浏覽器廠商則把精力放到選項卡和富站點摘要(RSS)閱讀器這類浏覽器特性上。Web 設計人員開始學習使用異步 Javascript + XML(AJax),在現有的框架下通過層疊樣式表(CSS)和 JavaScript™ 語言建立自己的應用程序。但是在接下來的八年中,Html 本身沒有任何變化。

最近,它又復活了。三家重要的浏覽器廠商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group(WhatWG)來開發傳統 HTML 的新版本。最近,W3C 也注意到了這些活動,也啟動了自己的新一代 HTML 項目,雙方的成員有很多是相同的。這兩個項目最終很可能合並。雖然很多細節還在爭論之中,但下一版本 Html 的大體輪廓已經清楚了。

Web 開發人員從 1999 年就一直期待 HTML 的新版本(通常稱為 HTML 5,但是也稱為 Web Applications 1.0),現在它終於發布了。它保持了 Html 原來的特色:沒有名稱空間或模式。元素不必結束。浏覽器會寬容地對待錯誤。p 仍然是 p,table 仍然是 table。

如果在 1999 年將一位 Web 開發人員冷凍起來,現在再解凍,那麼他會遇到一些新的讓人迷惑的元素。是的,他熟悉的元素(比如 div)仍然保留了;但是,Html 現在還包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在,但是增加了 meter、time 和 m。img 和 embed 仍然可用,但是還增加了 video 和 audio。但是,他仔細觀察一下就會發現,這些元素實際上沒什麼區別。其中許多元素可能在 1999 年是開發人員需要而沒有得到的。通過與他已經掌握的元素進行簡單的類比,這些新元素都很容易理解。實際上,與 AJax 或 CSS 相比,它們非常容易掌握。

最後,當他打開 300MHz 的筆記本(運行的是 Windows 98,也是在 1999 年冷凍起來的)時,他可能對 Netscape 4 和 Windows® Internet Explorer® 5 中顯示的新頁面效果很吃驚。當然,這些老式浏覽器不認識新元素,會完全忽略它們,但是頁面仍然會顯示,內容仍然是完整的。

這並不是什麼虛構的故事。HTML 5 的設計原則就是在不支持它的浏覽器中能夠平穩地退化。原因很簡單:我們都是這樣的 “原始人”。浏覽器現在有選項卡、CSS 和 XMLHttpRequest,但是它們的 HTML 顯示引擎仍然停留在 1999 年的水平。除了用戶量大大增加之外,Web 其實在本質上沒什麼進步。HTML 5 考慮到了這一點。它目前為 Web 開發人員一些真正的好處,隨著浏覽器的緩慢升級,頁面浏覽者會逐漸享受到這些好處。我們來看看 Html 5 提供了什麼。

結構

由於缺少結構,即使是形式良好的 HTML 頁面也比較難以處理。必須分析標題的級別,才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導航條、主內容區和各篇文章都由通用的 div 元素來表示。Html 5 添加了一些新元素,專門用來標識這些常見的結構:

  • section:這可以是書中的一章或一節,實際上可以是在 Html 4 中有自己的標題的任何東西
  • header:頁面上顯示的頁眉;與 head 元素不一樣
  • footer:頁腳;可以顯示電子郵件中的簽名
  • nav:指向其他頁面的一組鏈接
  • article:blog、雜志、文章匯編等中的一篇文章

我們來考慮一個典型的 blog 主頁,它的頂部有頁眉,底部有頁腳,還有幾篇文章、一個導航區和一個邊欄。

現在不再需要 div 了。不再需要自己設置 class 屬性,從標准的元素名就可以推斷出各個部分的意義。這對於音頻浏覽器、手機浏覽器和其他非標准浏覽器尤其重要。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved