DDR爱好者之家

减少代码和语义化标签实现方法
站长资源 2024/12/28 佚名
68 1538
DDR爱好者之家 Design By 杰米
本文主要关注如何通过语义化的标签、减少div使用等方法来简化代码。你是否在修改某人的页面时，被他的乱七八糟的代码搞晕乎？简洁的代码不但方便自己，同时方便你的团队成员。他在你调试页面或编辑的时候节省你的时间（尤其对于大的项目来说）。
一、去掉不必要的div标签
我看到好多人都在form或ul列表的外面嵌入一个div结构，为什么要嵌入这个你不需要的div那？你可以通过给相应的语义化的标签定义、引用新的css就可以达到同样的效果。
实例1：
一下案例展示的是如何去掉div标签并定义一个新的样式给form标签。
减少代码和语义化标签实现方法
实例2
有时我们为了实现内容间间距的效果而在内容的外面嵌入一个多余的div标签。一下例子的左边增加了<div></div>来实现间距。但是，既然每个结构里面都含有标题标签h4,我们就可以给h4设置margin属性来实现间距，从而省去多余的<div></div>结构。
减少代码和语义化标签实现方法

二、使用语义化的标签
在页面制作过程中，应尽量使用语义化的标签（如：h1定义标题，P定义段落文字，ul定义列表项目），即使不定义css样式，你的文档也是有意义的。
减少代码和语义化标签实现方法

实例：
一下图片对比了div定义的结构和语义化标签定义的结构在没有定义css展示的效果。
减少代码和语义化标签实现方法

三、减少使用div的使用
实例1
链接导航效果，用p标签结构代替div标签结构更有意义。
减少代码和语义化标签实现方法

实例2
一下实例我用一个span标签代替了原来的两个div标签结构，但他们实现的布局结构是一样的。
减少代码和语义化标签实现方法

四、格式化你的结构代码
你要保持格式化你的代码结构，这样容易阅读和调试。如果你使用的是Adobe Dreamweaver,你点击Commands > Apply Source Formatting就很容易实现代码的格式化。
减少代码和语义化标签实现方法

五、注释闭合div标签
开发模版程序的时候（比如WordPress themes），模版程序分成几个不同的文档index.php, header.php, sidebar.php, and footer.php等。同时，你也应该经常的注释你的div标签结构,不至于自己晕乎。当我看到</div><!– /wrapper –>时，我就能清楚的辨认出是<div id=”wrapper”>的注释。
减少代码和语义化标签实现方法

总结：
1、减少使用div标签；
2、应该用div定义页面的主要框架结构，比如头部、内容、边栏和底部等结构；
3、内容应该使用语义化的html标签，而不是div标签；
4、格式化代码同时要闭合div标签结构。

中文原文：减少代码和语义化标签
英文原文：Coding Clean and Semantic Templates

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米