XHTMLMP精要-优快云博客

我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP。

一：XHTML MP的语法规则
我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP
构建，以供手持设备的访问，如手机、PDA等。
XHTML MP是XHTML的子集，因此继承了它的语法。
XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则：
1：标签必须正确闭合！

XHTML MP 教程段落 1

XHTML MP tutorial paragraph 2

XHTML MP tutorial paragraph 3

有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTML MP tutorial paragraph 1），
就必须用这种形式：Line break
。请注意一定要加上斜杠

2：标签和属性都必须是用小写
正确的写法：

XHTML MP tutorial paragraph 1

XHTML MP tutorial paragraph 2

XHTML MP tutorial paragraph 3

3：属性的值必须放置在双引号内

XHTML MP tutorial paragraph 1

4：不支持属性简写
在html中，如下写法是正确的：

而xhtml中必须这样写：

下面再举一个例子：

XHTML MP Tutorial Part 1 XHTML MP Tutorial Part 2 XHTML MP Tutorial Part 3

5：标签的嵌套必须正确
不支持标签的重叠，所以下面的写法是错误的！

XHTML MP tutorial paragraph 1

应该这样子写：

XHTML MP tutorial paragraph 1

二：XHTML MP的 MIME类型和文件扩展名
XHTML MP支持下面三种MIME类型
1. application/vnd.wap.xhtml+xml
2. application/xhtml+xml
3. text/html
第一种类型是一些wap浏览器所需要的（如某些诺基亚S60浏览器），以便正确显示XHTML MP文档。
第二种是XHTML系列文档的类型
第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档，而如果遇到上面的两种类型就会弹出一个对话框
让你保存这些文档。
动态选择MIME类型
比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型，那所有的XHTML MP文档就
都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
要实现这个就必须通过服务器端编程，获取客户端HTTP请求的Header值，这里面的值包含客户端可以处理的所有MIME类型。
如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml，如果支持其它的，就设置成其它的。
下面的例子是JSP的，但是你如果使用其它技术的话，原理是一样的，代码也是大同小异！

<%
String acceptHeader = request.getHeader("accept");
if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
response.setContentType("application/vnd.wap.xhtml+xml");
else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
response.setContentType("application/xhtml+xml");
else
response.setContentType("text/html");
%>

这里的代码很简单，我就不多加解释了！
文件的扩展名
静态XHTML MP文档的典型扩展名包括：.xhtml、.html和.htm。当然，你也可以使用其它扩展名，只要你在
WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术（如JSP、PHP、ASP、SSI等），你就必须
使用相应的扩展名，如PHP使用.php，SSI使用.shtml。

三：XHTML MP文档结构
第一个例子一个典型的ＸＨＴＭＬＭＰ文档结构

Hello world. Welcome to our XHTML MP tutorial.

讲解：

前面的预声明不是ＸＨＴＭＬＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬＭＰ的约定。
剩下的内容和普通的ｈｔｍｌ没有什么不同了。
记住：ＸＨＴＭＬＭＰ必须包含

WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。

八：XHTML MP的缓存控制
这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就
直接显示这个页面，而不需要再次联网下载，这样节省了时间。
当然，你可以禁止缓存，你可以这样做：

上面的也可以这样写：

如果你要设置缓存时间是300秒的话，可以这么做：

还要注意的一点是，上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。
面对这种情况，更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。

九：XHTML MP的定时刷新

上面的代码让页面每隔15秒刷新一次！
注意：必须包含这句：

，
如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。
还有一个用法就是用来URL自动跳转，例子如下：

需要注意的是，不是所有浏览器都支持refresh，如：诺基亚浏览器4.0和Ericsson T610 和 T68i
不过，阿佛使用的Windows Mobile手机是支持的，所以推荐使用。
随着智能手机的降价，上面的那些不支持的也很快要淘汰了吧。

十：注释
和html的一样啦：

