XHTML详解

翟昊明

2023-12-01

XHTML是更标准的HTML

在HTML的发展史中，最广为人知的是HTML3.2和HTML4.0.1。HTML4.0.1和XHTML1.0相互兼容，我们现在编写的HTML文档时，都应该遵守HTML4.0.1规范

XHTML：可扩展超文本编辑语言，XHTML和HTML4.0.1具有很好的兼容性，而且是更严格更纯净的HTML，由于HTML已经发展到了一种极度混乱的程度，所以W3c组织制定了XHTML,它的目标是取代原有的HTML，简单的说，XHTML就是最新版本的HTML规范，所以现在我们重新编写网页时，应该遵循最新的XHTML规范，这样可以保持较好的向后兼容性

若标签没有正确的结束，显然违背了结构化文档的规则，但使用浏览器来浏览这份文档时，依然可以看到浏览效果这就是HTML不规范的地方，而XHTML则致力于消除这种不规范，它要求HTML文档首先必须是一份XML文档

XML文档是一种结构化文档，如下四个基本规则：

1. 整个文档有且仅有一个跟元素

2. 每个元素由开始标签和结束标签组成，除非使用空元素语法(<br/>)

3. 元素与元素之间应该合理嵌套

4. 元素的属性必须有属性值，而且属性值应该用引号(单引号，双引号)引起来

计算机里的浏览器可以对付各种不规范的HTML文档，但很多浏览器运行在移动电话和手持设备上，他们就没有能力来处理那些糟糕的HTML文档，所以w3c建议使用XML规范来约束HTML文档，将HTML和XML的长处结合，从而得到了现在和未来都能使用的标记语言XHTML

XHTML的基本语法

XHTML比HTML更加规范，更加严格，因而掌握了XHtML的知识自然也就学会了编写HTML文档。而且是更加严格，更加规范的HTML文档。

1. XHTML文档首先是一份XML文档，所以遵守XML的四条基本规则，所有标记名都用小写字母，所有属性名都应小写，属性都必须指定属性值，不能简写，而且属性值必须使用引号引起来

XHTML和DTD

XHTML首先是一份XML文档，除了需要满足基本的文档规则之外，还应该使用DTD（Document Type Definition,即文档类型定义）或Schema来定义XML文档的语义约束，所以XHTML文档也应该指定合适的语义约束，XHTML使用　DTD来指定语义约束

DTD信息应添加到XHTML文档的开头部分，也是XHTML文档的必须部分

XHTML1.0的三种文档类型，分别对应如下三种DTD声明：

XHTML 1.0 Strict：整个文档需要干净的XHTML标记

严格的XHTML语义约束

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhrml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional：这种文档语义约束和传统的HTML文档保持了较好的兼容性，是常用的DTD语义约束

传统的XHTML语义约束

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhrml1/DTD/xhtml1- Transitional.dtd”>

XHTML 1.0 Frameset：页面中需要使用框架，使用这种类型的DTD语义约束

框架集XHTML语义约束

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

一旦指定了某个页面使用框架集，则该页面不能再包含<body/>元素

XHTML的常用标签:

1. 基本标签：

<html>:是HTML的根元素，在XHTML文档中使用时，可以指定一个xmlns属性，其值只能是http://www.w3.org/1999/xhtml.

<h1>到<h6>：定义标题一到标题六

<!--…-à:定义注释

<div>:定义文档中的节<span>与<div>基本相似，区别只是<span>定义的节默认不会换行

几乎所有的HTML元素都可以指定：id,style,class属性，id属性用于为XHTML元素指定一个唯一的标识，该标识是通过DOM访问XHTML元素的重要途径，class和style属性是css样式相关属性

<span/>,<div/>,<p/>:三个元素的效果有点类似，都可作为其他内容的容器。

<span/>元素和<p/>元素只能包含文本，图像，超链接文本格式化元素，表单控件元素等内容，<p/>元素可包含<span/>元素，但<span/>元素不能包含<p/>元素。<div/>元素除了包含以上元素（包含<p/>,<span>）,还可包含<h1>到<h6>,<form…/>,<table../>,列表项元素和<div…/>元素，由此可见<div…/>元素可以包含更多的内容

1. 文本格式标签：基本的格式化，如果需要对文本进行更丰富的格式化，建议使用CSS

<bdo>:定义文本的显示方向，dir属性值只能是ltr或者rtl

2. 超级链接和锚点

