漂亮的代码是漂亮网站的基础,优秀的 CSS 只存在与同样优秀的 HTML 之上,干净的,语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净Web设计代码的定律,适合于任何从事Web设计的人。
1. Strict DOCTYPE
要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0,它们都提供 Strict 模式,使用 Strict 模式可以保证我们的代码不隐藏任何错误。
2. 字符集声明,特殊字符进行编码处理
字符集声明应当放在 hea> 部分的最前面,以便让浏览器知道如何显示网页中的所有内容,包括标题。另外,一些特殊字符,如 & 最好用 & 代替,这是一种最安全的方法。
3. 恰当的锁进
缩进不会影响网页的渲染,但会明显改善阅读源代码时的体验。缩进没有特定的规则,但始终保持一致是个好习惯。
4. 将 CSS 和 JavaScript 放在外部文件中
将 CSS 和 JavaScript 放在外部文件中引用,不仅减低单个网页的尺寸,而且意味着其它网页也可以共用这些代码,另外,浏览器的缓存机制可以很好地降低对相同代码的重复下载。
5. 正确地嵌套 Tag 标签
如下图,第一行代码中,h1>标签嵌套在 a>标签中,尽管多数浏览器会正确渲染,但这不是好的习惯, 标签是 block 对象,而 是 inline 对象,inline 对象不应该容纳 block 对象。
6. 消除不必要的 div
div常被滥用(尤其在我们现在所处的 DIV+CSS 神话中 - 译者),人们希望把任何东西都放在 div 中以便为它们分配 CSS 式样,这种滥用会导致的臃肿。
7. 使用更好的命名规则
如下图,Cat 的 CSS 类被命名为 red italic,暗示着 Cat 使用红色斜体,如果你想将 Cat 改成兰色的粗体呢?
8. 尽量使用 CSS 控制文字的排版
如下图所示,不要直接使用大写,用 CSS 对这些文字排版方面的格式进行控制,这样会更灵活。
9. 为 body 分配独立的 class/id
为 body Tag 分配一个独立的 class/id,可以很好地定位页面中任何对象,因为页面中所有对象都位于 body 中。
10. 验证
无需多言,你应当尽可能对网页的代码进行验证,尽管有些代码错误浏览器能自动更正,但有些错误是会带来不好的后果的,尤其当你位于 Strict 模式下。即使什么都不为,看到那个绿色的 W3C 验证标志至少可以让自己舒服一些。
W3C 验证是否通过并不一定要什么拘泥,Web 设计中存在更多的考量,只拘泥 W3C 验证结果,可能影响一些更重要的因素,比如,IE6 在 W3C 标准方面存在不少 BUG,如果你为了100%通过 W3C 验证而宣布自己的网站不支持 IE6,至少在国内会得不偿失的 - 译者
11. 合理的结构次序
将网页结构保持一个合乎逻辑的次序。
12. 尽你所能
如果你从零开始写,保持以上的原则当然要容易的多,如果要修改旧的代码,将会很痛苦,一些 CMS 系统拙劣的编码会让你陷入泥沼,或者你的网站规模宏大要改动的东西太多,不管怎样,始终保持良好的习惯非常重要。
分享到:
相关推荐
弹性力学基础:胡克定律:二维胡克定律及其应用.docx
弹性力学基础:胡克定律:三维胡克定律与广义胡克定律.docx
【大学物理教学设计:牛顿定律】 牛顿定律是物理学中的基础内容,主要涉及质点动力学的初步探讨。在大学物理课程的第二章中,牛顿定律是讲解质点如何运动以及为何运动的关键。本教学设计针对大学一年级理工科专业...
【大学物理教学设计:牛顿定律】 牛顿定律是物理学中的基础内容,尤其在大学物理课程中占有举足轻重的地位。本教学设计主要针对大学一年级理工科专业的学生,他们在大一下学期已经学习了质点运动学,具备了速度、加...
### Web界面设计原则详解 #### 引言 Web界面设计是一项综合艺术与科学的技能,旨在创造既美观又实用的在线体验。良好的Web界面不仅能够吸引用户,还能引导他们高效地完成目标。本文将深入探讨Web界面设计的核心...
2007-2011生物高考题分类汇编课件:必修2专题12自由组合定律.ppt
弹性力学基础:弹性势能:应力应变关系与胡克定律.docx
材料力学之应力分析算法:弹性模量计算:胡克定律及其应用.docx
在C语言环境下,我们可以利用大数定律来实现定积分的数值求解。 定积分是微积分中的基本概念,它表示曲线下面积或者物理问题中的累计量。在计算机科学中,由于解析解并不总是存在或容易得到,我们通常采用数值方法...
弹性力学材料模型:各向同性材料:胡克定律及其应用.docx
电工电子技术:02 参考方向及欧姆定律.ppt
材料力学之应变分析算法:应变-应力转换:胡克定律详解.docx
涵盖了皮尔斯定律、晕轮效应、爱屋及乌控制错觉定律、不值得定律、权威效应、情绪定律、心理摆效应、虚假同感偏差、补偿作用、マスローの需要层次...论断、洛克定律、瓦拉赫效应和木桶定律等二十余个心理定律和经济定律...
在Web缓存的设计中,为得到所期望的Web对象命中率的要求,设计人员可以根据Zipf定律近似计算出相应的缓存大小。因此,Zipf定律为web缓存结构的设计提供了重要的依据。适当的缓存大小结合P-LFU替换策略可以得到很高的...
结点是两条以上支路的连接点,而回路是由一条或多条支路构成的闭合路径。在回路中,节点只经过一次。网孔是一个特殊的回路,它不包含任何其他回路。 二、基尔霍夫电流定律(KCL) 基尔霍夫电流定律涉及到电流的...
源代码是实际编写的应用程序,而项目报告通常会包含设计背景、需求分析、系统架构、功能实现、测试结果等内容,是理解整个项目实施过程的关键文档。 【标签解析】 "asp"标签明确了项目使用的编程技术,ASP是微软...
### 摩尔定律与微电子技术的发展 #### 摩尔定律的起源与意义 摩尔定律是由英特尔公司的联合创始人戈登·摩尔(Gordon Moore)在1965年提出的,它预测了集成电路(IC)上的晶体管数量大约每两年翻一番,而成本几乎...
在"傅里叶热传导定律MATLAB.txt"文件中,读者可能找到具体实现这一模型的MATLAB代码示例,包括定义参数、设置网格、编写差分公式、实现时间步长更新以及绘制温度分布图等步骤。通过分析和理解这些代码,不仅可以掌握...