十一：换行

, 例子：

Line 1
Line 2

Line 3

十二：标记
这个标记会给你的页面添加一条水平线。注意：
这个标记不能在

标记之间使用！！！
例子：

Table of Contents:

Part 1 XHTML MP Introduction
Part 2 Development of Wireless Markup Languages
Part 3 Advantages of XHTML MP
Part 4 WML Features Lost in XHTML MP

十三：标题标记

,

, 和

浏览器将以不同的大小显示置于此标记中的文字，具体效果你可以测试下面的代码：

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

十四：文字样式
首先声明的是有些浏览器并不支持XHTML MP支持的标记。
例子：

Bold
Italic
Bold italic
Small
Big
Emphasis
Strong

你还可以通过WAP CSS进行更精确的控制，比如把文字大小设置为12pt。
更多关于WAP CSS的信息请访问：（下面将不再重复声明）
http://www.developershome.com/wap/wcss/

十五：预格式文本
在XHTML MP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：

Hello, welcome to our XHTML MP tutorial.

为了能够保持你希望的格式，可以使用

标签：

Hello, welcome
to
our
XHTML MP tutorial.

这样最后显示的格式就和上面代码中排列的一样了。

十六：列表标签
使用

标签来建立无序列表，每个列表项前将显示一个小圆点。
标签用来包围每个列表项。
请看下面的例子：

Table of Contents:

Part 1 XHTML MP Introduction
Part 2 Development of Wireless Markup Languages
Part 3 Advantages of XHTML MP
Part 4 WML Features Lost in XHTML MP

使用

标签来建立有序列表，请看下面的例子：

Table of Contents:

XHTML MP Introduction
Development of Wireless Markup Languages
Advantages of XHTML MP
WML Features Lost in XHTML MP

其中，在

标签中可以设置start属性的值来决定列表序号的起始值，例如：

通过WAP CSS你可以对列表的外观进行更精确的控制。例如，可以修改显示序号的方式，
比如使用i ,ii ,iii来替代1，2，3。

十七：显示图片
和HTML中一样，使用标签来显示图片。height和width属性用来指定图片的高和宽（像素）。
WAP2.0支持常用的GIF、JPG、PNG图像格式，当然这还跟用户所有设备有关，一些设备只能显示
其中的一部分格式。要想知道客户端支持的图片格式，很容易，和先前讲过的一样，可以通过检查
HTTP Header，请看下面的代码：

coolMonkey
Hello, welcome to our XHTML MP tutorial.

其中alt属性在图片无法显示的时候会显示其设置的文本值。

十八：大图片问题
很多WAP浏览器没有水平滚动条（我的WM IE也是，但是它会自动缩放图片到合适尺寸）。因此如果图片超过设备的屏幕尺寸，
很多浏览器就只能显示局部图片，这样从用户看来很糟糕！还有注意的就是height和width属性设置只是影响外观，加载图片的时间
和图片大小有关，与你设置的height和width的值无关。使用大图片将让你的访问用户掏更多钱（并花费更多的时间）去支援移动，因为大图片带来大流量，
移动的疯狂收费已经吓住了不少潜在的客户（你不希望你的网站吓走用户吧）。阿佛的哥哥就是个例子，移动的1元包月5M套餐，
而他超过了流量（不少普通用户根本没有流量的概念），移动收了几十元，从此就再也不敢用手机GPRS上网了。
因此从优化XHTML MP页面图像的角度来看，控制图片的大小有下面几招：
1：使用PS等图片处理软件减小图片的尺寸，而不是传送大图片给无线设备，然后通过height和width来设定显示尺寸。
2：如果使用的GIF格式的图片，那么请使用小型颜色调色板，使用小型调色板会降低图片的质量，不过你可以在二者
之间做一个较好的平衡。
3：如果图片是JPG格式，你应该用合适压缩比率来压缩。这个平衡（图片尺寸和显示质量）也要你来控制。
4：期待移动降低上网资费并提高龟速网络（这仅仅是期待）。
更好的提高你的手机网站性能方式是先处理页面的文档请求，再接着处理图片的显示。但是如果构建这样的网站已经超过了本文要
描述的范围，如果你感兴趣的话请自行搜索关键字：Multipart messages

