輯導(dǎo)語：如何為一款產(chǎn)品制定合適的界面規(guī)則？隨著產(chǎn)品的迭代更新，作為設(shè)計(jì)師，則更需要在了解產(chǎn)品特性的情況下、設(shè)計(jì)出合理且有效的界面布局。本篇文章里，作者就對(duì)web產(chǎn)品設(shè)計(jì)適配選型做出介紹，并提出了他的看法。

一、開篇

現(xiàn)如今，幾乎所有的網(wǎng)頁設(shè)計(jì)都要進(jìn)行響應(yīng)式和自適應(yīng)設(shè)計(jì)，才能讓產(chǎn)品能夠覆蓋到更多終端。接手一個(gè)產(chǎn)品設(shè)計(jì)的初期，制定界面適配規(guī)則時(shí)，你是否也有過如下疑問：

• 寬度單位我是用百分比還是px？還是rem？區(qū)別是什么？
• 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設(shè)備像素、CSS像素？瀏覽器窗口大小和設(shè)備大小和分辨率大小區(qū)是什么區(qū)別？
• 什么是響應(yīng)式網(wǎng)站，自適應(yīng)又是什么？兩者有何區(qū)別和聯(lián)系？
• 百分比寬度布局和流式布局和前者的關(guān)系是什么？
• 既然響應(yīng)式這么流行，為何淘寶、京東等沒有去做，而是單獨(dú)開發(fā)了一個(gè)移動(dòng)端版？這里面有那些坑需要避開？

二、歷史長廊

在早期，硬件設(shè)備落后，網(wǎng)頁使用的是絕對(duì)靜態(tài)布局為主，絕對(duì)固定寬度的布局被稱為是靜態(tài)布局（Static Layout），也有叫固定布局（Fixed Layout）。

后隨時(shí)代變遷，技術(shù)發(fā)展。因?yàn)g覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個(gè)期間，實(shí)際已經(jīng)有了針對(duì)各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡稱AWD）。

在當(dāng)時(shí)，大多指的就是寬度自適應(yīng)布局。

在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當(dāng)時(shí)，大家都還沒有響應(yīng)式布局的概念，但此時(shí)出現(xiàn)了一個(gè)新的詞——漸進(jìn)增強(qiáng)。漸進(jìn)增強(qiáng)出現(xiàn)后，另一個(gè)詞優(yōu)雅降級(jí)也隨之出現(xiàn)了。這里只是舉個(gè)典型的例子：Gmail和QQmail。這兩個(gè)都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。

QQmail就是CSS hack的完美體現(xiàn)。你用任何一個(gè)瀏覽器，幾乎可以看到同一個(gè)樣子的郵箱，為的是用戶體驗(yàn)統(tǒng)一。

Gmail則使用了漸進(jìn)增強(qiáng)，你的瀏覽器越新越強(qiáng)，你看到的效果就越好，為的是用戶體驗(yàn)增強(qiáng)。再后來，Google發(fā)布了Android，移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5標(biāo)準(zhǔn)發(fā)布。

互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)。手機(jī)雖然屏幕變小了，但是卻提供了更豐富的功能。用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗(yàn)了。

所以，谷歌式的漸進(jìn)增強(qiáng)被廣泛認(rèn)可。結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。

描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。

現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢？依然是因?yàn)闀r(shí)代發(fā)展與生活方式的變遷：

• 即便是PC或Mac用戶，調(diào)查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；
• 臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
• 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別；
• 結(jié)合自身產(chǎn)品用戶訪問瀏覽器分辨率；
• 鼠標(biāo)、觸屏、筆、攝像頭手勢(shì)……不可預(yù)期的操控方式正在不斷出現(xiàn)。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實(shí)現(xiàn)方式。

三、布局方式對(duì)比

靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點(diǎn)對(duì)比如下。

1. 靜態(tài)式布局

窗口縮小后內(nèi)容被遮擋時(shí)，拖動(dòng)滾動(dòng)條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個(gè)樣。移動(dòng)設(shè)備上則顯示太小或不全。

2. 自適應(yīng)布局

