div css的布局對比table布局有哪些優(yōu)點

發(fā)布時間：2022-04-26 10:06:45 來源：億速云閱讀：129 作者：zzz 欄目：web開發(fā)

本篇內(nèi)容主要講解“div css的布局對比table布局有哪些優(yōu)點”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“div css的布局對比table布局有哪些優(yōu)點”吧!

優(yōu)點：1、符合W3C標(biāo)準(zhǔn)，可保證網(wǎng)站不會因為網(wǎng)絡(luò)應(yīng)用的升級而被淘汰；2、實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離，有利于文檔的語義結(jié)構(gòu)，更容易維護(hù)和更改；3、頁面體積變小，頁面載入速度變快；4、網(wǎng)頁代碼更簡潔，正文更為突出明顯，便于被搜索引擎采集收錄。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

tableE布局是WEB早期CSS不存在的時候興起的，是對TABLE標(biāo)簽的不正規(guī)使用，Table標(biāo)簽就是表格，是用來顯示數(shù)據(jù)的，而不是用來布局網(wǎng)頁的，雖然它有時候布局網(wǎng)頁很簡單?，F(xiàn)在絕大多數(shù)的網(wǎng)站都是用DIV+CSS布局，現(xiàn)在的網(wǎng)頁越來越傾向于使用DIV的方法來布局網(wǎng)頁了。

DIV+CSS是WEB設(shè)計標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

div css布局較table布局的優(yōu)勢

1、符合W3C標(biāo)準(zhǔn)。

這保證您的網(wǎng)站不會因為將來網(wǎng)絡(luò)應(yīng)用的升級而被淘汰。

2、網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離

內(nèi)容、樣式和行為分離有利于文檔的語義結(jié)構(gòu)，更容易維護(hù)和更改。語義化的結(jié)構(gòu)有什么好處，簡單說就是有利于搜索引擎爬蟲更好的理解我們的網(wǎng)頁，利于SEO優(yōu)化。

內(nèi)容、樣式和行為分離如何分離我們看下面一個例子：

內(nèi)容，樣式和行為混合寫法

div css的布局對比table布局有哪些優(yōu)點

上面可以看出，HTML內(nèi)容、css樣式和javascript行為是混在一起的。下面將它們分離

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web前端之內(nèi)容、樣式和行為分離</title>
</head>
<!-- css樣式 -->
<style>
div {
border: 1px solid #ccc;
}
ul li {
cursor: pointer;
}
</style>
<!-- html內(nèi)容 -->
<body>
<div>
<ul>
<li>mounui.com</li>
<li>mounui.com</li>
<li>mounui.com</li>
</ul>
</div>
<!-- javascript行為 -->
<script>
var uls = document.getElementsByTagName('ul')[0];
uls.onclick = function(ev) {
var ev = ev || window.event; // 兼容IE瀏覽器
var uli = ev.srcElement || ev.target;
// 判斷事件源是不是li
if (uli.nodeName.toLowerCase() == 'li') {
window.location.href = 'http://mounui.com';
}
}
</script>
</body>
</html>

這樣將內(nèi)容、樣式和行為分離開了。最終項目中為了管理方便一般會把css和js單獨放到對應(yīng)的文件中然后加載進(jìn)來。

3、對瀏覽者和瀏覽器更具親和力。

由于CSS富含豐富的樣式，使頁面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形。這樣就支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是什么，您的網(wǎng)站都能很好的兼容。

4、使頁面載入得更快（最重要的）（在IE中要將整個table加載完了才顯示內(nèi)容）。

頁面體積變小，瀏覽速度變快，由于將大部分頁面代碼寫在了CSS當(dāng)中，使得頁面體積容量變得更小。相對于表格嵌套的方式，DIV+CSS將頁面獨立成更多的區(qū)域，在打開頁面的時候，逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里，使得加載速度很慢。

5、保持視覺的一致性。

以往表格嵌套的制作方法，會使得頁面與頁面，或者區(qū)域與區(qū)域之間的顯示效果會有偏差。而使用DIV+CSS的制作方法，將所有頁面，或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。

6、修改設(shè)計時更有效率。

由于使用了DIV+CSS制作方法，使內(nèi)容和結(jié)構(gòu)分離，在修改頁面的時候更加容易省時。根據(jù)區(qū)域內(nèi)容標(biāo)記，到CSS里找到相應(yīng)的ID，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式，在團(tuán)隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

7、搜索引擎更加友好。

相對與傳統(tǒng)的table，采用DIV+CSS技術(shù)的網(wǎng)頁，由于將大部分的HTML代碼和內(nèi)容樣式寫入了CSS文件中，這就使得網(wǎng)頁中代碼更加簡潔，正文部分更為突出明顯，便于被搜索引擎采集收錄。

擴(kuò)展知識：div css布局的缺點

每個div容器都需要定義css樣式來控制，制作過程相比table方式要復(fù)雜。

到此，相信大家對“div css的布局對比table布局有哪些優(yōu)點”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

div css的布局對比table布局有哪些優(yōu)點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