web设计与开发常见错误.docVIP

web设计与开发常见错误 web设计与开发常见错误 写于 2005年12月23日 10:55 评论(5) 原文：/lab/web_development_mistakes/ 翻译：JunChen 本文是一份web设计与开发常见错误的汇总，总结了我的web设计与开发错误和web设计与开发错误，续两篇文章。 本文包含了常见的设计开发错误以及我的一些解释，我也尝试着提供一些避免错误的方法，在某些问题上我也会给出错误信息的链接。 混淆文档类型(DOCTYPE) 完全不写、写的不正确、或放错地方。我曾见过HTML 4.0 Transitional被用在XHTML网页和框架页中，还看到过在开头的html标签后写DOCTYPE声明和一些不完整的声明。 为什么？有两个原因。首先，文档声明是必须的，在W3C HTML 4.01 spec和W3C XHTML 1.0 spec里都有说明。第二，浏览器会根据指定的文档类型去显示和渲染网页。也就是“DOCTYPE切换(DOCTYPE switching)”。为了保持各个浏览器显示网页的一致性，特别是你用了CSS，你一定会希望浏览器使用它们“Standards compliance mode”。关于DOCTYPE切换，可以看看使用正确的DOCTYPE!和正确的文档类型声明，正确的布局方式。 span癖 样式化的一个常见方法就是把一段东西用span标签围起来，并且带一个class用来设置样式。我敢保证你经常可以看到诸如span class=heading和span class=bodytext的代码。 为什么？ 其实在很多情况下这完全没必要，这样做只会混乱标签并且没有什么语义。标题就用标题(h1~h6)标签，段落就用段落(P)标签，列表就用列表(UL, OL和DL)标签。然后再用CSS去样式化，如果需要的话，也可以加class和id属性。 太多可视化思考 以为web就是WYSIWYG（所见即所得） – 一开始就想着这些东西该怎么表现的，而不是先去考虑逻辑结构上怎么样。 为什么？ 虽然大部分网民都是视力正常的，但是还是有残疾人上网的。网民可能使用不同浏览器、不同系统、不同尺寸显示器和分辨率、不同的窗口大小、不同颜色标准和文字大小，所以你不应该把你的网页做成WYSIWYG。网页不是印刷品或者电视节目。要让你的设计弹性化。 缺乏语义 没有使用具有语义的标签。想当然的按照图形浏览器渲染的HTML样式去写代码，而不是参照这些标签的意义。 为什么？和上文提到的span癖”比较接近，没有好好的利用现有的HTML标签来表达它应该表达的语义。没有语义化的HTML，为那些非可视化用户代理(UA)造成了理解上的困难。而且语义化的HTML很容易进行CSS样式化。 编码不一致 在服务器发送的默认编码是一种而文档里面又使用另外一种，这可能会造成浏览器乱码（不正常显示）。 为什么？因为你必须得保证所有你的访问者都能阅读你的内容。 不正确的alt属性 没写或者写了没意义。在网络上可以看到非常多没有alt属性的img标签。没意义的alt属性倒是不如前者常见，比如“spacer GIF used to make the layout look good”，“带有阴影的蓝色原点”, 以及“JPEG图片，123 KB”。要记住，alt属性在img和area里是必须的。 为什么？ 这是必须的，没有alt，任何图片中的信息就会被屏幕阅读器、文本浏览器、搜索引擎机器人忽略，或者用户关了图片显示就会显示为X。注意图片的alt的文字是要相关的，不要给装饰性的图片或者用来布局的图片加alt属性值，指定一个空值就可以了，如alt=。 不合法的id和class属性 在同一页面里使用了多次同一id，以及在id、class和CSS选择器中使用了非法字符。 对于CSS来说 (CSS 2.1语法和基本数据类型)： 在CSS 2.1里，标示符（包括元素名、class和ID）只能由数字、字母、ISO 10646通用字符集U+00A1及更高、连接线(-)、下划线(_)组成，并且不能以数字开始。 对于HTML (HTML基本数据类型)： ID和NAME必须以大写或小写字母开始，随后可以接任意字母、数字、连接线(-)和下划线(_)、冒号(:)和分号(.)。 为什么？遵循以上标准的浏览器可能不会按照你预期的现实。如果一个页面中有多个重用的id值，那么任何使用了该值的JS就可能会失效或者错误。 浏览器探测 使用服务器端或客户端的脚本测试访问者的浏览器，然后发送或者执行特定浏览器的代码。这对于最新的浏览器、更新过的浏览器或者具备欺骗功能的UA（比如Opera默认伪装成IE）。 为什么？增加了不必要的麻烦，并且最终会失效。 CSS缺少单位 长度值（水平和垂直的）需要单位，除非当该值为零