用自適應(yīng)技術(shù)（Adaptive），我們可以開發(fā)和提供不同的布局，來為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場景提供最好的體驗(yàn)。

分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，相當(dāng)于多個(gè)靜態(tài)布局組成的一個(gè)系列合集。

每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，頁面通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小。

當(dāng)可視窗口改變時(shí)，不會(huì)出現(xiàn)橫向滾動(dòng)條，UI、圖片、文字會(huì)自動(dòng)縮放，元素內(nèi)容、布局、交互方式基本不變。

3. 彈性布局

以百分比作為頁面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。

4. 流體式布局

屬于自適應(yīng)的一個(gè)子集，也是通過百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小。不同于百分比自適應(yīng)的是，隨著窗口大小的改變，頁面的布局會(huì)發(fā)生小的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)相補(bǔ)。

5. 響應(yīng)式布局

如果從廣義上講，響應(yīng)式布局實(shí)際上就是更好、更機(jī)智、更靈活地去實(shí)現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點(diǎn)講響應(yīng)式重在于「響應(yīng)」它會(huì)隨著設(shè)備屬性（如寬高）的變化。

頁面的設(shè)計(jì)和開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、CSS media query的使用等。

狹義上講，響應(yīng)式網(wǎng)頁設(shè)計(jì)指的是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

6. A+R混合模型布局

1）R和A上的區(qū)別

當(dāng)響應(yīng)式設(shè)計(jì)在基于預(yù)定義斷點(diǎn)之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。

他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當(dāng)采用響應(yīng)式思維開發(fā)時(shí)，HTML代碼在各種情況下都會(huì)一樣（除非你用JS移除某些DOM節(jié)點(diǎn)），而在自適應(yīng)開發(fā)中我們可能會(huì)有不一樣的代碼結(jié)構(gòu)和體驗(yàn)。

R采用流體＋斷點(diǎn)，在斷點(diǎn)之間，頁面依然會(huì)隨窗口大小自動(dòng)縮放（通過fluid grid），直到遇到斷點(diǎn)改變界面樣式布局甚至內(nèi)容。R一般來說需要在網(wǎng)頁設(shè)計(jì)初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。

A只在針對(duì)幾種分辨率（如320、480、760、960、1200、1600px）進(jìn)行優(yōu)化，在斷點(diǎn)之間的自動(dòng)過渡比較少。而A則采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。

兩種設(shè)計(jì)思維都是有效的，需衡量在項(xiàng)目中有多少組件、復(fù)雜性如何以及是否存在一種體驗(yàn)是適合所有用戶的。開發(fā)web應(yīng)用時(shí)經(jīng)常會(huì)用到響應(yīng)式設(shè)計(jì)，例如通過自適應(yīng)開發(fā)來構(gòu)建定制化體驗(yàn)。

兩種方法各有利弊，但是如果同時(shí)使用它們到底會(huì)得到什么呢？A+R模型結(jié)合了基于單個(gè)主要臨界點(diǎn)的自適應(yīng)和響應(yīng)式方法。

混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個(gè)布局中，頁面元素隨著窗口調(diào)整而自動(dòng)適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應(yīng)布局的融合。

自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。

很多時(shí)候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會(huì)講到）保持統(tǒng)一邏輯。否則頁面實(shí)現(xiàn)太過復(fù)雜也會(huì)影響整體體驗(yàn)和頁面性能。

一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。

2）選型

如何考慮實(shí)踐過程中的判斷呢？

一是看應(yīng)用場景，二是看如何設(shè)計(jì)“響應(yīng)式”方案。簡單、輕量的頁面直接用media query實(shí)現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。

但請(qǐng)注意響應(yīng)式不僅僅是響應(yīng)式布局。對(duì)于大型站簡單用media query是遠(yuǎn)遠(yuǎn)不夠的。

于是在同一個(gè)controller層上，識(shí)別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源，這也算是響應(yīng)式。開發(fā)及維護(hù)成本明顯提高。

當(dāng)各個(gè)版本間的差異很大時(shí)，維護(hù)成本很可能會(huì)大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層App化。

