H5如何布局？H5入門布局教程講解

　　所謂H5布局，說簡單點(diǎn)，就是用H5特有的新標(biāo)簽（語義化）來替代傳統(tǒng)布局方式。幾點(diǎn)注意如下：

　　1）css寫法不變，比如你定義標(biāo)簽，那css里就要這樣寫header{}。另外，H5標(biāo)簽也是可以加class或id的，css寫法沒啥區(qū)別，比如，。樣式名{}  #樣式名{}；

　　2）移動端網(wǎng)站H5標(biāo)簽（包括css3）是支持的，放心大膽去弄，不要去考慮狗屁的兼容。如果是單純PC網(wǎng)站，建議傳統(tǒng)div方式布局比較合適；

　　3）響應(yīng)式網(wǎng)站，技術(shù)強(qiáng)迫癥，必須要用H5來做，那html5shiv.js或modernizr.js是不錯的IE兼容解決方案。（比如李勇的小拼sem博客）。注意：ie8以下是沒辦法的，可以頁面頂部彈出提醒升級你的IE，算友好體驗的一部分吧。

　　4）關(guān)于bootstrap，感興趣的同學(xué)快上手吧，老外的東西，不得不承認(rèn)，真TM是NB轟轟的。標(biāo)準(zhǔn)、標(biāo)準(zhǔn)、太標(biāo)準(zhǔn)了。

　　H5布局標(biāo)簽如何選擇？

　　個人理解，傻瓜式解釋。要是看不懂，說好的一筐豆腐呢？

　　全局：

　　<header><header>：相當(dāng)于<div class="header"></div>

　　<footer></footer>：相當(dāng)于<div class="footer"></div>

　　<section></section>：相當(dāng)于<div></div>，以前習(xí)慣的div改為section，當(dāng)然你繼續(xù)用div也一樣

　　<aside></aside>：相當(dāng)于<div class="sidebar"></div>，比如常見的側(cè)邊欄

　　導(dǎo)航或者分頁：

　　<nav></nav>：<div class="nav"><ul></ul></div>

　　文章、帖子或者其它獨(dú)立的頁面：

　　<article></article>:相當(dāng)于<div class="article"></div>

　　<time></time>：日期時間什么的放里面就好了，相當(dāng)于<div class="time">2016-05-21 15:43:21</div>，支持pubdate屬性，表示為發(fā)布日期

　　<summary></summary>：標(biāo)簽包含 details 元素的標(biāo)題，”details” 元素用于描述有關(guān)文檔或文檔片段的詳細(xì)信息?！眘ummary” 元素應(yīng)該是 “details” 元素的第一個子元素。<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

　　其它新標(biāo)簽：

　　<audio></audio>：標(biāo)簽定義聲音，比如音樂或其他音頻流。HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>

　　<video></video>：標(biāo)簽定義視頻，比如電影片段或其他視頻流。<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>

　　<source>：標(biāo)簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

　　<datalist></datalist>：標(biāo)簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

　　<figure> 標(biāo)簽用于對元素進(jìn)行組合。使用 <figcaption> 元素為元素組添加標(biāo)題。<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949…</p></figure>（是不是類似dl dt dd）

　　<mark></mark>：主要用來在視覺上向用戶呈現(xiàn)那些需要突出的文字。<mark>標(biāo)簽的一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。傳統(tǒng)如<span></span>

　　<hgroup></hgroup>：標(biāo)簽用于對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。

　　H5還有很多新標(biāo)簽，一般你也用不著，感興趣去度娘啊。上面這些常用的你能搞通了，基本做個標(biāo)準(zhǔn)H5頁面是問題不大的。

　　H5布局傳統(tǒng)標(biāo)簽還能用嗎？

　　答案是肯定的，比如em、i、span、ul、li、p、pre這些常用的傳統(tǒng)標(biāo)簽，一樣可以在H5頁面中正常使用。不要鉆牛角尖，H5布局只是引入了新的語義化標(biāo)簽，并不意味著它就是全部。

    本文來源于互聯(lián)網(wǎng)，如有疑問請及時聯(lián)系2898站長資源平臺官方客服，謝謝！