1. 程式人生 > >HTML5 基礎知識

HTML5 基礎知識

HTML5 是一種專門用於組織 Web 內容的語言。它通過建立一種標準化的、直觀的 UI 標記語言簡化 Web 設計和開發。HTML5 提供瞭解析和劃分頁面的方法,它允許建立各種獨立的元件來按照邏輯組織站點,同時還為站點提供聯合功能。HTML5 可以稱作 “面向站點設計的資訊對映方法”,因為它融入了資訊對映、資訊劃分和訊息標籤等基本內容,使資訊變得易於使用和理解,這構成了 HTML5 的生動語義和審美工具的基礎。HTML5 使具備不同能力的設計師和開發人員能夠釋出從簡單文字到豐富的互動式多媒體等各種內容。

常用縮寫詞

  • API:應用程式程式設計介面
  • CSS3:層疊樣式表 3
  • GUI:圖形使用者介面
  • HTML:超文字標記語言
  • HTML5:HTML 版本 5
  • SQL:結構化查詢語
  • UI:使用者介面

HTML5 提供了有效的資料管理、繪圖、視訊和音訊工具。它簡化了面向 Web 和行動式裝置的跨瀏覽器應用程式的開發。HTML5 是推動移動雲端計算服務的技術之一,因為它可以實現更高程度的靈活性,可以開發出激動人心的互動式網站。它還引入了新的標記和增強,包括一個優雅的結構、表單控制元件、API、多媒體、資料庫支援,並極大地加快了處理速度。

HTML5 中的新標記更能讓人產生共鳴,封裝了它們的角色和用法。以前的 HTML 版本使用的標記不容易進行區分。然而,HTML5 提供了高度描述的、直觀的標籤。它提供了豐富的內容便籤,可以立即識別出內容。例如,<div>

標記現在補充了 <section>和 <article>標記。此外,還增加了 <video><audio><canvas>和 <figure>標記,可以更準確地描述內容的具體型別。

HTML5 實現了以下功能:

  • 提供了可以準確描述所包含的內容的標記
  • 增強的網路通訊
  • 顯著改善了一般儲存
  • 用於執行後臺流程的 Web Worker
  • 在應用程式和伺服器之間建立持久連線的 WebSocket 介面
  • 更好地檢索儲存的資料
  • 改善了網頁儲存和載入速度
  • 支援 CSS3 管理 GUI,意味著 HTML5 具備面向內容的特性
  • 改善了瀏覽器的表單處理
  • 一個基於 SQL 的資料庫 API,允許客戶端本地儲存
  • 畫布和視訊,無需安裝第三方外掛即可新增圖形和視訊
  • Geolocation API 規範,使用智慧手機位置功能來合併移動雲服務和應用程式
  • 智慧表單減少了下載 JavaScript 程式碼的需求,在移動裝置和雲伺服器之間實現了更有效的通訊

HTML5 建立了更加吸引人的使用者體驗:使用 HTML5 設計的頁面可以提供與桌面應用程式類似的體驗。HTML5 還將 API 功能和瀏覽器結合在一起,提供了增強的多平臺開發。通過使用 HTML5,開發人員可以提供在不同平臺之間切換的現代應用程式體驗。

HTML5 實際上是一系列創新的代表。HTML5 提供了新的標記、新的方法,並通過與 CSS3 和 JavaScript 的相互作用形成了一個通用的開發框架。這是以客戶端為中心的應用程式處理的核心。除了將 HTML5 技術的技巧和方法部署到桌面外,還可以在特性豐富的 Web 移動手機瀏覽器中實現 HTML5 —隨著 Apple iPhone、Google Android 和執行 Palm webOS 的手機的流行和普及,這注定是一個不斷增長的市場。

HTML5 的一個關鍵功能就是資訊對映 —或內容阻塞(如果您喜歡的話)—可以生成更加容易理解的流程。隨著 HTML5 在 Web 處理方面的地位越來越重要,您將看到它在設計和開發方面是多麼地高效。

HTML5 標誌著更有效的文字級別的語義流程,以及對錶單構建和使用的更高級別的控制。所有這些特性和 HTML5 創新的許多其他優點是使它成為主要正規化的根本原因。許多商業的或其他代理組織(即使這些組織其中很多的主要代理行為並不是資訊處理和通訊)都或多或少地反映到了這種日益增長的模式開發中。

HTML5 的成功並不是出於偶然。相反,它的技術和方法才是它取得成功的後盾。

頁面規劃

您將建立一個簡單的 Web 頁面。在這個過程中,我將討論 HTML5 中引入的幾個新標記。要建立一個有效的、高效的 Web 頁面,必須對頁面進行規劃,考慮到需要建立的所有的元件。

建立的頁面將採用如圖 1 所示的高階設計。頁面設計包含一個 Header 區、一個 Navigation 區、一個 Article 區(包含三個部分)、一個 Aside 區和一個 Footer 區。該頁面將用於 Google Chrome 瀏覽器,消除了一些會引起感官混亂的內容,這些內容會引起瀏覽器相容性問題,並且不利於理解頁面基本結構。這種結構的目的是清楚地展示新的 HTML5 標記的用法,展示如何使用它們建立構造良好的程式碼和優雅的頁面設計。

圖 1. Acme United Web 頁面規劃
在大框中巢狀更小的框,顯示頁面的不同元件

在建立頁面的過程中,我使用了 CSS3,需要用 CSS3 正確地呈現 HTML5 頁面。CSS3 是實現 HTML5 頁面樣式、導航和整體感官的重要工具。它的屬性組可以在 W3Schools CSS3 參考站點(見 參考資料)找到,包括一些有用的元素,如背景、字型、選框和動畫效果。

然而,在開始構建頁面前,您需要了解一些有關新的 HTML5 標記的知識。