基于DIV和CSS的布局结构(2)

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

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

  1. <div?id="post">?<div?id="post">
  2. <div>标题</div>?<h2>标题</h2>?
  3. <div>内容</div>?<p>…内容</p>
  4. </div>?</div>
  5. 坏的?好的

3.尽量减少使用DIV标记

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

示例1:

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

  1. <div?class="breadcrumb">?<p?class="breadcrumb">
  2. <a>首页</a>/<a>服务</a>?=?<a>首页</a>/<a>服务</a>
  3. </div>?</div>

示例2:

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

  1. <div?class="date">?<p?class="date">
  2. <div?class="day">7</div>?=?7<span>10</span>
  3. <div?class="mth">10</div>?</p>
  4. </div>

4.格式化代码

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

5.在布局结尾加上注释

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

  1. <div?id="header">
  2. </div><!--?/end?header

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