首先，什么是web标准？web标准是w3c组织为解决跨浏览器兼容问题而推出的关于网页开发时应遵守的规范。在网页的四个部分中网页的内容是由网页开发者自己定义的，因此这一部分无法标准化，而网页的结构（HTML）、行为(JAVASCRIPT)、表现(CSS)部分，W3C组织分别定义了相应的标准语言来进行开发，称之为web标准。

web标准不是某一种标准，而是一系列标准的集合，它包含结构化标准语言（XHTML/HTML）、表现标准语言（1998年5月推出）、行为标准语言等，详情参考（http：//www.w3c.org）;

一.XHTML与HTML的区别

1. XHTML是一项新技术，在浏览器和一些其他的软件都支持它之前，我们应该有必要熟悉一下这项技术。

它们之间最大的区别在于：

1.XHTML 元素一定要被正确的嵌套使用。

在HTML里一些元素可以不正确嵌套也能正常显示，如：
       <b><i>This text is bold and italic</b></i> 
       而在XHTML必须要正确嵌套之后才能正常使用，如：
         <b><i>This text is bold and italic</i></b>
注意：这个错误通常发生在当嵌套多层之后的标签里面。如：
<ul>
   <li>Coffee</li>
   <li>Tea
   <ul>
    <li>Black tea</li>
    <li>Green tea</li>
   </ul>
   <li>Milk</li>
</ul>
正确的应该是：
<ul>
   <li>Coffee</li>
   <li>Tea
   <ul>
    <li>Black tea</li>
    <li>Green tea</li>
   </ul>
   </li>
   <li>Milk</li>
</ul>
观察上述的两段代码我们可以看到正确的里面我们在 </ul>之后插入 </li> 标签。

XHTML 文件一定要有正确的组织格式。

所有的XHTML应该正确的被嵌套在以<html>开始以</html>结束的元素里面，其他的元素可以有子元素，并且子元素也要被正确的嵌套在他们的父元素内。如：
<html>
<head> ... </head>
<body> ... </body>
</html> 
标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序， XML 对大小写是敏感的。象 <br> 和 <BR> 是两个不同的标记。如错误代码：
<BODY>
<P>This is a paragraph</P>
</BODY> 
正确格式为：
<body>
<p>This is a paragraph</p>
</body>

所有的 XHTML 元素一定要关闭

不能有没有关闭的空的元素存在我们的代码中，其实对于这点我们是比较好结束的，有开始就应该有结束吗？例如错误代码：
<p>This is a paragraph
<p>This is another paragraph
正确的为：
<p>This is a paragraph</p>
<p>This is another paragraph</p>
独立的一个标签我们也要结束用 />来结束。
例如：错误代码
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
正确代码：
This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />
通过上面的几个例子我们基本上看出了HTML和XHTML之间的不同，那么我们应该从现在起应该试着改变我们现在的HTML，例如都使用小写的标记、在标记之后加上结束标记的符号 />。
XHTML 的语法
简单的说写 XHTML 要用干净的 HTML 语法。
XHTML的一些其他语法要求：
属性名字必须小写。如：
错误代码：
<table WIDTH="100%">
正确的代码：
<table width="100%"> 
属性值必须要被引用。如：
错误的代码：
<table width=100%>
正确的代码：
<table width="100%"> 
属性的缩写被禁止。如：
错误的代码：
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
正确的代码：
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
列出一个表让大家知道：
HTML          XHTML 
compact       compact="compact" 
checked       checked="checked" 
declare       declare="declare" 
readonly       readonly="readonly" 
disabled       disabled="disabled" 
selected      selected="selected" 
defer        defer="defer" 
ismap        ismap="ismap" 
nohref       nohref="nohref" 
noshade       noshade="noshade" 
nowrap       nowrap="nowrap" 
multiple      multiple="multiple" 
noresize      noresize="noresize"

用id属性代替name属性。如：
HTML 4.01 中为a，applet, frame, iframe, img 和 map定义了一个name属性.在 XHTML 里name属性是不能被使用的，应该用id 来替换它。如：

错误代码：
<img src="picture.gif" name="picture1" /> 
      正确的代码：
