一、目的: 为什么要遵循标准
我们作为生产者实际上只是位于中游，既不是上游的浏览器制造商，他们是标准的真正制定者，也不算是下游，他们是浏览器的终端使用者。这个角色就意味着我们位于一个接口的位置，我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容。用一个程序的语言说，我们是转换器……adapter，我们想方设法让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户。我们要满足所有的客户，即使做不到，我们也要满足我们技术范围之内的所有用户。

二、目标
一个标准制作的网站，让你压根感觉不到跟标准有关。

三、受众
所有ui设计师、技术工程师、运营维护人员。

四、标准内容
抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如<font color=”red”></font>，已经存在的老的页面也应该在修改时尽量替代，替代方法：<span

class=”red_tex”></span>。

一个标准XHTML头信息格式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

<head>

    <title>慧聪网_中国领先的B2B电子商务平台、电子商务网站</title>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <meta name="description" content="慧聪网(hc360.com)是为中小企业提供B2B电子商务服务的网上贸易平台，是企业寻求电子商务网络贸易信息的首选行业门户。中小企业通过慧聪网可以快速发布产品供求信息并达成交易。慧聪网为您提供全面的B2B行业资讯，供应，求购，库存信息，努力让每个老板都成为B2B电子商务活动的一员。" />

    <meta name="keywords" content="B2B,hc360,电子商务,供求信息,加工,库存,二手,网上贸易,行业门户,商机,网上交易,行业资讯,在线交易,中小企业,供应,求购,商务网,商业贸易,贸易平台" />

</head>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ii) 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

iii) 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

注：DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

2、名字空间 namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？
这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。

3、定义语言编码
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
注：如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面，第二次打开时所有的中文变成了乱码。

4、Javascript定义
Js必须要用<script language="javascript" type="text/javascript">来开头定义，而不是原来的<script language=javascript>或干脆直接<script>，并且需要加个注释符<!--   -->，以保证不在不支持js的浏览器上直接显示出代码来。
例如：

<script language="javascript" type="text/javascript">

//<![CDATA[

function show_layout(selObj){

var n = selObj.options[selObj.selectedIndex].value;

document.getElementById('stylesheet').href = n;

}

//]]>

</script>

注：具体参考js规范。

5、CSS定义
CSS必须要用<style type=“text/css”>开头来定义，而不是原来的直接<style>，也不建议直接写在内容代码里如：<div style=”padding-left:20px;”></div>，并需要加个注释符<!-- -->
例如：

<style type="text/css" media="screen">

<!--

body {margin:0px;padding:0px;font-size:12px;text-align:center}

-->

</style>

为保证各浏览器的兼容性，在写CSS时请都写上数量单位，例如：错误：.space_10{padding-left:10} 正确：.space_10 {padding-left:10px}

6、不要在注释内容中使用“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
例如下面的代码是无效的：<!--这里是注释-----------这里是注释-->
正确的应用等号或者空格替换内部的虚线。<!--这里是注释============这里是注释-->

7、所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body>。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。

8、所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例如：<height=80>必须修改为：<height="80">。
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用&apos;，例如：<alt="say&apos;hello&apos;">

9、把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为 &lt;
任何大于号（>），不是标签的一部分，都必须被编码为 &gt;
任何与号（&），不是实体的一部分的，都必须被编码为 &amp;
错误：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10&keywords=mp3
正确：
http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&amp;doSearchForum=true&amp;main=1&amp;catcount=10&amp;keywords=mp3

10、给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap><input type="checkbox" name="shirt" value="medium" checked>必须修改为：
<td nowrap="nowrap"><input type="checkbox" name="shirt" value="medium" checked="checked" />

11、所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。
例如：<br />
<img height="80" alt="网页" title=”网页” src="logo.gif" width="200" />

