主頁 > 知識(shí)庫 > 淺析移動(dòng)設(shè)備HTML5頁面布局

淺析移動(dòng)設(shè)備HTML5頁面布局

熱門標(biāo)簽:南通數(shù)據(jù)外呼系統(tǒng)推廣 外呼系統(tǒng)電話怎么投訴 pageadm實(shí)現(xiàn)地圖標(biāo)注 外呼線穩(wěn)定線路 呼和浩特外呼電銷系統(tǒng)排名 阜陽企業(yè)外呼系統(tǒng) 地圖標(biāo)注位置能賺錢嗎 邢臺(tái)縣地圖標(biāo)注app 申請400電話流程簡介

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

復(fù)制代碼
代碼如下:

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

與下面的代碼是一致的:

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

<article>
    <section>
      <h1></h1>
      <p></p>
    </section>
    <section>
      <h1></h1>
      <p></p>
    </section>
  </article>

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

復(fù)制代碼
代碼如下:

<header>
    <hgroup>
        <h1></h1>
        <h2></h2>
    </hgroup>
  </header>

實(shí)際上,除了我們介紹的語義標(biāo)簽外,在HTML5的標(biāo)準(zhǔn)中還定義了更多不同語義的標(biāo)簽。
* audio:定義音頻內(nèi)容。
* canvas:定義畫布功能。
* command:定義一個(gè)命令按鈕。
* datalist:定義一個(gè)下拉列表。
* details:定義一個(gè)元素的詳細(xì)內(nèi)容。
* dialog:定義一個(gè)對話框。
* keygen:定義表單里一個(gè)聲稱的鍵值。
* mark:定義有標(biāo)記的文本。
* output:定義一些輸出類型。
* progress:定義任務(wù)的過程。
* 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īng)用到智能手機(jī)以及平板電腦的Web瀏覽器上。

標(biāo)簽:辛集 黃山 撫順 蚌埠 楊凌 內(nèi)蒙古 德州 鶴崗

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《淺析移動(dòng)設(shè)備HTML5頁面布局》,本文關(guān)鍵詞  淺析,移動(dòng),設(shè)備,HTML5,頁面,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《淺析移動(dòng)設(shè)備HTML5頁面布局》相關(guān)的同類信息!
  • 本頁收集關(guān)于淺析移動(dòng)設(shè)備HTML5頁面布局的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章