<img src="picture.gif" id="picture1" /> 
注意：我们为了使旧浏览器也能正常的执行该内容我们也可以在标签中同时使用id和name属性。如：
<img src="picture.gif" id="picture1" name="picture1" /> 
为了适应新的浏览器浏览我们在上述代码中的最后我加了/来结束标签。

XHTML DTD定义文档的类型。
在XHTML中我们必须声明文档的类型，以便于浏览器知道你的文档是什么类型的，而且声明部分要加在文档的head之前。如：
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head><body>
Body text goes here
</body></html>
注:DOCTYPE声明不是 XHTML 文档的一部分，它也不是文档的一个元素，所以我们没必要加上结束标签。
注:XHTML属性都是在<html>标签里面。然而当我们在w3.org验证时，并不解释我们的文档有没有声明类型。这是因为"xmlns=http://www.w3.org/1999/xhtml"是一个固定的值，如果你没声明的话，它也会被自动的加到<html>标签前。

我们使用DOCTYPE时的基本机构：
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(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">

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

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

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

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

如何转换现有的结构为XHTML

我们选择什么样的DOCTYPE？理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2.我们从现在的HTML转换为XHTML注意以下几点：

1）、在每个页面的首部都加上文档类型的说明。如：

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

当然可以选择其他类型的。

2）、标记和name 要都用小写。

我们可以自己编写一个替换程序，将你的HTML文档中的所有的标记都换为小写字母，还有name属性也要变为小写。

3）、所有的属性值都要用引号引起来。

4）、单独的标签，如: <hr> , <br> and <img>，都要在后面加/来结束。在这里不建议使用诸如：<img>和</img>形式的方式，直接在其后面加/就可以了，如<br />。

5）、我们打开W3C DTD 的官方网站：http://validator.w3.org/check/referer，验证时一般错误可能会出现在你的标签嵌套里。也可以用官方网站提供的转换工具tidy来实现转换：http://www.w3.org/People/Raggett/tidy/，我不建议大家直接来使用该工具来验证，因为我们毕竟是新学XHTML我们还是自己转换，这样我们可以熟悉XHTML啊，再者说我们还要学习tidy工具的使用，那样也是比较麻烦的。

6）、我们直接打开下面的页面可以直接输入网址来验证我们的程序了：http://webjx.com/js/standard.htm

XHTML 的模块化

为什么要模块化设计XHTML呢？XHTML虽然简单，但是它的内容很多，包括了一个网络设计师需要的绝大多数功能。XHTML一方面内容繁多复杂，但是从另一个角度来看它却是非常简单的。为了将XHTML分割成小的模块，W3C已经建立起了小型的已经定义好了的一系列XHTML元素，他们独立的能被与其他XML标准合并成的大型的更复杂的程序的简单设备所使用。

通过XHTML模型，程序设计师能够做如下的事情：

1.选择那些能够被使用XHTML构建块标准的设备所支持的元素。
2.在遵循XHTML标准的同时使用XML可以对XHTML扩展。
3.简单化的XHTML可以应用于像掌上电脑、移动电话、电视和家用电器等设备。
4.通过加入新的XML功能（像声音、多媒体的）将XHTML延续到复杂程序的设计上。
5.像XHTML基本（XHTML对于移动设备的一个子集）那样来定义XHTML的轮廓。

原文网址：http://hi.baidu.com/skway/item/711bbde63d7cebadc10d75c7

主要区别：
     XHTML 元素必须被正确地嵌套
     XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
     XHTML 标签名必须用小写字母
     XHTML 文档必须拥有根元素
     XHTML 文档要求给所有属性赋一个值
     XHTML 要求所有的属性必须用引号""括起来
     XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
     XHTML 文档不要在注释内容中使“--”
     XHTML 图片必须有说明文字
     XHTML 文档中用id属性代替name属性

二.web标准中结构、表现、行为的分离思想

分离的优点：

1）.有利于分工协作。提高开发效率。

2）.将网页的表现形式与结构分离，便于对网页的维护和优化。

3). 只包含结构的网页，更容易被搜索引擎搜索到。

4）.将网页的行为部分分离成单独的JAVASCRIPT文件，有助于代码的重用。

