您现在的位置是：网站首页> 编程资料编程资料
Web 设计 实现干净代码的12条定律[图文]_心得技巧_网页制作_
2023-11-09
226人已围观
简介 漂亮的代码是漂亮网站的基础，优秀的 CSS 只存在与同样优秀的 HTML 之上，干净的，语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律，适合于任何从事 Web 设计的人。 1. Strict DOCTYPE 要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0，它们
漂亮的代码是漂亮网站的基础，优秀的 CSS 只存在与同样优秀的 HTML 之上，干净的，语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律，适合于任何从事 Web 设计的人。
字符集声明应当放在 部分的最前面，以便让浏览器知道如何显示网页中的所有内容，包括标题。另外，一些特殊字符，如 & 最好用 & 代替，这是一种最安全的方法。
参考资料:
3. 恰当的锁进
缩进不会影响网页的渲染，但会明显改善阅读源代码时的体验。缩进没有特定的规则，但始终保持一致是个好习惯。
参考资料:
4. 将 CSS 和 JavaScript 放在外部文件中
将 CSS 和 JavaScript 放在外部文件中引用，不仅减低单个网页的尺寸，而且意味着其它网页也可以共用这些代码，另外，浏览器的缓存机制可以很好地降低对相同代码的重复下载。
5. 正确地嵌套 Tag 标签
如下图，第一行代码中，标签嵌套在 标签中，尽管多数浏览器会正确渲染，但这不是好的习惯， 标签是 block 对象，而 是 inline 对象，inline 对象不应该容纳 block 对象。
1. Strict DOCTYPE
要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0，它们都提供 Strict 模式，使用 Strict 模式可以保证我们的代码不隐藏任何错误。
参考资料:
- W3C: Recommended DTDs to use in your Web document
- Fix Your Site With the Right DOCTYPE!
- No more Transitional DOCTYPEs, please
字符集声明应当放在
参考资料:
3. 恰当的锁进
缩进不会影响网页的渲染，但会明显改善阅读源代码时的体验。缩进没有特定的规则，但始终保持一致是个好习惯。
参考资料:
4. 将 CSS 和 JavaScript 放在外部文件中
将 CSS 和 JavaScript 放在外部文件中引用，不仅减低单个网页的尺寸，而且意味着其它网页也可以共用这些代码，另外，浏览器的缓存机制可以很好地降低对相同代码的重复下载。
5. 正确地嵌套 Tag 标签
如下图，第一行代码中，
标签嵌套在 标签中，尽管多数浏览器会正确渲染，但这不是好的习惯， 标签是 block 对象，而 是 inline 对象，inline 对象不应该容纳 block 对象。
6. 消除不必要的
常被滥用（尤其在我们现在所处的 DIV+CSS 神话中 - 译者），人们希望把任何东西都放在 中以便为它们分配 CSS 式样，这种滥用会导致的臃肿。
参考资料:
7. 使用更好的命名规则
如下图，Cat 的 CSS 类被命名为 red italic，暗示着 Cat 使用红色斜体，如果你想将 Cat 改成兰色的粗体呢？
8. 尽量使用 CSS 控制文字的排版
如下图所示，不要直接使用大写，用 CSS 对这些文字排版方面的格式进行控制，这样会更灵活。
9. 为 分配独立的 class/id
为 body Tag 分配一个独立的 class/id，可以很好地定位页面中任何对象，因为页面中所有对象都位于 body 中。
参考资料:
10. 验证
无需多言，你应当尽可能对网页的代码进行验证，尽管有些代码错误浏览器能自动更正，但有些错误是会带来不好的后果的，尤其当你位于 Strict 模式下。即使什么都不为，看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。
W3C 验证是否通过并不一定要什么拘泥，Web 设计中存在更多的考量，只拘泥 W3C 验证结果，可能影响一些更重要的因素，比如，IE6 在 W3C 标准方面存在不少 BUG，如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6，至少在国内会得不偿失的 - 译者
参考资料:
- The W3C Markup Validation Service
- XHTML-CSS Validator
- Free Site Validator (checks entire site, not just one page)
11. 合理的结构次序
将网页结构保持一个合乎逻辑的次序。
12. 尽你所能
如果你从零开始写，保持以上的原则当然要容易的多，如果要修改旧的代码，将会很痛苦，一些 CMS 系统拙劣的编码会让你陷入泥沼，或者你的网站规模宏大要改动的东西太多，不管怎样，始终保持良好的习惯非常重要。
相关内容
- 引入外部文件（js/vbs/css）时，避免产生乱码的方法_心得技巧_网页制作_
- 网页设计人员应该注意的43个Web设计错误_心得技巧_网页制作_
- 网页可读性提高的几个方法_心得技巧_网页制作_
- 网页设计心得:页面布局的简单规则_心得技巧_网页制作_
- 网页小空间大图片的放置_心得技巧_网页制作_
- 下拉菜单和滑动菜单设计实例_心得技巧_网页制作_
- 刀塔传奇破甲沉默光环流技巧 刀塔传奇破甲沉默光环流攻略介绍_手机游戏_游戏攻略_
- 全民砰砰砰森碟和小美哪个好 属性对比_手机游戏_游戏攻略_
- 迷你西游新手攻略 教你如何合理使用体力_手机游戏_游戏攻略_
- 全民打怪兽彭特和爱丽丝哪个好_手机游戏_游戏攻略_
点击排行
本栏推荐
常被滥用（尤其在我们现在所处的 DIV+CSS 神话中 - 译者），人们希望把任何东西都放在
中以便为它们分配 CSS 式样，这种滥用会导致的臃肿。
参考资料:
7. 使用更好的命名规则
如下图，Cat 的 CSS 类被命名为 red italic，暗示着 Cat 使用红色斜体，如果你想将 Cat 改成兰色的粗体呢？
8. 尽量使用 CSS 控制文字的排版
如下图所示，不要直接使用大写，用 CSS 对这些文字排版方面的格式进行控制，这样会更灵活。
9. 为 分配独立的 class/id
为 body Tag 分配一个独立的 class/id，可以很好地定位页面中任何对象，因为页面中所有对象都位于 body 中。
参考资料:
10. 验证
无需多言，你应当尽可能对网页的代码进行验证，尽管有些代码错误浏览器能自动更正，但有些错误是会带来不好的后果的，尤其当你位于 Strict 模式下。即使什么都不为，看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。
W3C 验证是否通过并不一定要什么拘泥，Web 设计中存在更多的考量，只拘泥 W3C 验证结果，可能影响一些更重要的因素，比如，IE6 在 W3C 标准方面存在不少 BUG，如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6，至少在国内会得不偿失的 - 译者
参考资料:
将网页结构保持一个合乎逻辑的次序。
12. 尽你所能
如果你从零开始写，保持以上的原则当然要容易的多，如果要修改旧的代码，将会很痛苦，一些 CMS 系统拙劣的编码会让你陷入泥沼，或者你的网站规模宏大要改动的东西太多，不管怎样，始终保持良好的习惯非常重要。
参考资料:
7. 使用更好的命名规则
如下图，Cat 的 CSS 类被命名为 red italic，暗示着 Cat 使用红色斜体，如果你想将 Cat 改成兰色的粗体呢？
8. 尽量使用 CSS 控制文字的排版
如下图所示，不要直接使用大写，用 CSS 对这些文字排版方面的格式进行控制，这样会更灵活。
9. 为 分配独立的 class/id
为 body Tag 分配一个独立的 class/id，可以很好地定位页面中任何对象，因为页面中所有对象都位于 body 中。
参考资料:
10. 验证
无需多言，你应当尽可能对网页的代码进行验证，尽管有些代码错误浏览器能自动更正，但有些错误是会带来不好的后果的，尤其当你位于 Strict 模式下。即使什么都不为，看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。
W3C 验证是否通过并不一定要什么拘泥，Web 设计中存在更多的考量，只拘泥 W3C 验证结果，可能影响一些更重要的因素，比如，IE6 在 W3C 标准方面存在不少 BUG，如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6，至少在国内会得不偿失的 - 译者
参考资料:
- The W3C Markup Validation Service
- XHTML-CSS Validator
- Free Site Validator (checks entire site, not just one page)
将网页结构保持一个合乎逻辑的次序。
12. 尽你所能
如果你从零开始写，保持以上的原则当然要容易的多，如果要修改旧的代码，将会很痛苦，一些 CMS 系统拙劣的编码会让你陷入泥沼，或者你的网站规模宏大要改动的东西太多，不管怎样，始终保持良好的习惯非常重要。
相关内容
- 引入外部文件（js/vbs/css）时，避免产生乱码的方法_心得技巧_网页制作_
- 网页设计人员应该注意的43个Web设计错误_心得技巧_网页制作_
- 网页可读性提高的几个方法_心得技巧_网页制作_
- 网页设计心得:页面布局的简单规则_心得技巧_网页制作_
- 网页小空间大图片的放置_心得技巧_网页制作_
- 下拉菜单和滑动菜单设计实例_心得技巧_网页制作_
- 刀塔传奇破甲沉默光环流技巧 刀塔传奇破甲沉默光环流攻略介绍_手机游戏_游戏攻略_
- 全民砰砰砰森碟和小美哪个好 属性对比_手机游戏_游戏攻略_
- 迷你西游新手攻略 教你如何合理使用体力_手机游戏_游戏攻略_
- 全民打怪兽彭特和爱丽丝哪个好_手机游戏_游戏攻略_
点击排行
本栏推荐
