歌于今年9月發布的Chrome 53起，將屏蔽90%的Flash內容，年底還會把HTML5作為網頁內容標準。這對Flash的一紙聲明，仿佛一下將昔日輝煌的Flash打入了冷宮。國內BAT各大互聯網巨頭也悄悄在HTML5上布局，關于BAT三巨頭 (百度、阿里巴巴、騰訊)，已經是是中國互聯網時代的一個符號。

而HTMl5到底有什么本事?能讓他們心動?

HTML5又叫超文本標記語言，是目前最主流的建站技術，配合DIV+CSS可以完全替代以往那種FLASH網站，頁面高端大氣，用戶體驗強，關鍵對搜索引擎還非常友好。

HTML5的優勢主要體現在三大方面。

1、替代Flash

在以前，Flash網站被定義為高端網站，因為它可以播放視頻和動畫，但是就Flash本身而言，這項技術的革新速度非常緩慢，而且放在網站里，會讓網站打開速度變慢，雖然酷炫，但是用戶體驗并不好，而且現在的移動設備又更新的非常快，很多人摒棄了電腦用手機平板，因此很多設備都無法發揮Flash的優點，于是就出現了網站效能的延遲或是系統錯誤。

相比而言html5技術在兼容上效果要好很多，不僅替代了Flash，讓靜態的頁面動起來，網站打開速度也不慢，還可以給站點帶來更多的多媒體元素(視頻和音頻)，直接播放不需要插件。

在對搜索引擎方面，flash不利于搜索引擎收錄，而html5對搜索引擎卻非常友好。

2、手機兼容更強

現在移動設備是不可忽視的，人們對于手機的依賴程度已經到了一個非常高的階段，手機的功能也越來越全面，甚至有超越電腦的趨勢。如果在建設網站的過程中要針對電腦和手機各自建設不同的網站，這樣不僅浪費時間金錢，還增加了操作難度。

HTML5網站建設增強了移動端設備的兼容，使用這項技術建設的網站就不用刻意去修改自己的網站了。這種技術建設成功的網站在手機等移動設備上也能很好的顯示出來，所以這項技術又得到了人們的認可。

3、對搜索引擎友好

HTML5建站淘汰了一些不適用的標簽，這樣就使網頁編寫代碼更為規范，同時也簡潔清晰了很多，于是對搜索引擎更加友好，便于后期網站做推廣和優化，這對企業來說是一個非常好的信息。

html5雖然頁面看起來簡潔，卻不失大氣，很符合用戶的瀏覽習慣，一眼就能看到重點。

HTML5是開放的，很多相關API、JavaScript甚至開發引擎都開源，基于Web網站為主，國內的嗨創(www.h5create.com)，是由北京軍朗軟件科技有限公司自主研發的一款H5自助建站工具，以新秀之力，把視線拉回與技術開發息息相關的企業網站建設,為滿足企業品牌宣傳、產品展示、營銷推廣、個人形象展示等需求，實現企業建站無門檻，提供完全可視化的操作界面，采用拖拽建站的形式，讓企業實現0代碼的自助建站。無需下載插件，就能提供很好的交互和本地加載，更能為用戶提供流暢的體驗。

谷歌強調，當完成這一過渡轉型后，終端用戶將會明顯感覺到大量網站的響應速度及效率的提升，從今年12月開始會把HTML5設定為Chrome 55的默認標準。

在“落后就要挨打”的慘痛教訓中，互聯網大佬轉身投資跟隨技術趨勢是自然的，還在等什么，你的網站也該換了吧?

們已經學了這么久，不知道大家對于HTML標簽及屬性有沒有初步的認識了呢，我們現在是不是特別想做一個自己的網頁呢？這一部分我們給大家講完CSS中的布局屬性就可以完成一個簡單的網頁了。下面我們開始講解吧！

1、 文檔流

2、 布局屬性

3、 頁面結構

4、 頁面布局

5、 HTML5新增標簽

6、 頁面制作

首先我們先了解一下什么是文檔流。

一、 文檔流

文檔流分為普通文檔流和脫離文檔流。

普通文檔流：元素從上至下排列的順序。

脫離文檔流：元素從正常的排列順序被抽離。

我們先來看一下普通文檔流，看一下標簽是怎樣在瀏覽器中的顯示排列的。

代碼：

顯示效果：

我們看到這就是普通文檔流，那個標簽先寫的，就在瀏覽器的最開始位置顯示，后寫的標簽，就在后面依次顯示。那脫離文檔流就是讓標簽通過某種CSS屬性，讓其不是依次顯示在后面，而是按照我們的意思在瀏覽器中顯示。那這種脫離文檔流的方式有幾種呢？一種就是使用布局屬性的浮動屬性（float），一種就是定位屬性（position）。今天我們重點給大家講解的就是布局屬性。

二、 布局屬性（float 浮動）

首先我們先看一下float的使用。

1. 沒有設置浮動的兩個元素，也就是正常的文檔流。

代碼：

顯示效果：

2. 設置第一個元素左浮動

代碼：

顯示效果

設置了第一個元素左浮動后，就會改變了元素的排列順序了，left的這個元素就浮動了最上層，他的空間就被right這個元素占領了。大家很明顯的看到了right的這個元素的高度由原來的200像素變成了100像素，其中有100像素是在left這個元素的下面了。這種情況一般應用在以下場景。

網頁中的圖文混排的地方。

代碼：

顯示效果：

3. 第一個元素設置右浮動時

代碼：

顯示效果：

大家看，設置了一個元素右浮動時，left這個元素就漂浮在了右側，而他的位置被right這個元素占領了。這種情況應用在以下場景。

文字顯示在右側。這種情況通常使用一個元素右浮動。

顯示效果

4. 兩個元素同時左浮動。

代碼：

頁面顯示效果

設置兩個元素同時左浮動，通常應用在頁面布局。及導航的制作。

5. 一個元素左浮動一個元素右浮動

代碼：

顯示效果

這種情況也是常用于布局，主要運用于左右兩列的布局，或者三列的布局。

6. 兩個元素同時設置右浮動

代碼：

顯示效果

大家看到了沒有，像這種情況元素的位置都顛倒了，所以像這種情部幾乎不使用。

總結：浮動在我們在制作網頁過種中使用的頻率比較高。但是浮動還會引起種問題（后續會講浮動引起的問題），所以我們在使用浮動的時候要注意，盡量減少使用浮動。浮動可以使標簽在左側或者在右側顯示，主要運用于布局、導航的制作等。另外大家還要注意另外一個問題：在布局時，浮動的元素的后面的元素不需要占領前面的元素的位置應該怎么辦呢？（但值得注意的是浮動影響后面的元素，但是元素的內容不受影響，還是能顯示出來的）先看代碼及效果。

代碼：

顯示效果

通過代碼和效果，大家看到了，第三個元素占領了前面浮動元素的空間，如果不需占領怎么辦呢？我們就想到了用清除浮動就可以了。明天我們將繼續為大家講解清除浮動。