【云駐共創】-如何開發H5頁面

什么是H5

H5是HTML5的簡稱，HTML5是定義HTML標準的最新的版本。這個術語表示兩個不同的概念：

1、 一個新版本的HTML語言，具有新的元素，屬性和行為

2、 有更大的技術集，允許更多樣化和強大的網站和應用程序，

3、 HTML5 ≈HTML+CSS+JS

相較于H4，H5最主要的變化還是在于它的語義化標簽，在H5之前，對于頁面的開發，開發人員經常使用類似與“id=‘footer’”來標記一些特定的頁面內容，比如頁面頭部、章節、頁腳等等。即一個‘div’打天下，但這樣存在的一個明顯的不好的地方就是，這些div沒有實際的意義。而在H5中，引入的大量的語義化標簽，明顯的提升了網頁的質量與語義，比如、、等，在平時的開發過程中，應盡量使用這些語義化的標簽，來提升我們編寫的網頁。

H5有什么優勢？

H5開發主要有以下優勢：

1、 跨平臺：唯一一個通吃各個主流平臺（PC\MAC\安卓、蘋果等）的跨平臺語言

2、 快速的迭代能力

3、 降低成本

4、 導流入口多

5、 分發效率高

開發頁面中用到的主要知識點有哪些？

知識點1：HTML+CSS+JS三大件各自的作用

在開發H5頁面中，常用到的基本就是HTML+CSS+JS這三大件，如果把開發一個整體的頁面比作生產一輛汽車的話，那么HTML可以抽象的理解成搭建汽車的框架，就是把車大體的樣子搭建出來，這個時候的"車子"或者頁面會很粗糙，一眼看去可能就是一堆鐵盒子按照某個藝術生的構想隨意的擺放在哪里，搭建成了一個想想中的作品。CSS 則可以看成是把這輛汽車進行了細致的雕琢，讓其有了華麗的外觀，滿足了用戶的審美需求。但現在的"汽車"充其量就是一輛車模，靜靜的擺放在那里。JS 的加入，則是給這輛汽車加入的動力系統，使車輛有了動態的美，滿足了功能性的需求。概括成一句話就是：HTML搭建頁面框架，CSS美化頁面呈現（CSS也可以完成動態效果），JS是頁面加入動態效果。

知識點2：拼接技術（CSS知識點）

拼接技術哪家強，。。。。。這里說的拼接技術，主要指的是頁面元素的布局。我們經常看到的頁面都是由多種元素按照特定的順序，固定到頁面的某個位置。這里的技術點主要涉及到的知識點就是"定位"，在不使用框架的情況下，"定位"這個知識點我個人認為是搭建頁面時候的最重要的知識點，沒有之一。

談及定位，主要分為：浮動、相對定位和絕對定位。

浮動：元素脫離文檔流

相對定位：元素"影分身"，在元素原來的位置存在元素的占位影子，本身則可以根據left，right，top,bottom 來進行定位。參照物則是元素本身原來存在的位置。

絕對定位：元素脫離文檔流，本身根據left，right，top,bottom 來進行定位。這里需要注意的是絕對定位的元素的參照物是以開啟定位的最近的父元素為參照的。

知識點3：清除浮動

為什么要清除浮動？

這里所說的清除浮動，指的是清除浮動與浮動之間的影響。清除浮動主要為了解決父元素沒有設置高度，子元素在開啟浮動后無法正常的撐開父元素，造成高度塌陷。

例子：

我們發現：第二組中的第1個li，去貼靠第一組中的最后一個li了（我們本以為這些li會分成兩排）。

清除浮動

（1）overflow: hidden

（2）.clearfix 清除浮動寫在爸爸身上

.clearfix::after { content: ''; display: block; clear: both; } /* 兼容 IE */ .clearfix { zoom: 1; }

另外的圣杯布局和雙飛翼布局也需要深刻的了解，了解其原理思想，可以進一步提升對定位的理解。可以先了解雙飛翼布局，在了解圣杯布局。

知識點3：JS知識點

JS 的知識點很多，這里只提一個，輪播圖。

輪播圖使用的很廣泛，華為、京東、小米等官網都會見到，如何獨立的寫出一個輪播圖是H5開發需要必備的技能，當然后期接觸到框架后可能會簡單些，但是JS源生來寫輪播圖，對于前期學習JS的知識點是很有幫助的。也可以加深一些開發思想的理解，比如元素的轉綁。

如何用H5開發頁面呢？

怎么開發H5頁面，我個人的開發建議如下：

1、 整體處著眼。H5頁面的開發，通常會有一個設計稿，拿到設計稿后，我們首先需要確定的就是頁面的版心，即這個頁面的寬、高各是多少。明確了版心，我們后面開發的時候，就有了整體的參照。

2、 劃分頁面。根據頁面將頁面拆分劃分不同的模塊。一般劃分為：頭部、內容、頂部三大塊。有的頁面可能還有側邊欄、浮動欄等。然后在對每個模塊進行再次的劃分，例如頭部模塊（以下圖華為的classroom為例）通常可以劃分為：logo（下圖左側綠框）、導航欄（下圖中間綠框）、用戶信息（下圖右側綠框）等。

3、 模塊化開發。搭建框架，定位內容。以上圖頭部模塊為例，整個頭部模塊又劃分了3個區域，在開發的時候，可以使用外部元素包裹三個獨立的元素，這樣來搭建一個大體的框架。實例代碼：

其它區域的搭建基本上同頭部區域搭建的思路一致。都是對特定的模塊，劃分不同的區域，單獨搭建，最后在通過把各個模塊整體的組合起來，這樣就整體的搭建好了一個頁面。

以上是對于前端H5開發的知識點，只是講到了華為云課堂課程的冰上一角，鑒于文章的篇幅，這里不再過度的展開，如果你正在學習前端，有了一些基礎，沒有一個練手的項目或者想要對自己學的知識點沒有串成線，歡迎來華為云課堂來看看，也許這里的課程正是你想要的。課程地址：[地址鏈接]

查看活動詳情：https://bbs.huaweicloud.com/blogs/298594

HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。