您的位置：首页 > 编程技术 > html  >  XHTML教程:针对初学者的XHTML基础4

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

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

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:///js/standard.htm

 

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" />


　　为了适应新的浏览器浏览我们在上述代码中的最后我加了/来结束标签。

 

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

　　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，例如都使用小写的标记、在标记之后加上结束标记的符号 />。

 

[!--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