基于DIV和CSS的布局结构（2）

基于DIV和CSS的布局结构（2）

2．使用语义化的标签及命名标识

在所有的结构中都应该使用具有语义的标签及命名标识，如，<h1>为标题、<p>为段落、<ul>为列表等。标识元素也应尽量使用如id=”header”、id=”footer”等易读懂的语义标识。下面的代码使用的就是具有语义的标签及命名标识。

	
<div?id="post">?<div?id="post">
	
<div>标题</div>?<h2>标题</h2>?
	
<div>内容</div>?<p>…内容</p>
	
</div>?</div>
	
坏的?好的

3．尽量减少使用DIV标记

和表结构一样，深度嵌套的DIV也会给编辑及调试带来麻烦，如少了一个结束</div>会使所有的结构混乱，所以应尽量少使用DIV。

示例1：

在面包屑导航的标签的使用上，可以使用“p”标签而不是DIV。

	
<div?class="breadcrumb">?<p?class="breadcrumb">
	
<a>首页</a>/<a>服务</a>?=?<a>首页</a>/<a>服务</a>
	
</div>?</div>

示例2：

在一些博客的文章日期显示上，也可以做到简单的结构。

	
<div?class="date">?<p?class="date">
	
<div?class="day">7</div>?=?7<span>10</span>
	
<div?class="mth">10</div>?</p>
	
</div>

4．格式化代码

作为开发人员，应养成良好的编程习惯，把代码进行格式化（缩进），使得阅读源代码更方便。

5．在布局结尾加上注释

在一个较复杂的结构中，你可能会迷失方向，不清楚哪个标记在哪个位置结束，调试混乱的布局往往可能少了一个结束的</div>标记，所以应该在布局结构结尾时加上注释，如：

	
<div?id="header">
	
…
	
</div><!--?/end?header

直到今天，基于DIV和CSS的布局结构仍是标准网页的核心衡量标准，我们需要更多的实践来把握这些技术的应用。