一、目的: 为什么要遵循标准
我们作为生产者实际上只是位于中游，既不是上游的浏览器制造商，他们是标准的真正制定者，也不算是下游，他们是浏览器的终端使用者。这个角色就意味着我们位于一个接口的位置，我们需要想办法满足下游的用户使用上游不同浏览器时看到的是同样的内容。用一个程序的语言说，我们是转换器……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. .NET的面向对象

    一.继承 1.C#中的继承规则 继承是可传递的 派生类是对基类的扩展 构造函数和析构函数不能被继承 派生类可以覆盖已继承的成员 派生类只能从一个类中继承,可以通过接口来实现多重继承 类可以定义虚属性. ...

  2. Windows Store App JavaScript 开发：页面加载

      在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...

  3. 数据类型、常量、变量、printf、scanf和运算符

    数据类型 常量 变量 printf函数介绍 scanf函数介绍 运算符 数据类型 数据类型是指数据在内存中存储的方式. C语言中有5大数据类型:基本类型.构造类型.指针类型.空类型.定义类型. C语言 ...

  4. 计算机网络(11)-----TCP连接的建立和释放

    TCP连接的建立和释放 概述 TCP运输连接的建立和释放是每一次面向连接的通信中必不可少的过程,运输连接有三个阶段:连接建立,数据传送和连接释放. TCP连接的建立 如图所示,假定A主机是客户端程序, ...

  5. 【初级】linux mv 命令详解及使用方法实战

    mv:移动文件或者将文件改名 前言: mv是move的缩写,顾名思义是移动.它的功能既能移动文件/文件夹,又可以用来改名,经常用来做文件的备份,比如再删除之前,先给文件做备份(保护数据)也是linux ...

  6. CentOS 5系统安装Django、Apache 、mod_wsgi部署Python环境教程

    Django,是一款针对Python环境的WEB开发框架,能够帮助我们构架快捷.简单的WEB框架设置,Django框架非常适合开发内容应用环境,所以在本文中,麦子将整理基于Centos系统部署安装Dj ...

  7. ionic的start-y属性初始化页面

    混合式开发移动app,要实现的是初始化页面时不展示搜索框,让页面向上移动一定位移. <ion-content class="has-subheader" start-y=&q ...

  8. 看的oracle数据库视频 记的一点笔记

    3个默认的用户    sys          //网络管理员  权限由上到下降低 [最后加上 as sysdba]    system  //本地管理员    scott     //普通用户  默 ...

  9. linux中的内存申请函数的区别 kmalloc, vmalloc

    kmalloc是返回连续内存的内存分配函数 vmalloc是返回较大内存空间的,不需要连续的内存分配函数.其速度较慢,并且不能在中断上下文调用.

  10. Java泛型中的? super T语法

    ? super T 语法将泛型类限制为所有T的超类(包括T自身),但只能用于参数中,不可以在返回值用加以限定.如果不加以限定,假设某个函数头为? super Manager get()由于编译器不知道 ...