根據(jù)不同公司的技術(shù)特點(diǎn)，調(diào)整的成本也難講是否可行。對(duì)于大型站，分開做更清晰，同時(shí)用響應(yīng)式組件解決復(fù)用、功能同步的問題?？傊鶕?jù)場景響應(yīng)式可以從各種層面、各種粒度上做。這是現(xiàn)代web開發(fā)的特點(diǎn)。

建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過渡到平板端，不過渡到手機(jī)端）和開發(fā)一套響應(yīng)式手機(jī)端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）。

響應(yīng)式布局有可能造成冗余的代碼較多，對(duì)研發(fā)的要求也更高，比如如何更好地讓圖片、適配、UI動(dòng)畫自適應(yīng)各種布局。

大站還是要考慮數(shù)據(jù)計(jì)算和承載的問題，會(huì)對(duì)桌面和移動(dòng)端輸出不同數(shù)據(jù)，減輕壓力。

四、實(shí)踐與技巧

首先，我們需要了解幾種分辨率的差別。

PS：原生應(yīng)用可查詢橫縱兩個(gè)方向的像素密度，通常瀏覽器可查詢1個(gè)系統(tǒng)像素對(duì)應(yīng)多少物理像素。而設(shè)計(jì)角度通常需要參考的是所獲取的系統(tǒng)分辨率。

以一個(gè)SaaS類后臺(tái)產(chǎn)品為例。

對(duì)于基本流量來自Web端網(wǎng)頁的產(chǎn)品而言，需要了解當(dāng)下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計(jì)，如圖所示：

如上所述，選擇適配方式時(shí)，設(shè)計(jì)目標(biāo)為：區(qū)分web與pad端可共享的設(shè)計(jì)布局大于手機(jī)端，且產(chǎn)品規(guī)劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術(shù)維護(hù)成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來完成產(chǎn)品的跨端設(shè)計(jì)。

自適應(yīng)（A）方法能讓我們?cè)诓煌脑O(shè)備上有不同的體驗(yàn)、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點(diǎn)，根據(jù)全局統(tǒng)計(jì)信息定義，我們會(huì)得到一些相似處：

• 左側(cè)的可視區(qū)代表整個(gè)屏幕小于960px時(shí)的具體布局和內(nèi)容；
• 右側(cè)的可視區(qū)代表整個(gè)屏幕大于等于960px時(shí)的另一種布局。

在使用響應(yīng)式（R）技術(shù)時(shí)，我們可以利用主要臨界點(diǎn)創(chuàng)建兩個(gè)互不相同的體驗(yàn)情景。每種體驗(yàn)里，我們都可以在可用空間內(nèi)定義二級(jí)臨界點(diǎn)去調(diào)整布局。

通過結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗(yàn)和功能，作出兩種不同的情景設(shè)計(jì)。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。

這種設(shè)計(jì)方法要求設(shè)計(jì)師真正了解他們想要提供的體驗(yàn)，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動(dòng)設(shè)備上運(yùn)行的大型APP。就像你看到的，你的產(chǎn)品將具有很強(qiáng)的靈活性，但同時(shí)也很復(fù)雜。

因?yàn)槟阋幚聿煌拇a庫和環(huán)境（非強(qiáng)制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動(dòng)網(wǎng)站上。如果你在移動(dòng)設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動(dòng)用戶的期望來檢驗(yàn)它們是如何改變的用戶體驗(yàn)的。

五、其他輔助手段——柵格