特殊结束标记
错误：
Document.write(“<td width=\"300\"><a href=\"1.html\">ok</a></td>”);
正确:
Document.write(“<td width=\"300\"><a href=\"1.html\">ok<\/a><\/td>”);
在js中，原已结束的标签需要再转义再结束。

12、所有的标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p></b>必须修改为：<p><b></b></p>
就是说，一层一层的嵌套必须是严格对称。
错误：
<table><tr><form><td></td></form></tr></table>
正确：
<form><table><tr><td></td></tr></table></form>

13、图片添加有意义的alt属性
例如：<img src="logo.gif" width="100" height="100" align="middle" boder="0" alt="阿里巴巴" />
尽可能的让作为内容的图片都带有属于自己的alt属性。
同理：添加文字链接的title属性。
<a href="#" target="_blank" title="新闻新闻新闻新闻">新闻新闻…</a>，在一些限定字数的内容展示尤为重要，帮助显示不完成的内容显示完整，而不用考虑页面会因此而撑大。

14、在form表单中增加lable，以增加用户友好度
例如：

<form action="http://somesite.com/prog/adduser" method="post">

  <label for="firstname">first name: </label>

  <input type="text" id="firstname" />

  <label for="lastname">last name: </label>

  <input type="text" id="lastname" />

</form>

附录一
1、XHTML校验
校验网址：http://validator.w3.org/
校验方式：网址校验、文件上传校验
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。

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 an 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属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个</li>其他<li>标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。

附录二
2、CSS2校验
校验网址：http://jigsaw.w3.org/css-validator/
校验方式：网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过样式表校验! "。校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐,建议修改。
同样，通过检验后，可以放置一个CSS校验通过图标。

CSS2校验常见错误原因对照表
1.(错误)无效数字：color909090不是一个color值，909090---十六进制颜色值必须加"#"号，即#909090
2.(错误)无效数字：margin-topUnknown dimension：6pixels ---pixels不是一个单位值，正确写法6px
3.(错误)属性：scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
4.(错误)值：cursorhand不存在 : hand是非标准属性值，修改为cursor:pointer
5.(警告)Line:0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
6.(警告)Line:0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。

W3C代码标准规范的更多相关文章

  1. W3C 代码标准规范

    W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组.社区组.商务组等).W3C会根据产业界的标准需求 ...

  2. W3C推进SVG规范Ver1.1（中文译稿）—Part I

    转自:http://www.gispark.com/html/GISarticle/2006/1215/826.html Scalable Vector Graphics (SVG) 1.1 Spec ...

  3. WEB标准：标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范

    1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...

  4. 我们为什么要遵循W3C标准规范

    大部分的站长和拥有网站的企业负责人都会知道,每当有浏览器发布大更新的时候,我们刚建立不久的网站就会发生无法预知的严重错误,我们只能重新建立或改版网站,使其可以应归新发布的浏览器.好比1996-1999 ...

  5. .net软件开发脚本规范-代码标准(webform)

    一. 代码标准 列表界面 1.1前台代码 1) 样式与js脚本,UI.css为界面样式,Font.css为字体样式,Common.js为通用基础js脚本,基本所有页面都需要,如果有需要新增的复制一行, ...

  6. php与数据库代码开发规范

    php与数据库代码开发规范 1/25/2016 6:00:31 PM php对各类变量命名规范 目录名 文件命名 局部变量命名 使用英文动词名词,用下划线作为单词的分割,所有字母均使用小写 目录 up ...

  7. 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...

  8. 通过扩展让ASP.NET Web API支持W3C的CORS规范（转载）

    转载地址:http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-04.html CORS(Cross-Origin Resource Shari ...

  9. 个人作业Week 2 ----------代码的规范和代码复审

    1.是否需要有代码规范 从个人理解的角度出发,我认为代码规范还可以细分为代码的风格还有代码的结构设计(就好比排版一类的) 以前在上C语言课程的时候就看到过,老师会在打“{”的时候进行一个换行,但是有些 ...

随机推荐

  1. C++11 智能指针

    C++ 11标准库引入了几种智能指针 unique_ptr shared_ptr weak_ptr C++内存管理机制是当一个变量或对象从作用域过期的时候就会从内存中将他干掉.但是如果变量只是一个指针 ...

  2. IIS部署WCF网站服务步骤

    一开始在“管理工具”下找不到IIS的快捷方式,是因为系统默认未打开IIS功能,所以首先打开IIS功能: 为避免出现未知的麻烦,建议将IIS下的所有项都勾上: 创建IIS桌面快捷方式: 添加网站托管: ...

  3. 深入理解iOS开发中的BitCode功能

    前言 做iOS开发的朋友们都知道,目前最新的Xcode7,新建项目默认就打开了bitcode设置.而且大部分开发者都被这个突如其来的bitcode功能给坑过导致项目编译失败,而这些因为bitcode而 ...

  4. ECMAScript6 面向对象 时钟效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 【图像处理】【SEED-VPM】7.ubuntu10.04下 TFTP,NFS 安装指南

    Linux系统启动流程 程序开发调试的一般方法 1. TFTP下载内核+NFS网络文件系统.即内核和文件系统均不在板卡上.主要用于调试内核功能. 2. FLASH启动内核+NFS网络文件系统,即内核固 ...

  6. iOS语音

    <span style="white-space:pre">    </span>语音技术近来可是出遍了风头,从iphone4s的siri,到微信的语音聊天 ...

  7. CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

  8. Coding源码学习第三部分(EaseStartView.m)

    首先接上篇的要做一个NSEnumerator 类的延展阅读. 枚举(NSEnumerator) (1)依附于集合类(NSArray,NSSet,NSDictionary),没有用来创建实例的接口. ( ...

  9. 2.4G/5G频段WLAN各国使用信道表

    List of WLAN channels (维基百科):https://en.wikipedia.org/wiki/List_of_WLAN_channels 2.4G 5G 另附美国5G允许使用的 ...

  10. C++ 之 class 的思考

    工作多年,突然发现c++这么多年都是零散记录了些自己对C++的反思,没有做过任何的文字记录表示遗憾. 看到很多小伙也都在写技术博客,那我自己也就写一写自己的一些 思考吧! C++的基本类这个东西,想必 ...