==HTML 布局主要有两种:使用 div 元素的布局和使用 span 元素的布局,那么他们的优缺点是什么呢?下面我们将详细的进行介绍。==
使用 div 元素布局
例子:
div 部分:
<body>
<div id="header">
<h1>deepin国际社区</h1>
</div>
</body>
css 部分:
<style>
#header {
background-color:black;
color:red;
text-align:center;
padding:25px;
}
</style>
使用 table 元素布局
例子:
<body>
<table class="syl">
<tr>
<td>
deepin国际社区
</td>
</tr>
</table>
</body>
css 部分:
<style>
table.syl {
width:100%;
border:1px solid #d4d4d4;
}
table.syl td {
padding:10px;
width:20px;
}
</style>
table 元素布局:
优点:
理解比较简单。
不同的浏览器看到的效果一般相同。
缺点:
显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table 元素,代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。
div 元素布局:
优点:
符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便,内容和样式的分离,使页面和样式的调整变得更加方便。
节省代宽,代码冗余度低。
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
注:DIV+CSS 并不是要我们抛弃 table,因为 table 在显示数据时更加方便,因此我们要根据实际情况灵活应用。