當前主流HTML5的網頁是否依然是以DIV + CSS為基礎開發的？

01-14

我是web前端的初學者，希望能夠在學習中跟上主流，目前對於HTML和CSS都學習了語法，但考慮到在實際開發一個網站是如何通過這兩者來進行的，有些不知所措。在網上搜了下大概都是講通過DIV + CSS來布局網頁的，但這個作為以往網頁的開發手段，和現在表現內容更加生動豐富的HTML5網站，這個方法是否依然是主要的。

首先直接回答題主的問題
」當前主流HTML5的網頁是否依然是以DIV + CSS為基礎開發的？「
這句話本身
大體上是正確的但是又不夠嚴謹

我們現在通過瀏覽器打開所看到的頁面
基本組成元素我們稱之為HTML，也就是網站的結構層，而div只是HTML的一個比較重要的元素而已
我們把一個站點比喻成一個人體吧
那HTML就好比人體的骨架

而CSS呢
就相當於人類的皮膚等起到一個渲染裝飾的作用負責修飾人的外觀
比如控制你這個人是高鼻子還是塌鼻子
雙眼皮還是單眼皮 A cup還是E cup （害羞）

最後還有一個建設網站非常重要的語言是javascript
它是讓網站」動起來「必要的組成部分
它的作用是相當於控制人類微笑、擁抱、接吻以及pia pia pia等行為的咯~~（捂臉）

雖然大家都是用的都是HTML+CSS+javascript來實現網站的前端部分
但是我們可以用語義化標籤來實現更好的SEO
可以用彈性布局、響應式布局來實現不同屏幕解析度給用戶展示更加友好的體驗效果
可以用requirejs、seajs來自動處理javascript模塊的載入依賴
可以用less、sass來提高css的寫作效率
可以用gulp+nodejs實現項目的構建、測試、打包部署等工作

同樣是漢字
有的人只能拿來應付考試寫篇水水的作文比如說答主自己
有的人卻能寫出來精彩紛呈小說比如說天龍八部、鹿鼎記、神鵰俠侶比如說金庸老前輩

同樣是HTML+CSS+javascript
有的人只是用它們來做了一個只有幾個頁面的普通企業站裝飾門面
有的人拿它們來做了一個叫做阿里巴巴的平台小夥伴們雙十一雙十二在上面刷得不亦樂乎

我覺得題主是想做後者吧
那麼咱一起努力咯

最最後歡迎加入我們的萌萌噠前端人3 前面都滿人了囧群號 639111724 大家一起交流吧^_^

「在網上搜了下大概都是講通過DIV + CSS來布局網頁的……」

你先換個搜索引擎再說。

HTML5定義：能向後兼容目前UA處理內容的方式。為了讓語言更簡單，一些老的元素和Attribute會被捨棄。比如一些純粹用於展現的元素（如big）或Attribute被捨棄，因為他們更適合用CSS來處理。

但UA依然可以支持老舊的屬性和元素。這就是為什麼HTML5標準清楚地劃分了給開發的要求和給UA的要求。比如，開發者不應當使用plaintext元素，但UA需要兼容plaintext元素。

既然HTML5已區分對UA和對開發者的要求，再也不需將一些特性標記為deprecated了。

舉個例子：

div+css一定會學習塊狀元素和行內元素，但這兩個HTML元素概念從字面上卻和CSS樣式有著很深的聯繫，這種聯繫有悖於Web規範中一直倡導的表現和樣式分離這種核心理念。

HTML5新規範中，已經淡化了元素的這兩種分類，取而代之的方案是更具有語義的HTML元素分類方式，如下：

元數據式內容（Metadata content）：&、&、&、&...
流式內容（Flow content）：&、&...[註：1]
章節式內容：&、&、&以及&
標題式內容：&~&、&
段落式內容：&、&...[註：2]
嵌入式內容：&、&、&、&、&、&...
互動式內容：&、&、&、&...

結論：