XHTML使用超链接与网络上的另一个资源保持关联

<a…/>元素 href：指定超链接所关联的另一个资源

Target：指定使用框架集中的哪个框架来装载另一个资源，该属性值可以是：_self,_blank,_top,_parent等值，分别代表自身，新窗口，顶层框架，父框架来装载新资源

Href属性值如果是一个相对路径，浏览器会再该页面的基准路径上加上该文件名作为此超链接所关联的资源

URL：统一资源定位器，用于对互联网上的文档进行寻址。

URL地址解释：

Scheme://host.domain:port/path/filename

Scheme:指定因特网服务的类型，最流行的类型是HTTP

Host:指定此域中的主机，如果省却掉，则HTTP默认主机是www

Domain:指定因特网域名，比如 XXX.org等

Port:指定主机的端口号。端口号可以被省略，HTTP服务的默认端口是80

Path:指定远程服务器上的路径，该路径可以被省略，省略该路径则默认被定为到网站的根目录

Filename：指定远程文档的名称，如果省略通常会定位到index.html等文件，或定位到Web服务器上设置的其他文件

URL最流行的scheme以及对应的资源

Scheme 对应资源

File 本地磁盘上

ftp 远程ftp服务器上的文件

http World Wide Web服务器上的文件

news 新闻组上的文件

telnet Telnet连接

gopher 远程Gopher服务器上的文件

<a…/>元素还可以生成一个命名锚点，命名锚点用于在XHTML页面生成一个定位点，这样允许超链接直接连接到指定页面的该定位点

插入定位锚点需要指定name属性，name 属性的值就是该命名锚点的名称<a name=”test”/><a/> <a href=”asf.html#test”>定位到test锚点</a>

定位到锚点需要在URL资源后指定锚点名，锚点名和资源之间以#隔开

列表相关标签

<ul>:无序列表只能包含<li…/>子元素

<ol>:有序列表，只能包含<li…/>子元素，在XHTML 1.0 Transitional的语义下，该元素可以指定如下两个属性;start:指定列表项的启始数字。默认是第一个，如1，A等，type:指定使用哪种类型的编号，例如：1代表使用数字，A和a代表使用字母，I和i代表使用罗马数字

<li>:定义列表项目，该元素里可以包含与<div…/>完全类似的内容，因此合一包含较多类型的子元素

<dl>:也用于定义列表，只能包含<dt…/>和<dd…/>两种子元素

<dt>:定义标题列表项，该元素只能包含文本，图像，超级链接，文本格式化元素和表单控件元素

<dd>:定义普通列列表项，可以包含与<div…/>完全类似的内容因此可以包含较多类型的子元素

图像相关标签

<img…/>

<map>:用于定义图像映射，该元素主要包含一个或多个<area…/>子元素，每个<area…/>子元素定义一个区域，不同的区域可以连接到不同的URL

<area>:用于定义图像映射的内部区域，该元素只能是一个空元素，可以指定如下属性：

Shape:该内部区域是哪种区域，默认是“rect”即矩形区域，还可以是circle,poly圆形区域和多边形区域

Cords:可指定多个坐标值，用于确定图像的位置

Href:用于确定该区域所连接的资源

Alt:指定一段文本，为该图片区域的提示信息

Target:用于指定使用框架集中的哪个框架来装载另一个资源

<map…/>元素定义了图像映射，就可以让指定图片使用该图像映射，通过<img…/>元素指定usermap属性让该图片使用图像映射，设置usemap属性值为#mapname即可

表格相关标签

<table>只能包含0个或1个<caption…/>子元素，0个或一个<thread…/>子元素，0个或一个<tfoot…/>子元素，多个<tr…/>子元素，多个<tbody…/>子元素

<th>:用于定义表格页眉的单元格和<td>用法完全一样，只是浏览器在呈现时有一定差别

<tbody>:用于定义表格的主体，该元素只能包含<tr…/>子元素，使用<tbody>可以将表格分为几个独立的部分，将表格中的一行或几行合并成一组，使用Ajax时常需要动态修改表格中的某几行，就需要使用<tbody…/>元素了

<thead>定义表格的页头，用法与<tbody>基本相似，指定功能稍有差别

<tfoot>定义表格的页脚，用法与<tbody>基本相似，指定功能稍有差别

