html语言:编写干净的且富有语义的html代码
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/15 10:49:06 HTML
如果你是一个使用div标签做任何事的家伙,那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板,那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码,不仅对你自己有益,而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间(特别是比较大的一些项目)。
1.去除不必要的div标签:
我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则,这样也可以达到同样的效果。
例子一:
下面的列子将展示给你如何删除多余的div标签,而将css规则声明给内部的form标签。
例子二:
有时侯我们会将一些内容用额外的div标签包含起来,其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个
2.使用富有语义的标记:
你必须时刻都使用富有语义的标记来编写html代码(如:h1用作标题,p用作文章段落,ul则用于列表项)。那么,即使你的css文件没有引入或者没有被支持,你的html文档看起来也是富有意义的。
例子:
下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码(没有css代码的支持)在浏览器中编译后的效果。
3.尽可能地少使用div标签:
你是否看到过一些到处都是div的html文档,它是否让你非常地抓狂?是否你曾忘记关闭一个
例子一:
用p标签来替代div标签去包含一个面包屑导航。
例子二:
下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。
4.格式化(缩进)你的代码:
你在开发的过程中始终要格式化你的源代码(如缩进嵌套的标签),这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话,那么你可以很简单地去格式化源代码。方法:点击“命令”菜单下的“应用源代码”选项即可。
5.在
当你编写一个平台模板(如:WordPress主题)代码时,这些模板文件会被分割成多个不同的文件:如:index.php, header.php, sidebar.php, 和 footer.php。因此,你必须在
总结:
1.尽可能少地使用div标签;
2.使用div标签来控制页面的整体布局,如头部,内容部,侧边栏,底部等;
3.内容必须包含在对应的语义标签内,而不是包含在div内;
4.格式化你的源代码并且在结束标签处给出对应的注释语言。