web标准的理解的更多相关文章

  1. 对Web标准的理解。可用性和可访问性

    一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...

  2. 谈谈对web标准的理解

    Web标准不是某一个标准,而是由一系列标准组合而成.网页主要由三部分组成:结构.表现和行为.对应的标准也分三方面:结构化标准语言主要包括XHTML和HTML以及XML,表现标准语言主要包括CSS,行为 ...

  3. 关于web标准的理解(转)

    从开始接触所谓web标准化,差不多也有两年多的时候了吧.从最初的疑惑和彷徨一直到现在,经历了每一个阶段.这段过程是痛苦的也是开心的,痛苦的是这个过程中没有人可以帮你答疑解惑,所有的问题都要你自己去解决 ...

  4. 自己对Web标准的理解

    1.WEB标准 WEB分层: 1.结构层(HTML)   2.表现(css) 3.行为(js) web标准的优点: * 易于维护:只需更改css文件,就能改变整站的样式: * 页面响应快:HTML文档 ...

  5. 对Web标准的理解

    Web标准是一系列标准的组合,包括结构化语言标准(XHTML/XML/HTML).表现标准语言(CSS)及行为标准语言(JavaScript).具体表现为: (1)Web标准规范要求,标签书写必须闭合 ...

  6. 对web标准的理解，以及对w3c组织的认识

    (1)web标准规范要求,书写标签必须闭合.标签小写.不乱嵌套,可提高搜索机器人对网页内容的搜索几率.--- SEO(2)建议使用外链css和js脚本,从而达到结构与行为.结构与表现的分离,提高页面的 ...

  7. 【转】Web标准中的常见问题

    本文转自http://www.tracefact.net/Misc/Common-Problems-Of-Web-Standard.aspx 引言 大概在2004年的时候,Web标准的概念藉由一本名为 ...

  8. HTML+CSS总结/有关于web标准的总结

    关于这一话题,我认为我们需要解决的问题有:什么是web标准?定义web标准的目的?遵循web标准的好处? 一.百度百科对web标准的解释: WEB标准不是某一个标准,而是一系列标准的集合. 网页的主要 ...

  9. 前端开发-Web标准

    Web标准 1理解:结构 => html表现 => css行为 => js(dom + es) WEB标准(结构.表现.行为分离)有哪些优点呢? 易于维护:只需更改CSS文件,就可以 ...

随机推荐

  1. Oracle常用命令大全

    一.ORACLE的启动和关闭 1.在单机环境下 要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下 su - oracle a.启动ORACLE系统 oracle>svrmgrl ...

  2. php 判断白天黑夜

    <?php $h=date('H'); if($h>=8 && $h<=20) echo '白天'; else echo '夜晚'; ?>

  3. 【Raspberry pi】GPIO使用指南

    http://www.cnblogs.com/qtsharp/archive/2013/02/28/2936800.html 树莓派RaspberryPi的RPi.GPIO使用指南   Python操 ...

  4. 将socket5代理转换为http代理

    归根结底还是万恶的ZFW,MD弄得现在Google,gmail,dropbox都用不了了,看来这是要万民欢迎大中华局域网的到来了.最近在使用一同学的Shadowsocks来突破GFW的限制,可是电脑o ...

  5. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  6. OGRE 保存纹理到文件

    Ogre::TexturePtr tex = Ogre::TextureManager::getSingleton( ).getByName( "YaHeiTexture" ); ...

  7. 细说多线程之Thread VS Runnable

    [线程创建的两种方式] [线程的生命周期] ● 就绪:创建了线程对象后,调用了线程的start(). (注意:此时线程只是进入了线程队列,等待获取CPU服务,具备了运行的条件,但并不一定已经开始运行了 ...

  8. AngularJs 解决浏览器在初始化代码未加载完毕时 而出现闪烁的问题

    1. ng-cloak; 因浏览器会先加载dom元素 而针对于{{pression}} 由于angularjs 还没加载完,会在页面出现闪烁 2.ng-bind; 用ng-bind代替{{expres ...

  9. windows平台 - 0基础学习node.js（一）

    首先得明白node.js做什么用的: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Nod ...

  10. 【BZOJ2194】快速傅立叶之二

    [BZOJ2194]快速傅立叶之二 Description 请计算C[k]=sigma(a[i]*b[i-k]) 其中 k < = i < n ,并且有 n < = 10 ^ 5. ...