移動(dòng)設(shè)備HTML5頁(yè)面布局是怎樣的

本篇文章給大家分享的是有關(guān)移動(dòng)設(shè)備HTML5頁(yè)面布局是怎樣的，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了化隆免費(fèi)建站歡迎大家使用！

結(jié)合移動(dòng)設(shè)備（手機(jī)和平板電腦）的特性，介紹HTML5中新增的語(yǔ)義化標(biāo)簽元素，以及在移動(dòng)Web瀏覽器下Web頁(yè)面布局的知識(shí)及例子。
在HTML5標(biāo)準(zhǔn)添加的新元素中，用于常見(jiàn)頁(yè)面結(jié) 構(gòu)的包括header footer footer nav aside aside article section hgroup 。
下面簡(jiǎn)單介紹一下這個(gè)元素：
1.header
header>元素定義文檔的頁(yè)面組合，通 常是一些引導(dǎo)和導(dǎo)航信息，標(biāo)簽內(nèi)通常包含 secti- on的頭部信息，如h2~h7 或 hgroup等。

代碼如下:


<header>
<h2>HTML5布局學(xué)習(xí)</h2>
<P>勤學(xué)苦練</p>
</header>

與下面的代碼是一致的：

代碼如下:


<div class=”header”>
<h2>HTML5布局學(xué)習(xí)</h2>
<P>勤學(xué)苦練</p>
</div>

2.footer
<footer>元素定義文檔或章節(jié)的末尾部分 包含一些章節(jié)的基本信息，如作者信息，相關(guān)連 及版權(quán)信息。 一個(gè)頁(yè)面上可以使用多個(gè) header 和footer,也可以插入一些別的元素，比如div ul 等。

代碼如下:


<footer>
<p>隱私信息</p>
<p>關(guān)于我們</p>
</footer>

3.nav
<nav>元素用于定義構(gòu)建導(dǎo)航，顯示導(dǎo)航 鏈接，用于放入一些當(dāng)前頁(yè)面的主要導(dǎo)航鏈接。

代碼如下:


<footer>
<nav>
　　<ul>
　　　　<li>隱私信息</li>
　　　　<li>版權(quán)信息</li>
　　　　<li>關(guān)于我們</li>
　　　　<li>聯(lián)系我們</li>
　　</ul>
</nav>
</footer>

4.aside
<aside>元素用于定義一個(gè)頁(yè)面的區(qū)域， 用來(lái)表示包含頁(yè)面相關(guān)的主要內(nèi)容，用于裝載非 正文的主要內(nèi)容，如廣告欄，側(cè)邊欄等。
5.article
<article>元素表示文檔，頁(yè)面，用來(lái)顯示一塊獨(dú)立的文章內(nèi)容，如一則網(wǎng)站新聞，一偏博客文章等。

代碼如下:


<article>
　　<header>
　　　　<h2>HTML5新元素</h2>
　　　　<p>article 新元素</p>
　　　　<footer>
　　　　　　<ul>
　　　　　　　　<li>文章標(biāo)簽1</li>
　　　　　　　　<li>文章標(biāo)簽2</li>
　　　　　　</ul>
　　　　</footer>
　　</header>
</article>

6.section
　<section>元素第一位文章中的節(jié)，比如章節(jié)，頁(yè)眉，頁(yè)腳。

代碼如下:


<article>
　　<section>
　　　　<h2></h2>
　　　　<p></p>
　　</section>
　　<section>
　　　　<h2></h2>
　　　　<p></p>
　　</section>
</article>

7.hgroup
<hgroup>定義為對(duì)網(wǎng)頁(yè)或區(qū)段的標(biāo)題元素進(jìn)行組合，通常使用多級(jí)別的h2~h7標(biāo)簽節(jié)點(diǎn)進(jìn)行分組。

代碼如下:


<header>
　　<hgroup>
　　　　　　<h2></h2>
　　　　　　<h3></h3>
　　</hgroup>
</header>

實(shí)際上，除了我們介紹的語(yǔ)義標(biāo)簽外，在HTML5的標(biāo)準(zhǔn)中還定義了更多不同語(yǔ)義的標(biāo)簽。
* audio:定義音頻內(nèi)容。
* canvas:定義畫(huà)布功能。
* command:定義一個(gè)命令按鈕。
* datalist:定義一個(gè)下拉列表。
* details:定義一個(gè)元素的詳細(xì)內(nèi)容。
* dialog:定義一個(gè)對(duì)話(huà)框。
* keygen:定義表單里一個(gè)聲稱(chēng)的鍵值。
* mark:定義有標(biāo)記的文本。
* output:定義一些輸出類(lèi)型。
* progress:定義任務(wù)的過(guò)程。
* source:定義媒體資源。
* video:定義一個(gè)視頻內(nèi)容。
雖然HTML5標(biāo)準(zhǔn)中新增了很多新的元素，但實(shí)際上在移動(dòng)Web應(yīng)用中使用的機(jī)會(huì)并不多。
audio及video等標(biāo)簽雖然可以在移動(dòng)Web應(yīng)用中得到實(shí)踐，但由于其性能、兼容性以及頁(yè)面渲染等原因，它們還不能很好地應(yīng)用到智能手機(jī)以及平板電腦的Web瀏覽器上。

以上就是移動(dòng)設(shè)備HTML5頁(yè)面布局是怎樣的，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：移動(dòng)設(shè)備HTML5頁(yè)面布局是怎樣的
轉(zhuǎn)載來(lái)源：http://www.muchs.cn/article32/geecpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、做網(wǎng)站、網(wǎng)站策劃、Google、服務(wù)器托管、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司