html、htm、shtml、shtm、XHTML区…

每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。 

首先介绍一下html与htm 

关于HTML,HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 

关于HTM,实际上HTM与HTML没有本质意义的区别,只是为了满足DOS仅能识别8+3的文件名而已,因为一些老的系统(win32)不能识别四位文件名,所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件,但编写网页地址的时候必须是完全对应的,也就是说index.htm和index.html是两个不同的文件,对应着不同的地址。值得一提的是UNIX系统中对大小写敏感,不吻合的话就可能报没有文件或者找不到文件。 

其次介绍一下shtml和shtm 

关于shtml,shtml是一种基于SSI技术的文件,也就是Server Side Include--SSI 服务器端包含指令,一些Web Server如果有SSI功能的话就会对shtml文件特殊招待,服务器会先扫一次shtml文件看没有特殊的SSI指令存在,如果有的话就按Web Server设定规则解释SSI指令,解释完后跟一般html一起调去客户端。 

关于shtm,shtm与shtml的关系和htm与html的关系大致相似,这里就不多说了。 

html或htm与shtml或shtm的关系是什么 
html或者htm是一种静态的页面格式,也就是说不需要服务器解析其中的脚本,或者说里面没有服务器端执行的脚本,而shtml或者shtm由于它基于SSI技术,当有服务器端可执行脚本时被当作一种动态编程语言来看待,就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。

XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。 

2000年底,国际W3C组织(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的基于HTML语言设计的网站,直接采用XML还为时过早。因此,在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。所以,建立XHTML的目的就是实现HTML向XML的过渡。目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用(即通常所说的CSS+DIV)。 



XHTML和HTML之间的区别XHTML和HTML之间的区别: 
  XHTML是一项新技术,在浏览器和一些其他的软件都支持它之前,我们应该有必要熟悉一下这项技术。为了我们更好的学习XHTML之前我们应该熟悉一下HTML4.0,我们可以去下载一个参考手册来熟悉一下。以便于我们学起XHTML来更简单,换句话说我们现在使用HTML编写代码时应该尽力少写错误代码,如:都要使用小写的字符来编写HTML,每个标记之后都要加上标记的结束如:<p>网页教学网欢迎您的光临</p> 结束一定要有,我们要保持这种规则。

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

  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的代码校验。

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


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

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

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

  二、标记和name 要都用小写。

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

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

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

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

  六、我们直接打开下面的页面可以直接输入网址来验证我们的程序了: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的轮廓。 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值