<thead…/>,<tfoot…/>,<tbody…/>元素可以让我们对表格中的行进行分组，每个<tbody…/>都是一组，可以多行，在Ajax编程中经常用到，如果在创建表格时，希望拥有一个标题行，由多个数据行组成，以及位于底部的一个统计行，以便浏览器对表格标题和页脚之间的表格内容进行滚动，且在打印成表格内容时表格的表头和页脚打印在包含表格数据的每个页面上，都要借助与这三个元素实现

<table>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbofy>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

这三个元素只能在<table…/>元素内使用这些标签

框架相关标签

通过使用框架可以将浏览器分成几个不同的部分，允许在一个浏览器窗口中显示多个XHTML页面

在XHTML中使用框架，应该在XHTML页面中使用”XHTML 1.0 Frameset”DTD，而且框架集主页面的<html…/>元素中不允许包含<body>子元素（普通的<html…/>元素只能包含<head…/>和<body…/>两个子元素），如果需要在框架集页面中包含<body…/>元素，应将<body…/>子元素放在<noframes…/>元素之中，框架集页面使用<frame…/>元素来装载其他页面

<framset>用于定义一个框架集，包含其他框架，该元素只能包含<frameset…/>,<frame…/>,<noframes…/>三种子元素

<noframes>用于定义框架集的非框架部分，该元素的内容不会被显示出来

与框架相关的还有一个<iframe…/>元素，该元素可以在XHTML页面中使用，用于生成一个内联框架，在用法上与<frame…/>元素非常相似，但不支持noresize属性，只是该元素无需放在<frameset…/>元素内部，可以直接放在HTML页面的任意位置

XHTML的表单标签

<form…/> 属性：enctype；用于指定对表单内容进行编码所使用的字符集

Target:用于指定使用哪种方式打开目标URL(提交请求会打开另一个URL资源)

Get请求会将请求参数的名和值转换成字符串，并附加在URL之后，传送的数据量较小，一般不大于2KB

POST请求提交表单的方式发送，需要设置<form…/>元素的method属性为post，传送的数据量大，通常认为post请求参数的大小不受限制，往往取决于服务器的限制，post请求传输的数据量总比GET传输的数据量大，而且post方式发送的请求参数以及对应的参数值放在HTML Header中传输，用户不能再地址栏里看到请求参数值，相对安全性高

HTML HEADER：

Http头信息。一个表单在提交后会被转换成http头信息，比如你有一个 from1，里面有二个文本框a,b.在提交后A，B会被转成一段信息附加到http头，然后请求这个URL并发送这个头信息，远程服务器则可以通过http hander获取你提交的AB信息

表单的enctype属性用于指定表单数据的编码方式有如下3个值：

Application/x-www-form-urlencoded:这是默认的编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式

Multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据，会把文件域指定文件的内容也封装到请求参数里，需要通过表单上传文件时使用该属性值

Text/plain:这种编码方式在表单的action属性为mailto:url的形式时比较方便，这种方式主要适用与直接通过表单发送邮件

在XHTML页面中，提交请求通常有两种方式，提交表单和使用超文本链接，提交表单可以让用户输入请求参数，并以PSOt方式提交请求，如果以超链接方式来提交请求，则只能提交GET请求，超链接提交请求也可以包含请求参数，只是不能收集用户输入而已

<form…/>元素里定义一个或多个表单控件，一旦提交该表单，该表单里的表单控件将会转换成请求参数规则如下：

1. 每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数

2. 如果有多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值

3. 表单控件的name属性指定请求参数名，value指定请求参数值

4. 如果某个表单控件设置了disable=”disable”属性，则该表单控件不再生成请求参数

大部分表单控件，<input…/>(除了type=”hidden”)<button../><select…/><textarea…/>都能获得鼠标焦点，响应鼠标事件，因此都可以设置onfocus和onblur属性，分别用于设置得到焦点和失去焦点的事件响应，而且这些表单控件都可以指定一个tabindex属性，通过设置tabindex属性，可让用户无需使用鼠标就可以让输入焦点在个表单控件上转移

单选框，复选框不能接受用户输入，因此定义它们时也会指定value属性值，用于设置它们对应的请求参数值，对于单选框，复选框而言，只有当它们被勾选后，才会生成对应的请求参数

文件上传域会生成一个单行文本框和一个“浏览按钮”允许用户通过浏览本地磁盘文件，并将该文件上传到服务器

图像域和提交域的作用基本一样，作用基本一样，单击它们都会导致表单被提交，区别就是图像域是一个图像按钮

<input…/>属性：

Checked;用于设置单选框，复选框的初始状态是否被选中，值只能是checked

