W3C网站代码标准规范手册.doc

《W3C网站代码标准规范手册.doc》由会员分享，可在线阅读，更多相关《W3C网站代码标准规范手册.doc（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、W3C网站代码标准规范W3C网站代码标准规范目 录目 录1一、目的: 为什么要遵循标准2二、目标2三、受众2四、标准内容21、什么是DOCTYPE32、名字空间 namespace43、定义语言编码44、Javascript定义45、CSS定义56、不要在注释内容中使“-”57、所有标签的元素和属性的名字都必须使用小写58、所有的属性必须用引号括起来69、把所有和&特殊符号用编码表示610、给所有属性赋一个值611、所有的标记都必须要有一个相应的结束标记712、所有的标记都必须合理嵌套713、图片添加有意义的 alt 属性714、在form表单中增加lable,以增加用户友好度8附录一8附录二

2、9一、目的: 为什么要遵循标准我们所处的角色我们作为的生产者实际上只是位于中游，既不是上游的浏览器制造商,他们是标准的真正制定者，也不算是下游，他们是浏览器的终端使用者。这个角色就意味着我们位于一个接口的位置：我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容 用一个程序的语言说，我们是转换器adapter，我们想方设法让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户。虽然我们很累，但我们这么作的结果就是我们会满足尽可能多的用户 Exp：目前市面上的DVD刻录盘有三种标准，可是目前世面上大部分的DVD刻录机都是尽可能地全部兼容-Why ?因为他们不想失去潜在

3、客户，这就是我们在意标准的原因！我们要满足所有的客户，即使做不到，我们也要满足我们技术范围之内的所有用户。二、目标一个标准制作的网站，让你压根感觉不到跟标准有关。三、受众所有ui设计师、技术工程师、运营维护人员。四、标准内容抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如已经存在的老的页面也应该在修改时尽量替代，替代方法：一个标准XHTML头信息格式如下：慧聪网_中国领先的B2B电子商务平台、电子商务网站注:一般如果项目或页面没有要求description和keywords描述的话,均采用中文站首页的mate信息。1、什么是DOCTYPE DOCTYPE是document typ

4、e(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。XHTML 1.0 提供了三种DTD声明可供选择：n 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：n 严格的(Strict

5、):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下：n 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：注:DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。2、名字空间 namespace 通常我们HTML4.0的代码只是，这里的xmlns是什么呢？这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字

6、空间都相同，就是http:/www.w3.org/1999/xhtml。目前阶段我们只要照抄代码就可以了。3、定义语言编码 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。 注：如果忘记了定义语言编码,可能就会出现,你在DW做完一个页面,第二次打开时所有的中文变成了乱码4、Javascript定义Js必须要用来开头定义,而不是原来的或干脆直接,并且需要加个注释符，以保证不在不支持js 的浏览器上直接显示出代码来。例如：/注：具体

7、参考js规范5、CSS定义CSS必须要用开头来定义,而不是原来的直接，也不建议直接写在内容代码里如：,并需要加个注释符例如：为保证各浏览器的兼容性，在写CSS请都写上数量单位，例如：错误：.space_10padding-left:10正确：.space_10 padding-left:10px6、不要在注释内容中使“-”“-”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: 正确的应用等号或者空格替换内部的虚线。 7、所有标签的元素和属性的名字都必须使用小写 与HTML不一样，XHTML对大小写是敏感的，和是不同的标签。XHTML要求所有的标签和

8、属性的名字都必须使用小写。例如：必须写成 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字onMouseOver也必须修改成onmouseover。 8、所有的属性必须用引号括起来 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如： 必须修改为： 特殊情况，你需要在属性值里使用双引号，你可以用，单引号可以使用'，例如： 9、把所有和&特殊符号用编码表示n 任何小于号（），不是标签的一部分，都必须被编码为 > n 任何与号（&），不是实体的一部分的，都必须被编码为 & 错误：例:正确:：10、给所有属性赋一个值

9、XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： 必须修改为： 12、所有的标记都必须要有一个相应的结束标记以前在HTML中，你可以打开许多标签，例如和而不一定写对应的和来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个/来关闭它。例如： 特殊结束标记错误：Document.write(“ok”);正确：Document.write(“ok”);在js中，原已结束的标签需要再转义再结束13、所有的标记都必须合理嵌套 同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：

10、 必须修改为： 就是说，一层一层的嵌套必须是严格对称。错误：正确：14、图片添加有意义的 alt 属性 例如：尽可能的让作为内容的图片都带有属于自己的alt属性同理：添加文字链接的title属性新闻新闻,在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大15、在form表单中增加lable,以增加用户友好度例如： first name: last name: 实例:label_demo.html附录一n 1.XHTML校验n 校验网址：http:/validator.w3.org/ n 校验方式:网址校验、文件上传校验 n 一般选择Show Source

11、和Verbose Output可以帮助你找到错误代码所在行和错误原因。n XHTML校验常见错误原因对照表 1.No DOCTYPE Found! Falling Back to HTML 4.01 Transitional-未定义DOCTYPE。 2.No Character Encoding Found! Falling back to UTF-8.-未定义语言编码。 3.end tag for img omitted, but OMITTAG NO was specified-图片标签没有加/关闭。 4.an attribute value specification must be a

12、n attribute value literal unless SHORTTAG YES is specified-属性值必须加引号。 5.element DIV undefined-DIV标签不能用大写，要改成小写div。 6.required attribute alt not specified-图片需要加alt属性。 7.required attribute type not specified-JS或者CSS调用的标签漏了type属性。 其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个其他标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，

13、其他的错误也都没有了。 附录二n 2.CSS2校验n 校验网址：http:/jigsaw.w3.org/css-validator/ n 校验方式:网址校验、文件上传校验、直接贴入代码校验 n 校验成功，会显示恭喜恭喜，此文档已经通过样式表校验! 。n 校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。 CSS2校验常见错误原因对照表 1.(错误)无效数字 : color 不是一个 color 值 : -十六进制颜色值必须加#号，即# 2.(错误)无效数字 : margin-topUnknown dimension : 6pix

14、els -pixels不是一个单位值，正确写法6px 3.(错误)属性 scrollbar-face-color 不存在 : #eeeeee - 定义滚动条颜色是非标准的属性 4.(错误)值 cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer 5.(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 -W3C建议字体定义的时候，最后以一个类别的字体结束，例如sans-serif，以保证在不同操作系统下，网页字体都能被显示。 6.(警告)Line : 0 cant find the warning message for otherprofile -表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。 n 同样，通过检验后，可以放置一个CSS校验通过图标