WAP网站设计之xhtml mp

XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则：

XHTML MP 教程段落 1

XHTML MP tutorial paragraph 2

XHTML MP tutorial paragraph 3

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

XHTML MP tutorial paragraph 1

XHTML MP tutorial paragraph 2

XHTML MP tutorial paragraph 3

XHTML MP tutorial paragraph 1

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”);

Hello world. Welcome to our XHTML MP tutorial.

讲解：

http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
前面的预声明不是ＸＨＴＭＬ　ＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬ　ＭＰ的约定。
剩下的内容和普通的ｈｔｍｌ没有什么不同了。
记住：ＸＨＴＭＬ　ＭＰ必须包含 , , , 和 <body> 元素。 四：XML声明和字符编码 <?xml version="1.0" encoding="UTF-8"?> 所有的XHTML MP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。 如果文档的字符编码是UTF-8 or UTF-16的话，其实可以省略掉。 虽然这个XML声明是可以省略的，但是我们不建议这么做，因此这样可能导致某些索爱的WAP浏览器产生错误。 五：DOCTYPE声明 这个<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "<a href=">http://www.wapforum.org/DTD/xhtml-mobile10.dtd”> 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息，可供验证工具验证你写的XHTML MP文档的语法正确性。 这些验证工具集成在很多IDE中了。 六：各标记简析 <html> 是XHTML MP的根标记。目前，该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值，这个用来保证 严格遵守XHTML MP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。 <head> 标记用来存放关于文档本身的信息。比如 <title>和 <link> ,还有 <meta> ，这几个标记的功能和在传统的html里面的功能是一样的！ 这里不再废话了。 还有 <body> 标记也不重复解释了。 标记的text-align属性已经被取消了，你可以在css中定义实现这个功能，如： p {  text-align: right } 七：XHTML MP 的 Metadata 先看下面的例子： <head> <title>XHTML MP Tutorial

WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。
八：XHTML MP的缓存控制
这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就
直接显示这个页面，而不需要再次联网下载，这样节省了时间。
当然，你可以禁止缓存，你可以这样做：

XHTML MP Tutorial

上面的也可以这样写：

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

XHTML MP Tutorial

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

XHTML MP Tutorial

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

，

如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。

十二：

标记

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

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

十三：标题标记

,

, 和

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

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

你还可以通过WAP CSS进行更精确的控制，比如把文字大小设置为12pt。
更多关于WAP CSS的信息请访问：（下面将不再重复声明）
http://www.developershome.com/wap/wcss/
十五：预格式文本
在XHTML MP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：

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

%ignore_pre_1%

这样最后显示的格式就和上面代码中排列的一样了。
十六：列表标签
使用

标签用来包围每个列表项。
请看下面的例子：
- 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:

其中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中使用的没有区别。所以请直接看下面的例子：

Cell A

Cell B

Cell C

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.

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

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

默认选择的代码是：

支持多选的代码是：（在WM IE中无效）
标记的 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元素，它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢？
你需要把这些标签和提交按钮置于

标签中。例如：

http://www.wapforum.org/DTD/xhtml-mobile10.dtd

“>

Registration Form

三十：Form元素

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

先介绍get方法：

使用get方法，数据将追加到URL中发送。由于URL携带的字符量是有限制的，这也成了get方法的一大缺点。
还有一个问题是为了避免编码问题（当有非ASCII字符时），你应该使用POST方法替代get方法。而使用POST方法
数据时，数据将插入到请求到一起发送。
接下来再讲解一下action属性，该属性指定了哪个页面用来处理提交的数据，你可以在该页面编写后台处理代码。
三十一：提交按钮和重置按钮
在XHTML MP中，而每个form都应该包含一个submit按钮。当点击这个按钮后，窗体数据就会被提交到服务器进行处理。
下面来看看这个按钮：

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

如果没有设置重置按钮的value值，那么将默认显示reset或者重置。
三十二：服务器端
你可以使用你熟悉的服务器端技术来处理这些和

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218399.html原文链接：https://javaforall.net

WAP网站设计之xhtml mp

,

,

,

,

, 和

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