前端设计（三）>>>>HTML 布局（div，span）

最新推荐文章于 2023-12-05 14:10:18 发布

Jocker.Dragon

最新推荐文章于 2023-12-05 14:10:18 发布

阅读量780

点赞数

分类专栏：前端文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43458720/article/details/104538157

版权

7 篇文章 0 订阅

订阅专栏

HTML 布局主要有两种：使用 div 元素的布局和使用 span 元素的布局，那么他们的优缺点是什么呢？下面我们将详细的进行介绍。

例子：

div 部分：

<body>

<div id="header">
    <h1>deepin国际社区</h1>
</div>

</body>

css 部分：

<style>

#header {
    background-color:black;
    color:red;
    text-align:center;
    padding:25px;
}
</style>

例子：

<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 元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。

优点：

符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
节省代宽，代码冗余度低。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

关注