十九：表格
创建表格所使用的标签和HTML中使用的没有区别。所以请直接看下面的例子：

coolMonkey
Hello, welcome to our XHTML MP tutorial.

这里显示出来的效果是不带边框的表格。如果你要显示，可以使用WAP CSS来控制。
在

二十：超链接
超链接是用来导航的，你可以点击一个连接然后跳转到其他XHTML MP页面。这个html中的一样，请看下面的例子：

阿佛的博客首页

下面再讲讲当前页面的定位（滚动到当前页面的指定位置）：
请看下面的例子：

Table of Contents:

Part 1 XHTML MP Introduction
Part 2 Development of Wireless Markup Languages
Part 3 Advantages of XHTML MP
Part 4 WML Features Lost in XHTML MP
如果页面不够长，无法显示效果的话就再多几个列表项
如果页面不够长，无法显示效果的话就再多几个列表项
如果页面不够长，无法显示效果的话就再多几个列表项
如果页面不够长，无法显示效果的话就再多几个列表项

从上面的例子可以看出，要定位到指定位置，可以通过Back to top
来实现，#号加上要跳转到位置的标记的id值就可以了。
一些老的机器和浏览器不支持这个，如索爱的T610 和 T68i（02年的，应该没什么人用了吧）

二十一：使用更短的URL
我们知道手机输入比用电脑键盘慢多了。因此你应该让你的网站的url尽可能的短，看看下面的几种方法：
1：好好利用子域名。使用http://wap.somedomain.com/来代替http://www.somedomain.com/wap/。还可以使用
更短的域名： http://somedomain.com/ 。
2：让你的web站点和wap站点使用相同的URL。
使用"http://www.somedomain.com/" 或者 http://somedomain.com/来代替http://www.somedomain.com/wap/"作为
WAP站点的域名。如果一个HTTP 请求来自手机，那么将把WAP版本的站点发送给这个请求用户，否则将返回web版本的站点。
3：设置站点的默认文档。这样就可以通过http://wap.somedomain.com/来访问http://wap.somedomain.com/index.xhtml页面。

二十二：图形化链接
这里的技巧和HTML的一样。你可以在标签中放一个标签，这样就可以在你点击图片的时候进行页面跳转了。

This is page 1.

二十三：设置超链接的访问快捷键

This is page 1.

属性accesskey用来设置快捷键，当你按下这个键的时候就相当于点击了这个超链接（而在PC上浏览器仅仅是让这个超链接获得焦点）。
accesskey属性的可用值是：*, #, 0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9。
二十四：下拉选择框
这个也和HTML中一样，所以直接上代码：

XHTML MP Tutorial Part A XHTML MP Tutorial Part B XHTML MP Tutorial Part C

默认选择的代码是：

XHTML MP Tutorial Part B

支持多选的代码是：（在WM IE中无效）

二十五：Input元素
和HTML一样，XHTML MP也拥有各种获取用户输入的input元素。
input元素必须放置在

标记之间。
标记的 type 属性定义了input元素的类型。name属性定义了input元素的名称，可供服务器端检索。

二十六：文本域
文本域用来获取字母和数字数据。请看下面的例子：

type的默认属性就是text，所以可以忽略。
你可以使用 maxlength属性来控制文本域可输入的字符数，例如：

你还可以使用value属性来设置文本域的默认值，例如：

XHTML MP不再支持标签的format属性，你可以使用WAP CSS的-wap-input-format来控制。
例如，限制输入格式为最多10个数字：

input {
-wap-input-format: "10N"
}

