溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關移動設備HTML5頁面布局是怎樣的，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
結合移動設備（手機和平板電腦）的特性，介紹HTML5中新增的語義化標簽元素，以及在移動Web瀏覽器下Web頁面布局的知識及例子。
在HTML5標準添加的新元素中，用于常見頁面結 構的包括header footer footer nav aside aside article section hgroup 。
下面簡單介紹一下這個元素：
1.header
header>元素定義文檔的頁面組合，通 常是一些引導和導航信息，標簽內通常包含 secti- on的頭部信息，如h2~h7 或 hgroup等。
代碼如下:
<header>
<h2>HTML5布局學習</h2>
<P>勤學苦練</p>
</header>
與下面的代碼是一致的：
代碼如下:
<div class=”header”>
<h2>HTML5布局學習</h2>
<P>勤學苦練</p>
</div>
2.footer
<footer>元素定義文檔或章節的末尾部分 包含一些章節的基本信息，如作者信息，相關連 及版權信息。 一個頁面上可以使用多個 header 和footer,也可以插入一些別的元素，比如div ul 等。
代碼如下:
<footer>
<p>隱私信息</p>
<p>關于我們</p>
</footer>
3.nav
<nav>元素用于定義構建導航，顯示導航 鏈接，用于放入一些當前頁面的主要導航鏈接。
代碼如下:
<footer>
<nav>
<ul>
<li>隱私信息</li>
<li>版權信息</li>
<li>關于我們</li>
<li>聯系我們</li>
</ul>
</nav>
</footer>
4.aside
<aside>元素用于定義一個頁面的區域， 用來表示包含頁面相關的主要內容，用于裝載非 正文的主要內容，如廣告欄，側邊欄等。
5.article
<article>元素表示文檔，頁面，用來顯示一塊獨立的文章內容，如一則網站新聞，一偏博客文章等。
代碼如下:
<article>
<header>
<h2>HTML5新元素</h2>
<p>article 新元素</p>
<footer>
<ul>
<li>文章標簽1</li>
<li>文章標簽2</li>
</ul>
</footer>
</header>
</article>
6.section
<section>元素第一位文章中的節，比如章節，頁眉，頁腳。
代碼如下:
<article>
<section>
<h2></h2>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
</section>
</article>
7.hgroup
<hgroup>定義為對網頁或區段的標題元素進行組合，通常使用多級別的h2~h7標簽節點進行分組。
代碼如下:
<header>
<hgroup>
<h2></h2>
<h3></h3>
</hgroup>
</header>
實際上，除了我們介紹的語義標簽外，在HTML5的標準中還定義了更多不同語義的標簽。
* audio:定義音頻內容。
* canvas:定義畫布功能。
* command:定義一個命令按鈕。
* datalist:定義一個下拉列表。
* details:定義一個元素的詳細內容。
* dialog:定義一個對話框。
* keygen:定義表單里一個聲稱的鍵值。
* mark:定義有標記的文本。
* output:定義一些輸出類型。
* progress:定義任務的過程。
* source:定義媒體資源。
* video:定義一個視頻內容。
雖然HTML5標準中新增了很多新的元素，但實際上在移動Web應用中使用的機會并不多。
audio及video等標簽雖然可以在移動Web應用中得到實踐，但由于其性能、兼容性以及頁面渲染等原因，它們還不能很好地應用到智能手機以及平板電腦的Web瀏覽器上。
以上就是移動設備HTML5頁面布局是怎樣的，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
