作者:RainBow 网址:http://CssRainBow.cn
源文件地址是：http://docs.google.com/View?id=dhqdrrw3_5fnjfrvgh
Web标准此话题，我们还得从万维网之父 Tim Berners-Lee (蒂姆·本尼斯里)说起。1988年，Internet开始对外开放，随后一年，1989万维网之父根据当时的印刷业规范SGML制定了 HTML(Hyper Text Markup Language)，当然他就是HTML的发明人了。这个时候Tim Berners-Lee 先生，他也认识到：为了生存，网站需要发布标准来确保文档的互用性，并确保所有用户都能获取内容。
1994年，他成立了万维网联盟（W3C）,一个国际网络技术专家组成的组织，提倡创建Web内容的最佳实践。W3C中的专职工作群体界定了基本网站语言的标准，如 HTML,CSS,JavaScript,XML等。随后的漫长时期，各个浏览器开发商，都有自己的标准，沮丧的网页开发人员只好用非标准的方法开放网站，也使互联网更加混乱。专有的代码和随便的标记使网页显的混乱。幸好有一大群WEB开发大师，在不懈的努力，在他们的倡导之下，人们慢慢的从实践中认识到了WEB标准的好处，再加上一些好的项目（如：《CSS Zen Garden》）,进一步加速了WEB标准的接受程度。
浏览器与WEB开发者之战的互联网黑暗早期，经历了很长的道路。按Web标准开发的网站，现在能更好的兼容多个浏览器和设备。Web标准已成为今天Web开发社区的一个基本标志。
现在，有许多的顶级设计人员，开发人员和公司都已经采用WEB标准开发，因为他们得到了许多实际的好处。虽然乃有许多网站无视Web标准，但他们还是走上了WEB标准之路，采用标准比继续过去糟糕的方式还是有许多的好处。
作为网页设计新手，我们如何掌握Web标准那？我这里为大家写出了Web标准最佳实践应会的36种技巧。
36 Web Standards Best Practices （36种Web标准的最佳做法）
列表如下：
一. 声明文档类型描述（DTD）
二. 不要使用W3C废弃的元素
三. 关闭所有的元素
四. 做到结构（XTHML），表现(CSS)，行为(JavaScript)的分离
五. 永远使用小写字母，让引号伴随着属性
六. 有必要,代码注释
七. 切勿使用直线和内嵌样式
八. 使用H1~ H6 Tag
九. 应该把所有的外部样式文件放在在 Heade Tag
十. 保持HTML,CSS的校验
十一. 我们可以考虑把JavaScript文件放在Html的底部
十二. 切勿使用内置的JavaScript脚本,这不是1996年了!
十三. 下载和使用Firbug
十四. 如果您想建立一个Bolg的话,用H1 Tag作为文章题目
十五. 下载ySlow
十六. 导航条用无序列表
十七. 作好IE的兼容性
十八. 选择web前端开发工具
十九. 避免滥用 div 元素
二十. 一但网站完成后，压缩！
二十一. 初始化CSS元素
二十二. 所有的图片标签必须有ALT属性
二十三. 有时候,我们需要挑灯夜战
二十四. 查看源码
二十五. 使用Twitter
二十六. 学会用图形处理软件
二十七. 掌握HTML Tag
二十八. 参与好的社区
二十九. 不要盲目使用框架
三十. 学会使用语言参考手册
三十一. Cut, Cut, Cut，优化代码
三十二. 注意您的样式表
三十三. Line 'em Up!（罗列）
三十四. Slice a PSD （把切片转化为布局）
三十五. 解放思想 (禅意花园)
三十六. 实战中检验真理
36种Web标准的最佳做法：
一. 声明文档类型描述（DTD）
所有的文件需要用文档类型定义(DTD)开始，来告诉浏览器打开页面时应遵循什么规则。
当我们使用网页设计工具Dreamweaver 新建网页文档以后，你将会在新文档的首行看到DOCTYPE声明。
DOCTYPE是文档类型的简写，它定义当前文档的基本类型。即，所有的文件都需要用文档类型定义(DTD)。
其实DOCTYPE只是一组机器可读的规范，虽然中间包含了文件的URL，但浏览器不会去读取这些文件，仅用于识别，然后决定以什么样的规范去执行页面中的代码。
"The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup."
我们常用的4种文档类型，来创建我们的网站
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在4种文档类型中:
HTML4.01提供了两种常用的DTD :
(1).严格型（strict）：要求严格的DTD，用户必须使用符合HTML4.01中定义的标签。(2).宽松行（loose）：要求比较宽松的DTD，与以前的HTML其它版本兼容一些。
XHTML1.0提供了两种常用的DTD :
(1).过渡型（transitional）：要求非常宽松的DTD，它允许用户继续使用HTML4.01的标签，但是要符合XHTML的写法。(2).严格型（strict）
DTD表示文档类型的定义，它们定义XML,XHTML和HTML的特定的某一个版本中可以有什么，不可以有什么，在载入网页的时候，浏览器会用既定的声明规范去检查页面的内容，是不是有效，然后采取相应的措施与编码解释文档中的代码。
对于它们是如何工作的，我们用不着深究，只要知道它们能保证我们开发出标准的网页和保证CSS的正确渲染。
一般情况下，我建议读者选择过渡型文档类型，这种DTD比较宽松，也比较容易通过W3C的代码校验，比较适合目前国内开发环境和大多数开发人员的水平。
当我们也要向strict水平发展呀！不过Adobe Dreamweaver CS3/CS4工具中默认的是strict。
二. 不要使用W3C废弃的元素
在XHTML中不再使用HTML中的
<font></font>,<meun></meun> ,<i></i>,<s></s>,<center></center>,<u></u> 等
我这里就不一一例举了,如果我还使用这些被W3C废弃的元素，那就失去了使用CSS的意义,它们可以用样式控制。
请查看废弃的元素列表
三. 关闭所有的元素
关闭所有的元素: 在HTML中一些元素没有必要被关闭。当下一个元素开始的时候，上一个元素就自动被关闭。XHTML中是不允许这样的。所有元素都必须被关闭，即使其中没有内容（如<img>）。
错误:
<li>Item 1
正确:
<li>Item 1</li>
错误:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
正确:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
错误:
<br>
正确:
<br />
错误:
<img src="image.jpg" alt="">
正确:
<img src="image.jpg" alt="" />
错误的做法，应该100 ％避免。一如既往，始终保持您所有的标记关闭。
四. 做到结构（XTHML），表现(CSS)，行为(JavaScript)的分离
当讨论到Web标准时，一些事情总是被提及，那就是结构和表现分离的重要性。
刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。
然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。
结构 是由文档中的主体部分，再加上语义化、结构化的标记。表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。
尽可能的把结构和表现相分离。
理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。
如今表现与结构的未分离的网站还是很普遍的。
所以我们刚开始学习要养成好的习惯，把它们分别放到分开的文件中，XHTML文件可以链接并共享外部的CSS和JavaScript文档的
五. 永远使用小写字母，让引号伴随着属性
不好的做法
<DIV><P>Here's an interesting fact about corn. </P></DIV>
好的做法：
<div><p>Here's an interesting fact about corn. </p></div>
六. 有必要,代码注释
" 使得你的代码在长时间内依然能够保持容易理解和维护 "
作为开发人员，有必要给代码进行注释。
有注释的代码，它能帮助我们阅读，保持清晰的思维和思路。
日后也方便快速修改和调试。
不仅方便了自己，也方便了别人。
七. 切勿使用直线和内嵌样式
<p style="color: red;">把<p/>标签里的文本内容标记为红色，来吸引人们的眼球 </p>
对于直线和内置样式，我建尽量不要使用此方式，因为他把结构和表现混在一起了，最好还是把HTML和CSS用单独的文件存放。
好的做法：
#someElement > p {color: red;}
" It's like crossing the streams in Ghostbusters. It's just not a good idea.
-Chris Coyier (in reference to something completely unrelated.) "
八. 使用H1~ H6 Tag
在我的日常开发中，我最常用到的H1~H4。
我还是建议大家把H1~H6都用到。
<h1>主标题，写在这里</h1><h6>次标题，写在这里 </h6>
九. 应该把所有的外部样式文件放在在 Head Tag
从技术上讲，你可以将样式您想要的位置。
不过， HTML规范的建议，将他们放在文件头标记。
主要的好处是，您的网页加载速度似乎更快一些。
<head>
<title>36 Web Standards Best Practices</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.- ySlow Team
十. 保持HTML,CSS的校验
校验是一个控制的过程，在这个过程中，文档必须遵守语言的规则。
这个过程就好像是给文本的拼写和语法作检查一样。
规范是网页开发中的一个重要部分。
许多很难被发现的错误可以在校验中发现。
错误可能是一个微不足道的打字错误，也可能是严重的元素和属性的不规范错误。
不幸的是，许多人并不校验他们的文档。
一些人或许根本不知道校验这回事，还有一些人想不起来去校验，甚至还有一些人故意的逃避校验。
这种情况的出现，大部分的责任要归咎于 Web 浏览器的开发商。
大多数的浏览器都会去尽全力的去解释不规范的 HTML 代码，并努力的去猜测作者的意图，以此来避免显示错误的信息。
这种行为就导致了如今混乱代码的泛滥。
这种标记的问题是，它带来了一些不可预测的结果，因为它依靠的是 Web 浏览器错误的处理。
没有任何原因不去校验您的 HTML 和 CSS 。
相反，它还会给您带来许多好处。
十一. 我们可以考虑把JavaScript文件放在Html的底部
请记住我们的首要目标是使网页尽快加载给用户看。
当加载一个脚本时，浏览器不能再继续下去，直到整个文件已经加载完毕以后才能渲染给用户。
因此，用户还要花更长的时间等待，在这之前没有发现任何进展 如果您使用JavaScript文件的唯一目的是为了增加新功能，例如：一些按钮特效，我们是希望他在整个网页渲染完毕以后再去点击它，这样才能体现的我们完美的按钮特效功能。
既然，我们知道这个理，何不把JavaScript文件放在底部那，body标签的结束位置之上那，这是绝对的最佳做法。
十二. 切勿使用内置的JavaScript脚本,这不是1996年了!
<a id="给一个唯一id名字" onclick="alert('Want to learn more about corn?');">如何学习好HTML？</a>
在我们的标签中有许多的事件属性，如单击事件，焦点事件，鼠标和键盘事件等，然后这些事件属性值就等于我们的JavaScript程序。
我想，您应该不会这样作！相反，我们将此代码转移到一个外部JavaScript文件里，然后使用“ addEventListener / attachEvent ”为“侦听”您想要的事件。
或者，如果你想使用一些框架的话，就像jQuery一样，只需使用“click”的方法就行了。
$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});
十三. 下载和使用Firbug
十四. 如果您想建立一个Bolg的话,用H1 Tag作为文章题目
在国外的好的网站上，都使用H1或h2作为文章标题，至于什么，确定什么是最适合您自己的网站。
但是，如果建立一个博客，我会建议您保存您的H1基因标签为您的文章标题。
对于搜索引擎优化的目的，这是一个更好的做法-在我看来。
十五. 下载ySlow
十六. 导航条用无序列表
让我们先了解一下无序列表的用途。
无序列表在Web页面中的用途：
1.实现文本数据列表，这是无序列表的原始意图。
2.嵌套使用无序列表，以实现树状结构。
3.修改无序列表的样式，将它作为菜单使用。相对于用表格制作的菜单项，它修改起来比较方便，样式也很容易设置。
由此可见，我们的导航条要用无序列表，结构清晰，代码少，容易进行样式控制。
十七. 作好IE的兼容性
在我们日常开发中，让我头疼的不是技术问题，而是兼容性问题，众所周知，IE和火狐之间有很多不兼容，原因是火狐完全遵循W3C标准，而微软自认为是老大，非要搞一些自己的标准，所以，这给我们设计人员就带来了一些兼容性问题！
但是IE和Windows操作系统是捆绑销售的，所以IE的使用是占大多数的。所以我们的作好与IE的兼容性问题。
不然我们辛辛苦苦做出来的网页，无法按我们预想的方式正常渲染。
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
十八. 选择web前端开发工具
俗话说的好“工欲善其事，必先利其器” 当然选择一些好的web前端开发工具，能起到功半功事倍的作用。再说了，它们更加有助于您开发出符合WEB标准的网页。
Mac Lovers
PC Lovers
十九. 避免滥用 div 元素
页面中div与span元素的使用是一个新问题，我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。
如果你审视你的HTML文档，发现有着很多的div与span，那你就得换一个眼光来看问题了，是不是存在滥用的情况？
是不是还有更好的标记来替代它们？若h1可以更好的表示所标记的内容，那你就得放弃p或span来定义。
或许这是一对矛盾，我们本身也较难把握该如何正确的使用它们，也或许我们根本就得不到一个明确的答案。
但有一点需要阐明，我们应该使文档在逻辑上具有清晰的结构，而且更加容易应用样式。
我们可以将div仅看着是一个容器，或者叫做文档的组成“部分”。
我们使用太多的容器，并不是一个明智的模式。
而恰到好处居于合理位置的容器，可以让整个文档显的很有条理。
二十. 一但网站完成后，压缩！
通过压缩你的CSS和JavaScript文件，您可以缩小每个文件大幅度25 ％左右。
会加快浏览器的下载速度。虽然您的网站正在发展中，但是总有一天会壮大，如果你的代码上再不能优化的话，那就压缩吧！
Javascript Compression Services
CSS Compression Services
二十一. 初始化CSS元素
为什么要初始化CSS？我也不知道他们为什么会提出这么一个问题，也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。
html, body, div, span,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,img, ins, kbd, q, s, samp,small, strike, strong,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baselinebaseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}
二十二. 所有的图片标签必须有ALT属性
人们很容易忽视图像img标签的ALT属性。然而，它的重要性也无法体现出来，它是有利于网页的accessibility and validation reasons。我们以前没有重视，现在该补上这些ALT属性了。
(1) .获取或设置在图像不可用或当前正在下载且尚未完成的情况下浏览器显示的替换标题(2) .能帮助视觉障碍的用户和使用屏幕阅读器的用户正常浏览网页。
二十三. 有时候,我们需要挑灯夜战
我们遇到问题，并不可怕，最重要的是有解决问题的决心。这样我们会印象深刻。高手就是这样炼就的。
二十四. 查看源码
有什么更好的方法学习HTML的方法吗，而不是复制的英雄？起初，我们都是复制和模仿人家好的网站！然后慢慢地，你开始发展自己的风格/方法。
那就，多看一些好的网站源码，学会分析人家的代码和结构。
二十五. 使用Twitter
Twitter是一个可让你播报短消息给你的朋友或“followers(跟随者)”的一个在线服务,它也同样可允许你指定哪个你想跟随的Twitter用户,这样你可以在一个页面上就能读取他们发布的信息。
这样我们可以及时共享信息，让更多的人了解您的博客。
二十六. 学会用图形处理软件
网页开发，当然离不开图形处理软件，许多好的样子是通过图片实现的。那就是我们通常说的切片。
对于我个人而言，我是能用CSS实现相同的效果，我绝对不用图片。
二十七. 掌握HTML Tag
要想成为好的前端技术开发师，当然要精通Html。不然我们如何灵活应用这些html元素那。
如何体验网页设计之美那！
二十八. 参与好的社区
我们所处的世界，已经给我们提供了许多好的学习条件，我们应该好好利用网络资源。
二十九. 不要盲目使用框架
对于开发者，我们都离不开框架，如：以AJAX技术为核心的前端设计框架有 Prototype ,jQuery ,YUI,Ext等。CSS框架有：Blueprint Css ,960 Grid System,Elements CSS Frameworks等。对于框架的好处我就不多说了。
要想了解更多的CSS框架请看我这里15个精选的国外CSS框架
作为新手，我们还要从基础学起，只有深厚的根基才能更好的驾驭这些好的框架。不然，我们就无法找到问题的根源。对于初学者来说框架对于自己的不便甚至大于它所蕴藏的优势，我们要花费大量的时间学习它，了解它。再说，它压抑了你创新的思维和创新的设计。
三十.要学会使用语言参考手册
Css语言参考手册,Html语言参考手册,JavaScript语言参考手册,这是我们以后学习和开发的必备手册。
三十一. Cut, Cut, Cut，优化代码
随着国外对WEB标准的推广，有些新手认为，web2.0就是把以前的table布局都改为DIV+CSS布局就是web2.0。其实不然， 我们要合理利用这些标签。 有一点值得引起注意，那就是在 web 开发人员圈子里通常被称为“div-itis”的对 div 元素的滥用现象。
通过大量的嵌套 div 或 span 元素来添加样式确实很方便，但还是应尽量避免这种诱惑。在多数情况下，为文档内现有元素附加样式或 JavaScript 功能是可以做到不必引入 div 或 span 元素的。作为通用容器的 div 或 span 元素应作为最后的手段使用——也就是说，最好是先尽量以语义化元素来编写网页，仅在确实需要时才加入通用容器元素。
所以我们要：Cut, Cut, Cut，优化代码
我要多用一些语义性标签，但是也要对号入座，标签语义要用对。
HTML元素的语义类别
结构
这些元素的语义定义了他们在文档中扮演着的结构的角色
结构
这些元素的语义定义了他们在文档中扮演着的结构的角色
内容
这些元素的语义定义了在文档中表示内容标记的语义
这些元素的语义定义了在文档中表示内容标记的语义
修饰形容
这些元素起到对内容的修饰和形容
这些元素起到对内容的修饰和形容
" Once you've completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not. "
三十二. 注意您的样式表
当我们的网页内容做得很多的时候，样式表文件的代码也随着庞大和臃肿起来。
我们也慢慢感觉到，有些地方不合理或重复定义。
这就是你对CSS选择符应用上出现问题了，灵活使用这些CSS选择符是使用CSS控制网页的基础，CSS选择符也是CSS学习的重点和难点。
我们是否应在设计的开始应该合理应用这些CSS选择符那？
关于CSS选择符的分类，使用，定义，由于内容之大我就不说了，需要我们查看CSS手册，再查找一些关于CSS样式表的优化技巧的文章学习一下。
三十三. Line 'em Up!（罗列）
一般来说，你应该努力按照您的内容尽可能设计您自己网页。如我们每个标题，图标，段落和标识线的布局是否合理？想想：如果你没有没有考虑，如果我问，为什么你放在一个要素在这点，你应该能够给我一个确切的理由。
三十四. Slice a PSD （把切片转化为布局）
好了，所以你获得了一个坚实的把握的HTML ，的CSS ，和Photoshop 。下一步是转换到你的第一个私营部门的工作网站。别担心，这不是因为你很难想象。我想不出更好的方式来把你的技能测试。如果您需要协助，深入审查这些视频教程，表明您到底如何完成这项工作。
三十五. 解放思想 (禅意花园)
我需要解放思想，不要墨守成规。多向大师们学习。
禅意花园
三十六. 实战中检验真理
那就不多说了，那我们以WEB标准为指导，开始我们的Web标准设计之路吧。
有错误的地方望大家纠正 我的邮箱是：cssrainbow.cn@gmail.com
或者在此文章下留言告知我。
作者:RainBow 网址:http://CssRainBow.cn
分享到：
发表评论
相关推荐
There are numerous resources on best practices for creating RESTful web services (see the Resources section at the end of this document). Many of the available resources are conflicting, depending on ...
Book Description Build Your Own Website The Right Way Using ... Ian is also a member of the Web Standards Project that aims to promote best-practices among web developers and software companies.
Then, you'll customize them and apply best design practices to maximize reusability. Through hands-on projects, you'll learn to build production-ready Web Components for any project, including color ...
Book Description Build Your Own Website The Right Way Using ... Ian is also a member of the Web Standards Project that aims to promote best-practices among web developers and software companies.
- Staying updated with the latest web standards and best practices is crucial for creating high-quality websites that perform well across different devices and browsers. - Engaging with the web ...
WS-I发布了一系列的Best Practices Profiles和Profiles Testing Tools，如Basic Profile和Advanced Profile，确保了基于SOAP、WSDL和UDDI（Universal Description, Discovery, and Integration）的标准服务能够有效...
Demonstrates best practices for using tools and utilities to create Web documents Includes coverage of the new CSS 3 and tips and tricks for maximizing its abilities Helpful examples round out this ...
In the field of web applications, infrastructures tend to mean a combination of hardware platform, software platform, and maintenance and development practices. We’ll consider how all of these fit ...
8. REST and ROA Best Practices..... . . 215 Resource-Oriented Basics 215 viii | Table of Contents The Generic ROA Procedure 216 Addressability 216 State and Statelessness 217 Connectedness 218 ...
1.7 标准化：软件系统应遵循 industry standards 和 best practices，以确保软件的质量和可维护性。 2. 系统总体架构设计 在设计 JavaWeb 软件项目的系统总体架构时，我们遵循了以下几点原则： 2.1 总体设计要求...
Know the best way to implement it 15 Chapter 2: Lead with Why, Follow with What 17 Know Your Motivation 19 What follows Why 22 Make Authentic Decisions 24 Audit the user experience 24 Define the...
工作 efficiency, make the vehicle management of the company more ... The choice of Java and MySQL ensures a robust and scalable solution, while adhering to industry standards and best practices.
This practical book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web ...