下面再来介绍一下密码域：
在密码域中所有的字符通过星号来显示，请看例子：

二十七：复选框和单选按钮
复选框和HTML中也类似，例如：

value的值将被发送服务器端（当有选中该复选框）。
你也可以通过checked属性设置复选框是否选中，代码如下：

下面的标记代码创建一个单选按钮：

和复选框按钮类似，拥有相同name属性值的单选按钮将被分在同一个组，例如：

name和value对是相关联的，这个将在form提交后用来后台取值。和复选框一样，checked属性用来指定是否选中该项。

二十八：隐藏字段
隐藏字段将不会在页面中显示。它用来存储状态信息的。例如：

value属性会被回发到服务器端。

二十九：提交窗体数据到服务器端
在前文中，我们讲到了很多input元素，它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢？
你需要把这些标签和提交按钮置于

标签中。例如：

Registration Form

Username:

Password:

Gender:
Male Female
Country:
Canada China France Germany India Italy Japan Korea United Kingdom United States
Which part of our XHTML MP tutorial do you like?
Part 1 Part 2 Part 3 Part 4

三十：Form元素

标记是form控件的容器。下面继续介绍标记的两个方法POST和GET。
先介绍get方法：

使用get方法，数据将追加到URL中发送。由于URL携带的字符量是有限制的，这也成了get方法的一大缺点。
还有一个问题是为了避免编码问题（当有非ASCII字符时），你应该使用POST方法替代get方法。而使用POST方法
数据时，数据将插入到请求到一起发送。
接下来再讲解一下action属性，该属性指定了哪个页面用来处理提交的数据，你可以在该页面编写后台处理代码。

三十一：提交按钮和重置按钮
在XHTML MP中，而每个form都应该包含一个submit按钮。当点击这个按钮后，窗体数据就会被提交到服务器进行处理。
下面来看看这个按钮：

value属性用来指定这个按钮的标题。如果没有设置这个属性的话，那么将显示默认的 submit （如果是中文浏览器，会显示提交）
接着再来介绍一下重置按钮。当按下重置按钮时，form中包含的控件值将回到初始状态。例如：

如果没有设置重置按钮的value值，那么将默认显示reset或者重置。

三十二：服务器端
你可以使用你熟悉的服务器端技术来处理这些和属性。流行的技术包括ASP/ASP.NET 、Java Servlet/JSP 、Perl和PHP。
下面提供一个简单的获取客户端传过来的值的样例，关于ASP的。在现实中服务器端要做更复杂的处理。例如，把窗体发送过来的数据存储到数据库中。

<% Response.ContentType = "application/vnd.wap.xhtml+xml" %>

Data received at the server:
Username: <% =Request.QueryString("username") %>
Password: <% =Request.QueryString("password") %>
Gender: <% =Request.QueryString("gender") %>
Country: <% =Request.QueryString("country") %>
Which part of our XHTML MP tutorial do you like? <% for i=1 to Request.QueryString("tutorial_part").Count Response.Write(Request.QueryString("tutorial_part")(i) & " ") next %>
temp_id: <% =Request.QueryString("temp_id") %>

参考资料：http://www.tenaiweb.com/Article/wap/201007/882.html

作者: saeba 发表于 2010-12-13 17:03 原文链接

评论: 0 查看评论发表评论

最新新闻：
· Apache 上托管的项目将迁移到 Google Code(2010-12-15 08:24)
· 传诺基亚将在芬兰裁员800人(2010-12-15 08:22)
· 我为什么喜欢独自编程(2010-12-15 07:38)
· 雅虎宣布裁员4%约600人遣散费为两个月工资(2010-12-15 07:37)
· 微软拟对Office 2007推新功能增强安全性(2010-12-15 07:36)

编辑推荐：WP7有约（二）：课后作业

网站导航：博客园首页我的园子新闻闪存小组博问知识库

转载于:https://my.oschina.net/woqi/blog/11136