Disable:设置首次加载时禁用此元素，值只能是disable表示该元素被禁用，，该元素无法获得输入焦点，无法被选中，无法在其中输入文本，无法响应鼠标单击，双击等事件，当type=”hidden”时，不能指定该属性

Maxlength:其值是一个数字，用于指定文本框中允许输入的最大字符数

Size:用于指定该元素的宽度当type=”hidden”时，不能指定该属性

Src:用于指定图像域所显示图像的URL，只有当type=”image” 时才可以指定该属性

Align:用于指定图像域之后的文本的对齐方式，值可以是：left,right,top,texttop,middle,absmiddle,baseline,bottom,absbottom等，只有当type=”image”时才可指定该属性

采用Get方式发送请求，所以请求参数名，请求参数值将被追加到URL之后，，参数字符串的请求参数名和请求参数值之间以等号（=）隔开，多组请求参数之间以&隔开

请求URL的最后部分是 ok = %CC%E1%BD%BB ，该请求参数由用户单击的“提交”按钮生成，用户通过哪个按钮提交表单，则该按钮也会生成请求参数，前提是该按钮指定了name 属性值。该“提交”按钮的value属性值为“提交”，使用application/x-www-form-urlencoded对“提交”字符串编码后得到“%CC%E1%BD%BB”字符串

使用label定义标签

<label…/>元素不需要生成请求参数，因此不要为<lable…/>元素指定value 属性值

<label…/>元素可已指定一个for属性，用于指定该标签与哪个表单控件关联

<label…/>生成的标签有一个作用，当用户单击<label…/>所生成的标签时，该标签关联的表单控件元素就会获得焦点

让标签和表单控件关联有两种方式：

隐式使用for属性：指定<label…/>元素的for 属性为所关联表单控件的id属性值

显式关联：将普通文本，表单控件一起放在<label…/>元素内部即可(尽量少用，浏览器不是很好的支持)

<form>

</form>

使用Button定义按钮

<button…/>元素用于定义一个按钮，在其内部可以包含普通文本，文本格式化标签，图像等内容，这也是<button…/>按钮和<input…/>按钮的不同之处<button…/>和<input… type=”button”/>相比提供了更为强大的功能和更丰富的内容，<button></button>标记之间的所有内容都是该按钮的内容，其中包括任何可接受的正文内容，文本或图像。

<button>与</button>标记之间不要放置图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

列表框和下拉菜单：

一个<select…/>元素到底是生成列表框还是生成下拉菜单，完全由是否指定了size或multipe属性来决定，只要指定了这两个属性其中之一，浏览器就会生成列表框，否则就是下拉菜单

<select…/>元素里只能包含<option…/>和<optgroup…/>两种子元素，其中<option…/>定义列表项或菜单项，而<optrgoup…/>用于定义列表项或菜单项组。<option…/>元素里只能包含文本内容作为该选项的文本，<optgroup…/>里只能包含<option…/>子元素，处于<optgroup…/>里的<option…/>就属于该组

<optgroup…/>属性：label：用于指定该选型组的标签，这个属性必填

Disable:用于设置禁用该选项组里的所有选项，其值只能是disabled.

Textarea定义文本域

可以接受用户输入，用户可以选中文本域中的文本，因此可以指定onselect和onchange两个属性，分别用于响应文本域内文本被选中和文本被修改的事件

<textarea…/>指定name 属性作为请求参数的参数名，与单行文本不同的是，<textarea…/>

不能指定value属性，<textarea>和</textarea>标记之间的内容将作为<textarea…/>所对应的请求参数的参数值

XHTML元信息

<base…/>用于指定该页面中的所有连接的基准链接，必须是空元素，href:用于指定所有链接的基准链接，target:用于指定超级链接默认在哪个窗口打开，其值只能是_blank _parent _self _top其中之一

Name:指定元信息的名称

Content:用于指定元信息的值

http-equiv:

Expires:指定网页的过期时间，一旦网页过期，则必须重新从服务器上下载

Pragma:指定禁用浏览器从本地磁盘缓存中调阅页面内容，浏览器一旦离开该页面就无法脱机访问该页面

Refresh:用于指定浏览器多长时间后自动刷新指定页面

Set-Cookie:设置Cookie，如果网页过期，那么客户端上的Cookie也将被删除

Content-Type:设置该页面的内容类型和所用的字符集

XHTML详解

相关阅读

相关文章

相关问答

相关文档