想必现在有不少人知道有xtml,对于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="/blog/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的代码校验。