XHTML教程:针对初学者的XHTML基础

2016-02-19 10:15 3 1 收藏

下面是个超简单的XHTML教程:针对初学者的XHTML基础教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】


  本站原创内容,转载请注明出处脚本之家
  前言:
  现在都讲究标准建站,而标准建站使用的技术主要是XHTML CSS,而现在我们普遍使用的是HTML代码,那么我该如何转换呢?以及HTML和XHTML有什么不同呢?在这个教程里,你将学到HTML和XHTML之间的不同,以及如何将HTML转换为XHTML。毕竟XHTML是发展的方向,所以我觉得该教程有必要在本站上发布。我感觉要是你想使用标准还是最好先学HTML,因为比较简单,然后再来看该教程。
  XHTML介绍:
  XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写,而HTML则是 HyperText Markup Language(超文本标记语言) ,这是名字的不同。其实我们说得标准应该是XML,那为什么要学习XHTML呢?因为现在的HTML代码烦琐,危机四伏,但是XML使用环境还不成熟,所以推出了一个过度的产品就是XHTML,它起着呈上起下的作用。也有人认为XHTML是HTML的一个升级版本,其实也是正确的,我的理解是XHTML把HTML做得更加规范的一个标记语言,使HTML变得功能强大,减少了代码的烦琐尤其是表格。
  XHTML是在2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准的,认为是HTML的一个最新版本,并且将逐渐替换HTML。现在所有的浏览器都支持XHTML,XHTML兼容 HTML 4.0。也有人认为XHTML就是HTML4.01。如果你在学习过程中自己编写了一个符合标准的站,你可以通过W3C的验证,验证通过后你将会得到一个标志,通常是XHTML1.0认证和CSS验证。我也不清楚目前国内有多少个网站同时通过了这两个验证。大家可以去http://www.w3.org/这个站点去验证你的站,如果符合那两个规则则会分别给我们两段代码加到你的网页上向别人展示说明你采用了标准建站啊,牛啊!
  为什么我们使用XHTML
  XHTML是HTML升级为XML的过度产品,被定为一个标准,XHTML完全兼容HTML4.01,并且具有XML的语法。下面我们来看一个含有错误代码的HTML,如下:
  html
  head
  titleThis is bad HTML/title
  body
  h1Bad HTML
  /body
  虽然含有错误代码,但是当我们在浏览器中浏览时还能正常显示。XML是一个标记语言,但是它要求在网页中出现的任何元素都应该被标记出来,XML是用来描述网页中的数据的,而HTML用来显示网页中的元素的。目前我们上网使用的各种浏览器技术,包括手提电脑、手机上网浏览等等,都要求浏览的一些内容都要被正确标记,如果有错误的标记可能会使显示特别混乱、甚至不能正常显示。
  因此联合 HTML 和XML , 还有其他的一些技术,我们得到了一种现在有用的而且在将来也有用的语言 - XHTML。
  当在将来都规范的时候我们就要用的 XHTML 正确格式的标记了,使所有的浏览器都能正确的执行,所以我们现在有必要开始学习XHTML了。
  XHTML和HTML之间的区别:
  XHTML是一项新技术,在浏览器和一些其他的软件都支持它之前,我们应该有必要熟悉一下这项技术。为了我们更好的学习XHTML之前我们应该熟悉一下HTML4.0,我们可以去下载一个参考手册来熟悉一下。以便于我们学起XHTML来更简单,换句话说我们现在使用HTML编写代码时应该尽力少写错误代码,如:都要使用小写的字符来编写HTML,每个标记之后都要加上标记的结束如:p脚本之家欢迎您的光临/p 结束一定要有,我们要保持这种规则。

  它们之间最大的区别在于:
  1.XHTML 元素一定要被正确的嵌套使用。
  在HTML里一些元素可以不正确嵌套也能正常显示,如:
  biThis text is bold and italic/b/i
  而在XHTML必须要正确嵌套之后才能正常使用,如:
  biThis text is bold and italic/i/b
  注意:这个错误通常发生在当嵌套多层之后的标签里面。如:
  ul
   liCoffee/li
   liTea
   ul
    liBlack tea/li
    liGreen tea/li
   /ul
   liMilk/li
  /ul
  正确的应该是:
  ul
   liCoffee/li
   liTea
   ul
    liBlack tea/li
    liGreen tea/li
   /ul
   /li
   liMilk/li
  /ul
  观察上述的两段代码我们可以看到正确的里面我们在 /ul之后插入 /li 标签。
  XHTML 文件一定要有正确的组织格式。
  所有的XHTML应该正确的被嵌套在以html开始以/html结束的元素里面,其他的元素可以有子元素,并且子元素也要被正确的嵌套在他们的父元素内。如:
  html
  head ... /head
  body ... /body
  /html
  标签名字一定要用小写字母。
  因为 XHTML文档是XML应用程序, XML 对大小写是敏感的。象 br 和 BR 是两个不同的标记。如错误代码:
  BODY
  PThis is a paragraph/P
  /BODY
  正确格式为:
  body
  pThis is a paragraph/p
  /body
  所有的 XHTML 元素一定要关闭
  不能有没有关闭的空的元素存在我们的代码中,其实对于这点我们是比较好结束的,有开始就应该有结束吗?例如错误代码:
  pThis is a paragraph
  pThis is another paragraph
  正确的为:
  pThis is a paragraph/p
  pThis is another paragraph/p
  独立的一个标签我们也要结束用 /来结束。
  例如:错误代码
  This is a breakbr
  Here comes a horizontal rule:hr
  Here's an image img src="happy.gif" alt="Happy face"
  正确代码:
  This is a breakbr /
  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
  titleTitle goes here/title
  /headbody
  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://jb51.net/js/standard.htm

来源:http://www.tulaoshi.com/n/20160219/1593986.html

延伸阅读
标签: Web开发
本文主要是让初学者认识了解XHTML的一些基础知识,以及和HTML的一些区别,希望对初学者有帮助。 HTML语言是我们建立网页的工具,从它出现发展到现在,规范不断完善,功能越来越强。但是依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上日新月异的应用需求。2000年底,国际W3C(World Wide Web Consortium)组...
初学者化妆步骤教程——遮瑕打底 上粉底遮盖原肤色,我们也可以说是打底色,粉底的颜色决定了你的化妆定下一个基本颜色的色调。一般来说要选择与你自己本身肤色相近的粉底;皮肤偏干型选择保湿比较好的粉底液、BB霜、气垫BB,皮肤偏油的也可以选择定妆效果持久的粉底液,不适合气垫BB,最适合干粉饼。 初学者化妆步骤教...
初学者的化妆步骤 初学者的化妆步骤 初学者正确化妆步骤 化妆步骤1:面部清洁 生活妆对面部皮肤的清洁要求较高,以油性皮肤为例,如果皮肤上的油脂没清洗干净,那么粉底打不上去,即使上去了也很容易脱妆,导致妆容变得花花的。 初学者的化妆步骤 初学者正确化妆步骤 化妆步骤2:修饰眉形 ...
标签: Web开发
本文简单让大家认识一下XHTML,了解XHTML的基础知识 什么是XHTML XHTML是TheExtensibleHyperTextMarkupLanguage(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是...
标签: PS PS教程
本文由 中国 Derek-Yu(带鱼) 整理,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 很多初学者经常犯这样的错误:不明确自己的学习方向!看见别人调图漂亮就也跟着调图,看见别人做的特效眩目又学特效,看见别...

经验教程

411

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部