柵格系統(tǒng)可以幫助我們?cè)O(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。對(duì)于簡化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項(xiàng)十分有效的輔助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于對(duì)齊內(nèi)容。

其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白，有助于分隔內(nèi)容。

2. 頁面邊距（Side Margins）

頁邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個(gè)屏幕尺寸的最小呼吸空間。

3. 列結(jié)構(gòu)

用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。

8、12、16和20是響應(yīng)式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對(duì)產(chǎn)品的設(shè)計(jì)要求。

12列結(jié)構(gòu)是相對(duì)靈活的。它可以進(jìn)一步細(xì)分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計(jì)系統(tǒng)采用來24列的形式，如Ant-D。

4. 斷點(diǎn)

是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點(diǎn)。

在這個(gè)范圍內(nèi)，布局會(huì)根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。

5. 網(wǎng)格規(guī)則

列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應(yīng)該先定義好柵格的原子單位。“網(wǎng)紅款”8點(diǎn)網(wǎng)格指的是設(shè)計(jì)頁面時(shí)，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。

產(chǎn)品中各類元素應(yīng)該遵循這個(gè)倍數(shù)原則（圖標(biāo)、組件大小等），不同的設(shè)計(jì)系統(tǒng)根據(jù)自身需求，設(shè)定這個(gè)規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。

6. 流體柵格與混合柵格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長或收縮以適應(yīng)可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對(duì)齊。頁眉、頁腳、出血都是一些常見的例子。

如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個(gè)固定柵格就會(huì)轉(zhuǎn)變成一個(gè)適應(yīng)屏幕可用空間的流動(dòng)?xùn)鸥?，以充分適應(yīng)內(nèi)容。

六、結(jié)語

設(shè)計(jì)需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點(diǎn)，進(jìn)行設(shè)計(jì)方案評(píng)估?？山柚氖侄斡袆h格、網(wǎng)格規(guī)則等。設(shè)計(jì)斷點(diǎn)規(guī)則時(shí)，需關(guān)注設(shè)備的常見系統(tǒng)分辨率。

移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應(yīng)式設(shè)計(jì)來解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。

但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)或者使用A+R的模型，在尋求合適的過程中，關(guān)注技術(shù)的革新。

A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個(gè)問題而生，是同一種思想的延伸。

作者：神樂、沙拉；公眾號(hào)：酷家樂用戶體驗(yàn)設(shè)計(jì)

本文由 @酷家樂用戶體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

企業(yè)網(wǎng)站提起HTML5大家都不陌生，作為一個(gè)新興的前端開發(fā)語言，HTML5已經(jīng)被大量應(yīng)用到各個(gè)領(lǐng)域，通過HTML5技術(shù)制作完成的網(wǎng)頁，可以是單純針對(duì)PC端，也已單獨(dú)適配移動(dòng)端，更能做成時(shí)下最流行的響應(yīng)式網(wǎng)站，也就是可以根據(jù)訪問設(shè)備的不同，自動(dòng)適應(yīng)屏幕的寬度來改變頁面中的元素樣式，鄭州建站網(wǎng)通過頁面中的必要元素標(biāo)簽，為大家講解HTML5網(wǎng)站建設(shè)的解決方案。

第一點(diǎn)：網(wǎng)站頭部設(shè)計(jì)
網(wǎng)站頭部標(biāo)簽的作用是在頁面的開端加入一個(gè)用以介紹整個(gè)頁面內(nèi)容的信息容器，一般網(wǎng)頁的名稱、簡介內(nèi)容、關(guān)鍵詞、版權(quán)信息等元素均會(huì)出現(xiàn)了網(wǎng)頁頭部，技術(shù)層面上，在網(wǎng)頁頭部還要表示出該頁面采用的制作語言，例如是HTML5還是較為陳舊的HTML4，目的是讓訪問端的瀏覽器使用與之對(duì)應(yīng)的頁面渲染方式。

第二點(diǎn)：網(wǎng)站導(dǎo)航欄的設(shè)計(jì)
網(wǎng)站的導(dǎo)航元素作用就是承載了對(duì)于訪客的瀏覽指導(dǎo)作用，導(dǎo)航中的內(nèi)容是直接循環(huán)于網(wǎng)站的一級(jí)欄目，當(dāng)然也有特例，在導(dǎo)航中出現(xiàn)的鏈接內(nèi)容只是整個(gè)頁面中所有鏈接的一小部分，但在設(shè)計(jì)角度上，導(dǎo)航中出現(xiàn)的內(nèi)容應(yīng)是整個(gè)網(wǎng)站中權(quán)重最高的。

