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

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

如何转换现有的结构为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呢？XHTML虽然简单，但是它的内容很多，包括了一个网络设计师需要的绝大多数功能。XHTML一方面内容繁多复杂，但是从另一个角度来看它却是非常简单的。为了将XHTML分割成小的模块，W3C已经建立起了小型的已经定义好了的一系列XHTML元素，他们独立的能被与其他XML标准合并成的大型的更复杂的程序的简单设备所使用。

　　通过XHTML模型，程序设计师能够做如下的事情：

　　1.选择那些能够被使用XHTML构建块标准的设备所支持的元素。

　　2.在遵循XHTML标准的同时使用XML可以对XHTML扩展。

　　3.简单化的XHTML可以应用于像掌上电脑、移动电话、电视和家用电器等设备。

　　4.通过加入心的XML功能（像声音、多媒体的）将XHTML延续到复杂程序的设计上。

　　5.像XHTML基本（XHTML对于移动设备的一个子集）那样来定义XHTML的轮廓。

模块名描述
Applet Module * applet元素.
Base Module 定义基本元素.
Basic Forms Module 定义基本的表单元素
Basic Tables Module 定义基本的表格元素
Bi-directional Text Module 定义 bdo 元素.
Client Image Map Module 定义浏览器的 image map 元素.
Edit Module Defines the editing elements del and ins.
Forms Module Defines all elements used in forms.
Frames Module 定义框架集元素
Hypertext Module 定义 a 元素.
Iframe Module 定义 iframe 元素.
Image Module 定义 img 元素.
Intrinsic Events Module 定义事件改变属性元素
Legacy Module Defines deprecated* elements and attributes.
Link Module 定义link 元素.
List Module 定义 list 元素 ol, li, ul, dd, dt, dl.
Metainformation Module 定义 meta 元素.
Name Identification Module Defines the deprecated* name attribute.
Object Module 定义object 和param 元素.
Presentation Module 定义表现元素如 b 和 i.
Scripting Module 定义 script and noscript 元素.
Server Image Map Module 定义 server side image map 元素.
Structure Module 定义结构 html, head, title and body.
Style Attribute Module 定义 style 属性.
Style Sheet Module 定义style 元素.
Tables Module 定义表内应用的元素.
Target Module 定义 target 属性.
Text Module 定义 text container 元素如： p and h1.

XHTML DTD定义文档的类型。

　　在XHTML中我们必须声明文档的类型，以便于浏览器知道你的文档是什么类型的，而且声明部分要加在文档的head之前。如：

　　<!DOCTYPE Doctype goes here>

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

　　</head>

　　</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 的语法

　　简单的说写 XHTML 要用干净的 HTML 语法。

　　XHTML的一些其他语法要求：

　　属性名字必须小写。如：

　　错误代码：

　　正确的代码：

　　属性值必须要被引用。如：

　　错误的代码：

　　正确的代码：

　　属性的缩写被禁止。如：

　　错误的代码：

　　正确的代码：

　　列出一个表让大家知道：

　　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 来替换它。如：

　　错误代码：

　　正确的代码：

　　注意：我们为了使旧浏览器也能正常的执行该内容我们也可以在标签中同时使用id和name属性。如：

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

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

　　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>

　　</ul>

　　正确的应该是：

　　<ul>

　　　<li>Coffee</li>

　　　<li>Tea

　　　<ul>

　　　　<li>Black tea</li>

　　　　<li>Green tea</li>

　　　</ul>

　　　</li>

　　</ul>

　　观察上述的两段代码我们可以看到正确的里面我们在 </ul>之后插入 </li> 标签。

　　XHTML 文件一定要有正确的组织格式。

　　所有的XHTML应该正确的被嵌套在以<html>开始以</html>结束的元素里面，其他的元素可以有子元素，并且子元素也要被正确的嵌套在他们的父元素内。如：

　　<html>

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

上一篇: 将一幅图片作为按纽

下一篇: 使用createElement动态创建HTML对象

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

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

相关文章

阁下可能感兴趣的内容

推荐阅读