App下載
話題 首頁 > CSS3 教程 > CSS3 教程話題列表 > 詳情

DIV+CSS 是什么意思?DIV+CSS有什么優(yōu)點與缺點?

精華
chenjinjun1 2016-11-15 11:48:11 瀏覽(5635) 回復(4) 贊(0)
初學[CSS](http://o2fo.com/css),在[W3Cschool.cn](http://o2fo.com)官方交流群里面,常??吹酱蠹矣懻揫DIV+CSS](http://o2fo.com/search?w=DIV%EF%BC%8BCSS),但是不知道是什么意思。我自己[百度](http://o2fo.com/ycx23r)了很久,有說DIV就是取代`<table>`的,還有說[搜索引擎](http://o2fo.com/seoer)喜歡DIV,反正很多。能不能簡單的說一下DIV+CSS(或者DIV)是什么意思?為什么用它?為什么不用`<table>`?有什么優(yōu)/缺點?
css css3

回答(4)

娃娃臉呦 精華 2016-11-15

一、什么是DIV+CSS?


字面意思:DIV+CSS就是,網頁HTML代碼主要使用DIV將內容模塊化,用CSS控制其顯示效果。 如何理解:DIV全稱division(區(qū)分) <div>標簽是區(qū)隔標簽,表示一塊可顯示的區(qū)域,用于擺放位置,屬于塊元素。而“div+css”是一種我們想當然的叫法,認為主要框架是div搭建的,但是實際上根據web標準(詳細可在W3Cschool“web標準”),標準界面是由XHTML+CSS組成的。

簡單來說:DIV是框架,CSS是樣式,用來裝飾框架。( 網頁布局就像蓋房子,div負責把這棟房子蓋起來,而css負責告訴他怎么蓋! )

網頁布局就像蓋房子

二、DIV+CSS的優(yōu)點和缺點


好處很多,從前端層面來說,大大減輕工作量,提高工作效率。 從界面布局來將,能夠更準確的將頁面元素定位,且保證在不同的環(huán)境下獲得基本一致的效果。 還有比如你說的SEO方面的原因,實際上這個應該更多指的語意化標簽。

Div+CSS的優(yōu)點:

1、因為采用CSS布局,不象表格布局充滿各種各樣的屬性和數字,而且很多css文件通常是共用的,從而大大縮減頁面代碼,提高頁面瀏覽速度。

2、結構清晰,對搜索引擎更加友好。更容易被搜索引擎收錄,具備搜索引擎SEO的先天條件,配合優(yōu)秀的內容和一些SEO處理,可以獲得更好的網站排名。

3、兼容性更好,符合web標準規(guī)范的發(fā)展趨勢,可以在幾乎所有的瀏覽器上都可以使用,不會出現在不同的瀏覽器中效果差距很大的情況。

4、縮短改版時間,因為網站的布局都是通過外部的css文件來控制,只要簡單的修改幾個CSS文件就可以將許多網頁的風格格式同時更新,不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制,只要修改這個CSS文件中相應的行,那么整個站點的所有頁面都會隨之發(fā)生變動。

5、強大的字體控制和排版能力,CSS控制字體的能力比糟糕的FONT標簽好多了,CSS不再需要用FONT標簽或者透明的1px圖片來控制標題、改變字體顏色、字體樣式等等。

6、提高易用性,使用CSS可以結構化HTML,例如:p標簽只用來控制段落,h1-h6標簽只用來控制標題,table標簽只用來表現格式化的數據等等。你可以增加更多的用戶而不需要建立獨立的版本。

7、更好的擴展性。你的設計不僅僅用于web瀏覽器,也可以發(fā)布在其他設備上,比如PowerPoint等。

8、更靈活控制頁面布局,通常頁面的下載是按照代碼的排列順序,而表格布局代碼的排列代表從上向下,從左到右,無法改變。而通過CSS控制,您可以任意改變代碼的排列順序,比如將重要的右邊內容先加載出來。

9、表現和內容相分離,干凈利落,將設計部分剝離出來放在一個獨立樣式文件中,而網頁主要來放置您的內容,你可以減少未來網頁無效的可能。

10、更方便搜索引擎收錄,并獲得更高的評價。用只包含結構化內容的HTML代替嵌套的標簽,主次分明,搜索引擎將更有效地搜索到你的內容,并可能給你一個較高的評價(ranking)。

11、Table表格布局靈活性不大,你只能遵循 table trtd 的格式。而div你可以 div ulli 也可以 ol li 還可以 ul li...... 12、Table表格布局中,垃圾代碼會很多,一些修飾的樣式及布局的代碼混合一起,很不利于直觀。而Div 更能體現樣式和結構相分離,結構的重構性強。

13.以前一些必須通過圖片轉換實現的功能,現在只要用CSS就可以輕松實現,從而更快地下載頁面。

DIV+CSS的缺點:

1、CSS網站制作的設計元素通常放在1個外部文件中,或幾個文件,有可能相當復雜,甚至比較龐大,如果CSS文件調用出現異常,那么整個網站將變得慘不忍睹。

2、DIV+CSS盡管不是高不可及,但至少要比表格定位復雜的多,即使對于網站設計高手也很容易出現問題,更不要說初學者了。

3、雖然說DIV+CSS解決了大部分瀏覽器兼容問題,但是也有在部分瀏覽器中使用出現異常,比如火狐瀏覽器,在IE中顯示正常的頁面,到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題,但是可以說在目前來看,DIV+CSS還沒有實現所有瀏覽器的統一兼容。

4、DIV+CSS對搜索引擎優(yōu)化與否,取決于網頁設計的專業(yè)水平,而不是DIV+CSS本身。DIV+CSS網頁設計并不能保證網頁對搜索引擎的優(yōu)化,甚至不能保證一定比HTML網站有更簡潔的代碼設計,何況搜索引擎對于網頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量,這就是為什么很多傳統表格布局制作的網站在搜索結果中的排序靠前,而很多使用CSS及web標準制作的網頁排名依然靠后的原因。因為對于搜索引擎而言,網站結構、內容、相關網站鏈接等因素始終是網站優(yōu)化最重要的指標。

一筆荒蕪 2018-05-31

好慢呀,空空如也,半天不來大神解決,大佬在哪啦

1144100656 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

1152696398 2018-05-31

剛學習程序,過來學習學習!!!!...

要回復,請先登錄 或者注冊