你在这里

代码简洁和语义化模板

主标签

转载请注明出处:drupal花园

本文永久链接地址:http://drupalgarden.cn/node/249

 

假如你是所有的标签都使用<div>,这篇文章正适合你。本文重点讲述如何利用语义化标签和尽可能少地使用<div>标签来书写简洁的HTML代码。你是否编辑过某些人的模板,而被那些杂乱标记逼疯呢?书写简洁的模板将对你和你的团队共同获益。这将节约你调试和编辑的时间(尤其是大型的项目)。

1.移除不必要的<div>标签

我看到很多人在<form>和<ul>菜单列表外面包着<div>。为什么要加个你不需要的<div>标签呢?你可以使用CSS的选择器规则去实现同样的效果。

例1:

下面的例子将告诉你如何去除<div>标签和通过样式来定义form选择器。div form

例2:

通常我们会在内容外面包着一个额外的<div>,仅是为了调整间距。下例中左侧的<div class="box">(注:原文写的是sidebox,而下图是box,所以龙马纠正了一下。)是为了在盒子(Boxes)之间添加外边距(Margin)。但是如果每个盒子都有一个标题(比如:<h4>),我们可以直接定义h4选择器的外边距,移除多余的<div class="box">标签。

div sidebar

2.使用语义化标签

你应该使用语义化标记来编写HTML文档(比如:<h1>是标题,<p>是文本段落,而<ul>是列表元素)。因此,即使CSS不被支持,您的文档仍然是有意义的。

例如:

下图是比较<div>标记和语义化标记在CSS不被支持时的呈现差异。

semantic markups

3.最少化使用<div>标签

你是否见过混乱的模板<div>标签随处可见,让你抓狂的?是否因为少了个</div>标签或者多了一个<div>标签而破坏了整体的布局?我相信很多开发者都有过这样的经历。因此,如果可能的话,请你尽可能地少用 <div> 标签。这将让你的调试和编辑更加方便。

例1:

面包屑导航应该使用更有意义使用<p>标签,而不是<div>标签。

breadcrumb

例2:

下面例子展示如何使用CSS的方式,将2个 <div> 标签替换为1个 <span> 标签。他们的显示效果是一样的。

blog date

4.格式化(缩进)您的代码

对你的源代码要进行格式化(即缩进嵌套元素),这样让它们看来更容易阅读和调试。加入你有在用Adobe Dreamweaver,你可以很方便地使用命令 > 应用原格式 (Commands > Apply Source Formatting) (从程序菜单里)。

code formatting

5.在 </div> 标签结尾添加注释

当您编写一些平台模板(比如WordPress 主题)(龙马译注:还有我们的Drupal主题哦),通常模板是分布在好多个文件里:index.php, header.php, sidebar.php, and footer.php。因此,你应该在<div> 标签结尾加上注释,这样您就不会遗漏了。例如,当我看到 </div><!-- /wrapper -- >,我就会知道它是<div id="wrapper">.的结尾标记。

例如:

我通常在</div> 标签结尾添加一个 HTML 注释标记。我使用正斜杠,表示它是结束标记。

comment closing tag

结论:

  • 尽量减少使用<div>标记。
  • 你应该尽可能地将 <div> 标签用来做主体部分的布局,比如:头部,内容,侧栏,底部(header, content, sidebar, and footer)。
  • 内容部分尽量使用语义化的 HTML 标签,而不是div标签。
  • 格式化您的源码并且在 </div> 结尾添加注释标记。

 

英文原文链接:Coding Clean and Semantic Templates

 

论坛: 

猜你喜欢