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

 更新时间:2016年9月20日 19:06  点击:1339

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

  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+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>

  <title>This is bad HTML</title>

  <body>

  <h1>Bad HTML


  </body>

  虽然含有错误代码,但是当我们在浏览器中浏览时还能正常显示。XML是一个标记语言,但是它要求在网页中出现的任何元素都应该被标记出来,XML是用来描述网页中的数据的,而HTML用来显示网页中的元素的。目前我们上网使用的各种浏览器技术,包括手提电脑、手机上网浏览等等,都要求浏览的一些内容都要被正确标记,如果有错误的标记可能会使显示特别混乱、甚至不能正常显示。

  因此联合 HTML 和XML , 还有其他的一些技术,我们得到了一种现在有用的而且在将来也有用的语言 - XHTML。

 

  当在将来都规范的时候我们就要用的 XHTML 正确格式的标记了,使所有的浏览器都能正确的执行,所以我们现在有必要开始学习XHTML了。

  XHTML和HTML之间的区别:

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

本文来自:网页教学网

XHTML 1.0是基于HTML4.0的,因此它能够被已有的浏览器解析。就意味着可以立即开始使用XHTML。另外不管是转换一个已经存在的站点还是建立新的代码,都可以使用工具来帮助,一致事半功倍。

W3C将XHTML 1.0分为三种规范:XHTML-1.0-Strict(严格)、XHTML-1.0-Transitional(过渡)和XHTML-1.0-Frameset(框架)。

一般建议用XHTML-1.0-Transitional(过渡)进行现有站点的转换,因为在我们写html的时候可能过多的在HTML中包含很多控制外观的标记,否则要改成css控制的话工作量相对增大.还有一个就是浏览器问题,就是有些用户可能用的是不支持新版css2(建议用XHTML & CSS2)的旧式浏览器,所以用XHTML-1.0-Transitional(过渡)来分担部分控制外观是理想的.

使页符合XHTML
当您创建新页时,您可以使该页符合 XHTML。您还可以使现有的 HTML 文档符合 XHTML。

若要新建符合 XHTML 的文档,请执行以下操作:
选择“文件” >“新建”。
即出现“新建文档”对话框。

选择一种文档类型。
选择“使文档符合 XHTML”选项。
注意:不是所有的文档类型都可以使之符合 XHTML。

单击“确定”。
若要以默认方式创建符合 XHTML 的文档,请执行以下操作:
选择“编辑”>“首选参数”或 Dreamweaver >“首选参数”(Mac OS X),然后选择“新建文档”类别。
在“新建文档”类别中,选择一种文档类型并选择“使文档符合 XHTML”选项。
单击“确定”。
若要使现有 HTML 文档符合 XHTML,请执行以下操作:
打开文档,然后执行下列操作之一:
对于不含框架的文档,选择“文件”>“转换”>“XHTML”。
对于包含框架的文档,选择一个框架并选择“文件”>“转换”>“XHTML”。若要转换整个文档,请对每个框架以及框架页文档重复此步骤。
注意:您不能转换模板的实例,因为模板的实例必须与它所基于的模板使用相同的语言。例如,基于 XHTML 模板的文档将始终是 XHTML,基于不符合 XHTML 的 HTML 模板的文档将始终是 HTML,并且不能把它转换为 XHTML 或其它语言。

框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站。

框架结构标签<frameset></frameset>
框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解,<frameset>其实就是一个大<table>,只不过整个页面是<table>的主体,而每一个单元格的内容都是一个独立的网页。

给框架结构分栏(”cols“和”rows“属性)
既然我们说框架结构可以被理解为一网页为单元格的表格,那么就一定要分栏了。其中cols属性将页面分为几列,而rows属性则将页面分为几行。下面来看一个例子。

 代码如下 复制代码
<html>
<frameset rows="25%,75%">
<frame src="1.html"/>
<frame src="3.html"/>
</frameset>
</html>

其中"rows="25%,75%"表示该页面共分为两行,因为它有两个属性值,而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签<frame>


上面的实例中已经用到了<frame>标签,它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的,如果你希望它们大小固定可以使用noresize="noresize"属性。

注意:<frame>标签是空标签,需要加上一个"/"以符合XHTML的要求。

关于<noframe>标签
该标签只有当浏览器不支持框架结构时才会起到作用,由于现在几乎所有网民的浏览器都支持框架结构,所以我们在这里就不介绍这个标签了。如果你想了解相关内容,可以查阅网络上的HTML手册。

框架结构和DTD
框架页面的DTD与一般网页不同。声明方法如下:

 代码如下 复制代码

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

 

[!--infotagslink--]

相关文章

  • Painter绘制红衣喝酒男水粉画效果教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
  • iPhone6怎么激活?两种苹果iPhone6激活教程图文详解

    iPhone6新机需要激活后才可以正常使用,那么对于小白用户来说,iPhone6如何激活使用呢?针对此问题,本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法,希望本文能够帮助到大家...2022-09-14
  • Photoshop制作雨中野外孤独行走的一头牛海报教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
  • Painter绘制帅气卡通魔法王子漫画教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程,各位想知道绘制步骤的使用者,那么下面就快来跟着小编一起看一看教程...2016-09-14
  • Illustrator鼠绘堆雪人的孩童矢量插画教程

    今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程,各位想知道具体绘制方法的使用者们,那么各位就快来跟着小编来看看...2016-09-14
  • 安卓手机app添加支付宝支付开发教程

    支付宝支付在国内算是大家了,我们到处都可以使用支付宝了,下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
  • 美图秀秀给照片天空加蓝天白云教程一览

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程,各位想知道具体制作步骤的,那么下面就来跟着小编一起看看吧。 ...2016-09-14
  • llustrator绘制扁平化风格卡通警察护士空姐肖像教程

    今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程,各位想知道具体绘制步骤的使用者们,那么下面就快来跟着小编...2016-09-14
  • Illustrator绘制一个方形的录音机图标教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程,各位想知道具体绘制方法的使用者们,那么下面就来看一下小编给大家分...2016-09-14
  • photoshop简单制作一个搞笑的换脸表情包教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
  • photoshop给手绘画调色变换场景后期教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
  • 美图秀秀让你胸丰满起来处理教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程,各位想知道具体处理步骤的,那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
  • Painter绘制雷神传插画教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程,各位想知道具体绘制步骤的使用者,那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
  • MySQL中的联合索引学习教程

    联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段,一个查询可以只使用索引中的一部份,但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找,但不支持 b,c进...2015-11-24
  • Lua语言新手简单入门教程

    这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程,文中通过示例代码一步步介绍的非常详细,对各位新手们的入门提供了一个很方便的教程,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。...2020-06-30
  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
  • 美图秀秀制作隔离区聊天背景教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作隔离区聊天背景的教程,各位想知道具体方法的,那么下面就快来跟着小编一起看一看吧。 给各位美图秀...2016-09-14
  • photoshop素材合成古典园林场景制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说用素材合成古典园林场景教程,各位想知道到底该怎么制作的,那么就快来一起看一下吧。 给各位photoshop...2016-09-14
  • PHP扩展开发教程(总结)

    PHP是一种解释型的语言,对于用户而言,我们精心的控制内存意味着easier prototyping和更少的崩溃!当我们深入到内核之后,所有的安全防线都已经被越过,最终还是要依赖于真正有责任心的软件工程师来保证系统的稳定运行。1、线...2015-11-08