来谈谈：经由过程语义化的标签削减DIV简化网页代码

所有的设计第一步就是构思，构思好了。
网页制造poluoluo文章简介：削减代码和语义化标签.
假如你在天生页面的时分过量的利用div，那你有需要浏览这篇文章了。本文次要存眷怎样经由过程语义化的标签、削减div利用等办法来简化代码。你是不是在修正或人的页面时，被他的七零八落的代码弄晕乎？简便的代码不仅便利本人，同时便利你的团队成员。他在你调试页面或编纂的时分节俭你的工夫（特别关于年夜的项目来讲）。
1、往失落不用要的div标签
我看到很多多少人都在form或ul列表的表面嵌进一个div布局，为何要嵌进这个你不必要的div那？你能够经由过程给响应的语义化的标签订义、援用新的CSS就能够到达一样的效果。
实例1：
一下案例展现的是怎样往失落div标签并界说一个新的款式给form标签。

登录/注册后可看大图

实例2
偶然我们为了完成内容间间距的效果而在内容的表面嵌进一个过剩的div标签。一下例子的右边增添了<div></div>来完成间距。可是，既然每一个布局内里都含有题目标签h4,我们就能够给h4设置margin属性来完成间距，从而省往过剩的<div></div>布局。

登录/注册后可看大图

2、利用语义化的标签
在页面制造过程当中，应只管利用语义化的标签（如：h1界说题目，P界说段落笔墨，ul界说列表项目），即便不界说css款式，你的文档也是成心义的。

登录/注册后可看大图

实例：
一下图片对照了div界说的布局和语义化标签订义的布局在没有界说css展现的效果。

3、削减利用div的利用
实例1
链接导航效果，用p标签布局取代div标签布局更成心义。

登录/注册后可看大图

实例2
一下实例我用一个span标签取代了本来的两个div标签布局，但他们完成的结构布局是一样的。

登录/注册后可看大图

4、格局化你的布局代码
你要坚持格局化你的代码布局，如许简单浏览和调试。假如你利用的是AdobeDreamweaver,你点击Commands>ApplySourceFormatting就很简单完成代码的格局化。

登录/注册后可看大图

5、正文闭合div标签
开辟模版程序的时分（好比WordPressthemes），模版程序分红几个分歧的文档index.php,header.php,sidebar.php,andfooter.php等。同时，你也应当常常的正文你的div标签布局,不至于本人晕乎。当我看到</div><!&ndash;/wrapper&ndash;>时，我就可以分明的识别出是<divid=”wrapper”>的正文。

登录/注册后可看大图

总结：
1、削减利用div标签；
2、应当用div界说页面的次要框架布局，好比头部、内容、边栏和底部等布局；
3、内容应当利用语义化的html标签，而不是div标签；
4、格局化代码同时要闭合div标签布局。
中文原文：削减代码和语义化标签
英文原文：CodingCleanandSemanticTemplates

</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。