干净优雅且富有语义的HTML的书写

使用富有语义的标签来编写干净的html代码
服务器君一共花费了322.478 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

如果你是一个使用div标签做任何事的家伙,那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板,那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码,不仅对你自己有益,而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间(特别是比较大的一些项目)。

1. 去除不必要的div标签

我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则,这样也可以达到同样的效果。

下面的列子将展示给你如何删除多余的div标签,而将css规则声明给内部的form标签。

有时侯我们会将一些内容用额外的div标签包含起来,其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个<div class="box">来控制两个box之间的外边距margin。但如果每个box内都有一个标题h4,那么我们可以通过h4标签来控制外间距margin,从而可以删除掉多余的<div class="box">标签。

2. 使用富有语义的标记

你必须时刻都使用富有语义的标记来编写html代码(如:h1用作标题,p用作文章段落,ul则用于列表项)。那么,即使你的css文件没有引入或者没有被支持,你的html文档看起来也是富有意义的。

下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码(没有css代码的支持)在浏览器中编译后的效果。

3. 尽可能地使用div标签

你是否看到过一些到处都是div的html文档,它是否让你非常地抓狂?是否你曾忘记关闭一个</div>或者无意添加了一个打开的<div>标签呢?我确定绝大多数的开发者都曾有过这样的经验。所以你需要尽可能少地使用div标签。这样以后的调试和改错的过程就会变得更加容易。

用p标签来替代div标签去包含一个面包屑导航。

下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。

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

你在开发的过程中始终要格式化你的源代码(如缩进嵌套的标签),这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话,那么你可以很简单地去格式化源代码。方法:点击"命令"菜单下的"应用源代码"选项即可。

5. 在</div>结束处给出相应的注释

当你编写一个平台模板(如:Wordpress主题)代码时,这些模板文件会被分割成多个不同的文件:如:index.php, header.php, sidebar.php, 和 footer.php。因此,你必须在</div>结束处给出相应的注释。比如:当我看到</div><!– /wrapper –>时,我就知道这里是<div id="wrapper">标签的结束处。

总结:

  1. 尽可能少地使用div标签;
  2. 使用div标签来控制页面的整体布局,如头部,内容部,侧边栏,底部等;
  3. 内容必须包含在对应的语义标签内,而不是包含在div内;
  4. 格式化你的源代码并且在结束标签处给出对应的注释语言。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1483,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1483

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《UNIX环境高级编程(第2版)》 史蒂文斯 (作者), 拉戈 (作者), 尤晋元 (译者), 张亚英 (译者), 戚正伟 (译者)

《UNIX环境高级编程(第2版)》是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的更新版。在本书第1版出版后的十几年中,UNIX行业已经有了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持了前一版的风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/O库、系统数据文件和信息、进程环境、进程控制、进程关系、信号、线程、线程控制、守护进程、各种I/O、进程间通信、网络IPC、伪终端等方面的内容,还在此基础上介绍了多个应用示例,包括如何创建数据库函数库以及如何与网络打印机通信等。

更多计算机宝库...