第三點(diǎn)：網(wǎng)站的文章內(nèi)容設(shè)計(jì)
網(wǎng)站的文章標(biāo)簽承載了整個(gè)網(wǎng)頁中最重要的內(nèi)容傳遞作用，頁面中的主要信息均會(huì)在此展示，當(dāng)然內(nèi)容不僅限于文章，也有可能是圖集、圖文或視頻等，對(duì)于該部分的元素，HTML5也增加可用標(biāo)簽，意指讓頁面內(nèi)容更加合理，其中就包括下面內(nèi)容中會(huì)提到的部件和側(cè)邊兩個(gè)元素標(biāo)簽。

第四點(diǎn)：網(wǎng)頁中小部件的使用
與我們更加熟悉的div標(biāo)簽相比，部件標(biāo)簽(section)對(duì)于瀏覽器和搜索引擎來說是具有指導(dǎo)意義的，一般情況下會(huì)用于文章內(nèi)容中的標(biāo)題、編號(hào)等內(nèi)容，最大的好處就是，讓整個(gè)頁面中的內(nèi)容排列的更加有序，邏輯清晰。

第五點(diǎn)：網(wǎng)頁布局的側(cè)邊設(shè)計(jì)
側(cè)邊標(biāo)簽中的內(nèi)容并不是整個(gè)頁面中的主題，而是對(duì)主體內(nèi)容起到補(bǔ)充或解釋說明的作用，在HTML5語言廣泛應(yīng)用之前，對(duì)于頁面中此類元素，不同的前端工程師在標(biāo)簽的使用上有著不同的習(xí)慣，基于HTML5開發(fā)的樣式中，此類情況得到了合理的統(tǒng)一。

第六點(diǎn)：網(wǎng)站底部設(shè)計(jì)
此元素的內(nèi)容是包含更多關(guān)于他的父元素的內(nèi)容。footer置于body之后將可以提供有關(guān)該頁面的其他的信息內(nèi)容。例如網(wǎng)站建設(shè)著的一些信息，相關(guān)文章的鏈接或者版權(quán)信息等等。此元素也可以被被應(yīng)用于body之中不同的段中，可以給頁面中不同段一些特定的其他信息。底部元素作用是將那些不適合在body中出現(xiàn)的內(nèi)容展示在頁面上，例如文章內(nèi)容的版權(quán)信息、頁面底部的內(nèi)容導(dǎo)航、網(wǎng)站的ICP備案信息以及友情鏈接信息等，在HTML5版本之上，也增加了在底部內(nèi)容中專用的標(biāo)簽，供開發(fā)者使用。

月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)上發(fā)布了HTML5中國產(chǎn)業(yè)聯(lián)盟合作發(fā)展倡議書。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

千龍網(wǎng)北京7月4日訊（實(shí)習(xí)記者 宋鵬飛）HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)日前在北京JW萬豪酒店舉行，與會(huì)嘉賓就“HTML5未來移動(dòng)應(yīng)用生態(tài)的探索之路”主題分別做了主旨演講。會(huì)后共同發(fā)布了HTML5中國產(chǎn)業(yè)聯(lián)盟合作發(fā)展倡議書。

據(jù)悉，本次活動(dòng)同期舉行了2015 HTML5游戲開發(fā)者大會(huì)。

7月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)上云適配聯(lián)合創(chuàng)始人高婧做了關(guān)于“HTML5在企業(yè)級(jí)應(yīng)用中的價(jià)值”的主旨演講。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

7月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)現(xiàn)場擠滿了媒體記者與業(yè)內(nèi)人士。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

7月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)上DCLOUD CEO王安做了“HTML5終將顛覆原生生態(tài)系統(tǒng)”的主旨演講。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

7月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)現(xiàn)場擠滿了前來參會(huì)的業(yè)內(nèi)人士。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

7月4日，HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)上，觀眾在展臺(tái)前駐足體驗(yàn)新科技產(chǎn)品。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝

7月4日，與HTML5移動(dòng)應(yīng)用生態(tài)峰會(huì)同時(shí)進(jìn)行了2015 HTML5游戲開發(fā)者大會(huì)。千龍網(wǎng)實(shí)習(xí)記者 宋鵬飛攝