前端開發者在HTML5的開發中還繼續使用css進行布局，但是更應該結合實際的頁面的設計有意識的使用HTML5規範中的內容模型，並通過這些更具有語義的內容模型進行頁面的normal flow設計。

詳細的內容請看這裡HTML5 Differences from HTML4

另外w3c上這篇文章也很好《HTML5 Differences from HTML4》連接--&>HTML5 Differences from HTML4

注1：這個分類基本包括了HTML4.01中的塊狀元素和行內元素。

注2：基本上等同於HTML4.01中行內元素的範圍。

書名有「DIV+CSS」的一律不要買、不要看！

DIV+CSS 這個說法是外行話，有類似字眼的教程、書不要看不要買，有這樣說法的面試官的公司不要去。

這麼理解吧，傳統的web架構

css為皮膚，div則為真皮，js組成簡單的肌肉和血管，後端各種p才是大腦

html5時代，css和div依然是皮膚和真皮，但是皮膚比以前絢麗多彩了，也可以對外界交互產生簡單的應激反應。。。

js可以組成更複雜肌肉，能做的動作也會增多，而且更加規範

肌肉與大腦的聯動性也增加不少

從全靠大腦的時代，變成皮膚肌肉大腦協同的時代的。。。呵呵

雖然大家都是這麼用的，但是你出去千萬不要這麼說哦，至少幾個詞要隨口能說出來，例如語義化標籤，彈性布局，響應式布局，模塊化，原子化，less,sass,組件化開發。

恩，然後回家後繼續用div+css開發就行了。

不是哦。。是基於HTML5+CSS+Javascript開發的。。。

題主的問題是還沒有對當前web技術建立一個比較系統的認識，不知道自己剛剛花時間學過的東西如何和平時看到的網頁聯繫在一起。所以當前來自於 @席銘的回答應該說完全不在點子上。猜測題主應該也不是來自於計算機或者工科背景。

自web2.0以來一個網站更多的是一個軟體的載體，前端很多「豐富的表現內容」其實來自於javascript，而非h5/css。h5/css更多的屬於定義「看上去是什麼樣」的範疇。交互上的豐富感主要來自於javascript。學習H5/CSS是有必要的，但是對於現在的前端工程師來說，H5/CSS都是末節，大部分的工作都集中在javascript相關的知識概念上。

P.S.現在前端熱度提升，對於有編程背景的朋友們，理解前端是個順向的事情，而對於很多從美工/設計等方向過來的朋友們，了解前端屬於逆向，建議從一點基本的編程知識開始了解，不要急於求成。

各種比較新的教程都強調使用語意話標籤，直到使用了bootstrap用了一堆div。規範歸規範，有時候結果更重要，感覺過度在意規範，效率會耗費過多的精力，做出符合需求的東西最重要。

說DIV+CSS確實是對前端工程師們的侮辱（主要是那些垃圾書）

很老的那些網站全站基本用table來布局，現在這個階段div居多，html5標籤普及開來之後一些更友好的標籤也在相繼應用於線上產品（不兼容低端瀏覽器）

html標籤是網站的骨架，css是外面的衣服，js（javascript）則用來響應與外界的交互。

初學的話，你右鍵看一下知乎源碼，照著他的結構來沒錯的，等你學到一定程度自然就會懂了。

是，但不僅限於。

前端（HTML5）技術棧 = HTML（包括新的HTML5標籤） + CSS（包括CSS3） + DOM + Javascript APIs (Web Workers/Web Socket/Video/Canvas..)

首先要了解語境和歷史。說div+css布局主要是針對（很久）之前流行的table布局，現在網頁比那時候也複雜多了，不再是div和table的區別那麼簡單了。不過也可以說現在還是div+css布局，只是css複雜了很多，有時還需要js輔助。

DIV+CSS？！我也學前端有半年多了，還好沒聽過。。。一般都是html+css，不過html5和css3有些瀏覽器不兼容，不過時代更新，現在瀏覽器都在跪舔html5