淺析行動裝置HTML5頁面佈局 _html5教學技巧

我們結合行動裝置（手機和平板電腦）的特性，介紹HTML5中新增的語意化標籤元素，以及在行動Web瀏覽器下Web頁面佈局的知識及範例。
在HTML5標準新增的新元素中，用於常見頁面結 構的包括header footer footer nav aside aside article section hgroup 。
下面簡單介紹一下這個元素：
1.header
header>元素定義文檔的頁面組合，通常是一些引導和導航信息，標籤內通常包含secti- on的頭部訊息，如h1~h6 或hgroup等。

複製程式碼

程式碼如下:

HTML5版面學習
　　

勤學苦練

與下面的程式碼是一致的：

複製程式碼

程式碼如下:

程式碼如下:

程式碼🎜>

　　

HTML5佈局學習

　　

勤學苦練

2.footer

元素定義文檔或章節的末尾部分 包含一些章節的基本信息，如作者信息，相關連 及版權信息。 一個頁面上可以使用多個 header 和footer,也可以插入一些別的元素，例如div ul 等。

複製程式碼


程式碼如下:

隱私權資訊 　　

關於我們

3.nav

元素用於定義構建導航，顯示導航 鏈接，用於放入一些當前頁面的主要導航鏈接。

複製程式碼

程式碼如下:

　　　　

　　　　　　
• 隱私資訊

　　　　　　li>版權資訊>　　　　　　
• 聯絡我們

　　　　

　　

4.aside

元素用於定義一個頁面的區域， 用來表示包含頁面相關的主要內容，用於裝載非正文的主要內容，如廣告欄，側邊欄等。 5.article

　　

元素表示文檔，頁面，用來顯示一塊獨立的文章內容，如一則網站新聞，一偏博客文章等。
　　

複製代碼

程式碼如下:

程式碼如下:

　　　　　　

HTML5新元素

　　　　　　

article 新元素

article 新元素
　　　　　　　　　　

文章標籤1

　　　　　　　　　　

文章標籤2

　　　　　　　　　　〜　　〜　　〜　　〜　　〜　、〜　、　、、、、、、、〵〜　、、都　〜、〜　、〕　、、、、、、〵、、、、、、、]]　
　　

6.section 　　　

元素第一位文章中的節，例如章節，頁眉，頁腳。
　　

複製程式碼程式碼如下:

　　　　

　　　　　　

　　　　

　　　　　　

　　　　　　

　　　　㜀>

7.hgroup

　　

定義為網頁或區段的標題元素進行組合，通常使用多層級的h1~h6標籤節點進行分組。

　　

複製程式碼

程式碼如下:

程式碼如下:>程式碼如下:　　　　　　　　

　　　　　　　　

　　　　〔2> 『 🎜>

實際上，除了我們介紹的語意標籤外，在HTML5的標準中也定義了更多不同語意的標籤。

* audio:定義音訊內容。
* canvas:定義畫布功能。
* command:定義一個指令按鈕。
* datalist:定義一個下拉清單。

* details:定義一個元素的詳細內容。 * dialog:定義一個對話框。

* keygen:定義表單裡一個聲稱的鍵值。 * mark:定義有標記的文字。 * output:定義一些輸出型別。
* progress:定義任務的過程。
* source:定義媒體資源。
* video:定義一個影片內容。
雖然HTML5標準中新增了許多新的元素，但實際上在行動Web應用中使用的機會並不多。
audio及video等標籤雖然可以在行動網路應用程式中實踐，但由於其效能、相容性以及頁面渲染等原因，它們還不能很好地應用到智慧型手機以及平板電腦的網路瀏覽器上。