Wap2.0

WAP 2.0 —— XHTML MP and WCSS 怿飞

一、 WAP 的常识（省略）

（一） XHTML MP 介绍 XHTML MP （ eXtensible HyperText Markup Language Mobile Profile ） WAP2.0 与 WCSS （ WAP CSS /WAP Cascading Style Sheet ）配套使用是 XHTML 的子集 XHTML Basic (XHTML 子集 )+ 另外的一些 XHTML 的元素和属性 WAP 浏览器与互联网之间以前 WAP 网站（ WML and WMLScript ）更多的展示表现（ presentation control ）

（一） XHTML MP 介绍优势：开发的站点可以在 WEB 和无线上都可以使用，也可以用任何 Web 浏览器访问 WAP2.0 应用向后兼容： XHTML MP / WCSS 和 WML / WMLScript

（二）无线标记语言发展 HTML ： WAP 发展的首要任务——移动电话， PDA 等访问互联网。 WAP standard ( WML and XHTML Mobile Profile ) 类似 HTML WML （ Wireless Markup Language ） 1.x ： WAP 1.x 规范中规定的标记语言，无线设备的第一个标记语言。 Openwave 、 Nokia 和 Ericsson 很早都有自己的标记语言。 WML 规范是 WAP Forum （ 97 ）创建的。而现在，很多的 WAP 站点依然使用的是 WML 。 XHTML ：结构比 HTML 更简洁和严格。这对于无线设备（例：移动电话）很重要，对于有限的处理能力。 XHTML Basic : 是 XHTML 的一个简化版本。为处理能力和性能有限的设备设计的（移动电话， PDA ，呼机等）

（二）无线标记语言发展但是不包含 XHTML 特性。例如 CSS ， frames 和 Scripting 。是由 W3C 定义的。 XHTML MP: 在 WAP2.0 说明中指定的官方标记语言。 WAP Forum 基于 XHTML Basic 创造，并从 XHTML 的完整版本中增加了一些元素和属性。例如 <i>,<b>,<small>,<big> 和 <hr> 。 XHTML MP 支持一个简单的 CSS 版本，即 WCSS/WAP CSS 。 WCSS/WAP CSS: CSS2 的一个简化版本，增加了 WAP 特有的扩展。可以很简单的改变 XHTML MP 页面的布局和风格。 WML2.0: WAP 站点开发者不需要顾虑 WML2.0 。 WML2.0 向后兼容，并且对于 WAP 站点开发者还不可用。

（三） XHTML MP 的优点最大优点：开发者可用相同的技术开发适用于 WEB 和 WAP 的站点。有 HTML 、 XHTML 、 CSS 基础即可入门。同样的开发工具可以用来开发 WEB 和 WAP 站点。开发过程中一般的 WEB 浏览器可以浏览你的 WAP 站点。 HTML/XHTML 页面可以通过较小的修改成 XHTML MP ，甚至不用修改（注意：布局是否适应小屏幕，文件大小是否出最大）。支持 WCSS 。移动设备有很多不同的特征，比如屏幕大小，只需写一次结构，使用不同的 WCSS 文件即可。更多的表现控制。

（四）不支持的 WML 特性 XHTML MP 不支持 <deck> 和 <card> 标签。在 XML 中，一个文件可以包含一个或更多的 card ，所有的 card 组合成一个 deck ，并在无线设备中一同被下载。 WAP 浏览器每次只显示一个 card ，可以通过锚链接访问其他的 card 。通过这些，减少了服务器的往返的访问。对性能的提高是有意义的。在 XHTML MP 中要实现类似的特性，可以使用 multipart messages （多个文档放到一个请求）另外一个方式是使用目标锚（一个页面的不同位置）。 XHTML MP 不支持 <timer> 标签 <head> <meta http-equiv="refresh" content="10;URL=http://www.planabc.net/" /> </head> <meta> 元素 10 秒后告诉 WAP 浏览器 URL 。注意点： WML timer 仅当进入 card ，而 HTML refresh timer 当进入 XHTML MP 页面。

（四）不支持的 WML 特性 3. XHTML MP 不支持事件。 WML 支持四个事件（ ontimer,onenterbackward,onenterforward,onpick ），除 ontimer 其他事件无法模拟。如要使用，需使用 WML1.X 。 4. XHTML MP 不支持变量。在 XML ，可以声明变量，并赋值，拥有全局作用域。可以在任何的 deck 和 card 中使用。 XHML MP 放在服务器端处理（必须发送并保存）。 5. XHTML MP 不支持客户端脚本。在 XML ，你可以使用客户端脚本（ WMLScript ）。 JavaScript 的简化版，常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本（ ECMAScript MP ） , 支持所有的 WMLScript 功能。

（四）不支持的 WML 特性 6. XHTML MP 不支持可编程序软键（ Programmable SoftKeys ）。 WML 的一个最大特征。通过 <do> 标签使用。在 XHML MP 中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性： <a accesskey="1" href="part1.xhtml">XHTML MP Tutorial Part 1</a WCSS 中的 -wap-accesskey 属性也可以用来定义： a.wcss_class_1 {-wap-accesskey: 1} 7. XHTML MP 不支持 <u> 标签。在 XML ， <u> 用来在一些文字下添加下划线。可以用 WCSS 中的 text-decoration 属性。 8. XHTML MP 不支持 Input 框的 format 属性。在 XML ，可以定义类型和字数限制。可以使用 WCSS 中的 -wap-input-format 属性，语法一致。比如限制 5 个数字字符： input {-wap-input-format:”5N”}

（四）不支持的 WML 特性 9. XHTML MP 不支持锚链接传输数据。 <p> 姓名： <input name=“name”/><br/> <anchor> <go method=“get” href=“yuanxin.php”><postfield name=“name” value=“$(name)”/></go> 提交 </anchor> </p> <form action=“yuanxin.php” method=“get”> <p> 姓名： <input name=“name”/><br/><input type=“submit” value=“ 提交 "/></p> </form>

（五）语法规则标签必须完全闭合。标签和属性必须小写。属性值必须包含在引号标记内。不允许无属性值存在。标签必须完全嵌套。

（六） MIME 类型和文件扩展名 MIME 类型： application/vnd.wap.xhtml+xml 、 application/xhtml+xml 、 text/html 。动态生成 MIME 类型。获得 HTTP 请求中的 accept header 信息。文件扩展名： .xhtml 、 .html 、 .htm

（七）文档结构必须包含 <html>, <head>, <title> 和 <body> 元素。 <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello world</title> </head> <body> <p>Hello world. Welcome to taobao.com.</p> </body> </html>

（七）文档结构 XML 声明和字符编码： <?xml version="1.0" encoding="UTF-8"?> UTF-8/16 编码可省略。 XML 声明也不是必须的，但如果忽略在许多 WAP 浏览器中出错。必须有 DOCTYPE 声明。在 XML 声明和 <html> 元素之间。 <html> 、 <head> 、 <link> 、 <title> 、 <body> <p> 元素， align 属性已经去除，可以通过 WAP CSS 的 text-align 属性来设置。

（八）通用的元数据使用 <meta/> 标签，包含在 <head> 内 WAP 浏览器如果不理解则忽略。比如添加作者： <meta name="author" content=“yuanxin"/> Cache Control ： <meta/> 标签的一个应用是控制 XHTML MP 文件在 Cache 中的存在周期： <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="Cache-Control" content="max-age=0"/> 注意点：与设备相关。一些使用不相的方法，一些没有 Cache 机制。还有一些不支持 <meta/> 但识别 Cache-Control:no-cache 的 HTTP 头。也可应用于图片的缓存。

（八）通用的元数据周期性刷新。必须配合使用。不是所有浏览器都支持。 <meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="refresh" content="15;URL=yuanxin.xhtml"/>

（九）常用标签介绍注释： <!-- -- > ，和 HTML 和 WML1.X 相同。换行： <br/> ，和 HTML 和 WML1.X 相同。水平线： <hr/> 。不能包含在 <p></p> 标签之内。标题： <h1>-<h6> （不同的大小和样式），有些设备看起来一样的。

（九）常用标签介绍字体样式： XML 可以使用标签来改变字体样式（ <b> 、 <i> 、 <small> 、 <big> 等）。但一些浏览器只支持其中的部分，不支持的忽略，不会出错。 WCSS 控制字体格式。与格式化文本：在 XHTML MP 中，标签间空白不显示，此外，段落中 2 个或更多的空白只显示一个，如果想保持文字的格式，可使用 <pre> 。列表： <ul> 、 <ol> 、 <li> 。对于 <ol> 元素，可以用属性 start 指定数字开始的序列。还可以用 WCSS 来做更精确的控制。显示图片： <img> 标签用来显示图片。和 HTML 一样。如果文件没发现或者图片格式不支持，显示 alt 属性文本。 Height 和 width 属性来指定图片显示区域的高度和宽度

（九）常用标签介绍除了老的 WBMP 图片格式， WAP2.0 还支持 WEB 上的图片格式（ gif, jpg 和 PNG ），但 WAP2.0 无线设备支持上面图片格式的某些。 GPRS-gif,CDMA-png 。可以通过 accept HTTP header 判断设置。关于大图片的发布：很多 WAP 浏览器都没有水平滚动功能。如果宽度大于显示屏，很多的 WAP 浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。优化图片： 1 、用制图软件按比例缩小图片； 2 、如果是 gif 图片，减少颜色，但降低了图片质量，权衡。 3 、如果是 jpg 图片，保存一定的压缩比例，依然是权衡。使用 multipart messages ，先下载的 XHTML MP 文档，

（九）常用标签介绍后请求图片，产生多个请求。该方式可以使文档和图片在一个请求，意味着一个页面只有一个请求。减少服务器的压力。表格：创建表格，需要使用 <table> 、 <tr> 、 <td> 标签，默认表格没有边线。属性有 rowspan 和 colspan 。锚链接：一般用在导航。标签为 <a></a> 。属性 href 定义指定的 URL 。当前页面位置的跳转：先设置目标链接，通过 id 属性设置；再设置锚链接的 URL 为 #id 名称。对锚链接设置快捷键： <a> 标签的 accesskey 属性，有效的值为： * ， # ， 0-9 。还可以用 -wap-accesskey 设置。

（九）常用标签介绍选择列表：选择列表使用 <select> 标签，包含一个或更多的 <option> 标签。 <select> 标签的 name 属性定义选择列表的名字。 name 用来取得被选择的 item 的值（ option 的 value 属性定义）。 1. 多重选择列表： Option 的 selected 属性用来设置默认的 option 。如果想设置多重选择列表，可使用 <select> 标签的 multiple 属性，只有一个唯一值‘ multiple’ 。 2. Option 分组：使用 <optgroup> 标签， label 属性定义 option 组的名称。

（九）常用标签介绍选择列表

（九）常用标签介绍输入元素： Text field 、 Password fireld 、 Checkbox 、 Radio button 、 Hidden field 。通过 <input> 元素创建。传输数据到服务器， <input> 元素必须和 <form> 一起使用。 Type 属性用来定义 input 元素的类别。 Name 属性用来定义名称，方便取得用户数据。 <input type="text" name=“taobao" maxlength="16" value=“yuanxin"/> input { -wap-input-format: "10N"} <input type="password" name=“taobao"/> <input type="checkbox" name=“taobao" value=“yuanxin" checked="checked"/> <input type="radio" name=“taobao" value=“yuanxin" checked="checked"/> <input type="hidden" name=“taobao" value=“yuanxin"/>

（九）常用标签介绍 13. form 元素： <input> 、 <select> 等元素不能直接包含在 form 元素下， XHMTL MP 标准规定必须有块级元素。如果有 non-ASCII 字符，需使用 POST 方法来避免编码问题。 <form method="get" action=“yuanxin.asp"> <p> <input ...> <select ...> </p> </form> 14. 提交按钮：所有的表单都必须包含一个提交按钮。 <input> 元素用来创建一个提交按钮。而 type 属性被定义为’ submit’ 。 <input type="submit" value="OK"/>

（九）常用标签介绍 15. 重置按钮：并不是必须的。 <input> 元素用来创建一个重置按钮。而 type 属性被定义为’ reset’ 。 <input type="reset" value="Default"/> 16. Div 和 Span 。

（一） WCSS 介绍 WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS （ WAP Cascading Style Sheet ）是 CSS2 的子集 + 一些 WAP 特有的扩展目的：定义文档的风格和布局，从文档内容中分离。重要性：不同的手机设备有多样的特征，比如屏幕大小。 WML 不支持 WCSS W3C CSS Mobile Profile 和 WAP CSS 不同。

（二）使用 WCSS 的优势主要：学习成本降低，可用相同的开发工具，可用 WEB 浏览器浏览。表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（ PC 、 PDA 、手机）；降低维护成本（新手机）；改变视觉和布局仅需 CSS ；重复使用 CSS ；便于工作细分。比 WML 更好的控制表现：可以定义元素的 color ， font ， background ， border ， margin ， padding 等属性。移动设备第一次访问站点下载样式（ Cache ）。使用外部 WCSS ， XHTML MP 的文档大小变小，提高下载时间。

（三）使用 WCSS 的劣势不同的 WAP 浏览器对 WCSS 的支持不同，可能一个属性在这个 WAP 浏览器上支持，而另外一个不支持。外部的 WAP CSS 可能增加第一次访问页面的请求时间。原因：外部 WCSS 不存在于手机的 Cache ，必须从服务器下载； XHTML MP 文档和外部的 WCSS 下载是不同的请求，增加了服务器压力；如果使用一个 WCSS 定义 WAP 站点的所有表现，该文件大小可能很大； WAP 浏览器需要解析 WCSS 到 XHTML MP 文档。

（四） MIME 类型和文件扩展名 MIME 类型： text/css 。文件扩展名： .css

（五） WCSS 的语法规则 WCSS 声明： selector {property: property_value} 多个属性允许的，用’ ;’ 分隔。多个选择器也是允许的，用‘，’分隔。注释： /*orz*/ ， WAP 浏览器将忽略这些内容。

（六）如何在 XHTML MP 文档中应用链接外部 WCSS （推荐），放置在文档的 head 部分，用 style 属性定义 WCSS 样式 <link href=“url” rel=“stylesheet” type=“text/css”/> ，可以多个，无需修改 rel 和 type 属性。 <style type="text/css"> some WCSS statements </style> <hr style="color: blue"/>

（七）不同的选择器类型选择器： h1 { font-style: italic} 元素名称必须小写。 Class 选择器： .class { color:blue} 对应标签的 class 属性，还可以联合元素名称使用 h1.class {color:blue} 。 ID 选择器： #id {color:red} 对应标签的 id 属性也可联合元素名称。通用选择器： * { color:blue} ，所有的标签。注意：在某些 WAP 浏览器上会使样式渲染变慢。（建议不要用）

（八）常用的属性值长度： % ， px ， em ， ex ， cm ， mm ， in ， pt ， pc （值和单位之间不允许有空格： margin-top:1px 而不是 margrin-top:1 px ）。颜色： rgb(r%;g%,b%) 、 rgb(r,g,b) 、 #rrggbb 、 #rgb 、 red(16 种 ) 。 URL ： ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。

（九）字体和文本属性字体名称： p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。字体大小： p {font-size:12px} ，也可以用 xx-small ， x-samll ， small ， medium ， large ， x-large ， xx-large 字体样式：斜体、粗体和下划线（ font-style,font-weight 和 text-decoration ）。设置文本对齐： text-align 和 float 。 WAP 中 float （ left,right,none ）常用在 img 和 table 标签

（十）列表属性改变无序列表的图标（ list-style-type ）：默认 disc ，其他值： circle ， square ， none 。可以应用在 ul 和 li 元素上。改变有序列表的次序：默认 decimal ，其他值： upper-alpha （ A ）， lower-alpha （ a ）， upper-raman （ I ）， lower-raman （ i ）， none 3. 使用图片文件作为小图标： list-style-image: url(bullet.gif) 。注： Openware WAP 浏览器本地保存了一些 icon ，可以使用这些作为小图标，例如： ul {list-style-image: localsrc("rightarrow1")}

（十一）颜色属性和 border 属性设置前景和背景颜色： color 、 background-color 属性。设置 border 样式： border-style （ border-top-style 等）属性，值有很多，但只有 none 和 solid 被 WAP 浏览器广泛支持。 table {border-style: solid} 设置 border 宽度： border-width （同上）属性，值为数值，还接受 thin 、 medium 和 thick 。注：值设置 border-width ， border 并不可见，必须设置 border-style 非 none 值。设置 border 颜色： border-color （同上）属性。注意点同上。设置 border 属性的快捷方式： table {border: 2px solid black} 顺序自由。

（十二） WAP 特有的 CSS 扩展快捷键： -wap-accesskey ，用来指定 XHTML MP 元素的快捷键。 Input ：定义文本框是否可以留空，什么类型，可以输入多少字符 Marquee ：在屏幕上滚动一些内容。

（十二 .1 ） WCSS 快捷键扩展给元素定义快捷键： -wap-accesskey 属性可用的属性值 * ， # ， 0 ， 1 ， 2 ， 3 ， 4 ， 5 ， 6 ， 7 ， 8 ， 9 input.wcss_class {-wap-accesskey: 4} 直接定义 * 和 # 违反 CSS2 语法。需要使用 Unicode 转义字符 \2a 和 \23 。但是有些 WAP 浏览器（ Sony Ericsson WAP 浏览器）要求使用 \2a 和 \23, 一些（ Openwave 手机浏览器）要求使用 * 和 # 。与元素的 accesskey 属性同效，如同时定义，显示该属性值。只用于四个元素 a ， input ， label ， textarea ，其他定义也无效。

（十二 .2 ） WCSS 输入扩展由两个属性组成： -wap-input-famat 和 -wap-input-required ，对应于 WML 中 <input> 元素的 format （定义类型和字符数量）和 emptyok （是否可以留空）属性。早些的移动设备上 WAP 浏览器不支持，但支持 format 和 emptyok 属性作为 XHTML MP 的扩展。为了更好的兼容性，建议 WCSS 和 WML 都使用。 <input type="text" format="N" style='-wap-input-format: "N"'/> 控制文本框的类型和字符数量： -wap-input-format 。需应用在 <input type=“text”>, <input type=“password”> 和 <textarea> 标签上，如应用在其他标签无效。格式字符（大小写敏感）： a （小写字母或符号）， A （大写字母或符号）， n （数字或符号）

（十二 .2 ） WCSS 输入扩展 N （数字）， x （小写字母或数字或符号）， X （大写字母或数字或符号）， m （任何字符，默认小写字母输入模式，可换大写模式）， M （任何字符，默认大写字母输入模式，可换小写模式）。属性值必须包含在引号内，由于部分 Openwave 手机浏览器不支持单引号，建议使用双引号（ <input type=“text” style=‘-wap-input-format: “N”’/> ） -wap-input-format: “2N” （最多两个数字） -wap-input-format: “NN” （两个数字） -wap-input-format: “*N” （无限个数字） -wap-input-format: “A*a” （第一个大写字母或符号， 0-n 个小写字母或符号） -wap-input-format :“*M” （默认）格式字符前使用数字或 * 的原则： 1 、只允许一次； 2 、在最后

（十二 .2 ） WCSS 输入扩展如果值语法错误，则 WAP 浏览器忽略该属性。也可以包含转义字符：’ \’ 在 WCSS 中是特殊字符，使用’ \\’ 。控制文本框是否可以留空： -wap-input-required （值为： false 和 true ），帮助控制文本框是否可以空白。使用元素同上。当 -wap-input-format 和 -wap-input-required 冲突时，以 required 优先。

（十二 .3 ） WCSS Marquee 扩展可以在屏幕上滚动一些内容（一行文字，一个图片，一个链接等），但一些 WAP 浏览器只支持滚动文字。当内容超过屏幕时很有用。包含四个属性和一个属性值： -wap-marquee 属性值（ display 属性的值）， -wap-marquee-dir 属性（指定 marquee 的方向 , 值： ltr ， rtl- 默认）， -wap-marquee-loop 属性（指定 marquee 重复的时间， infinite 永远，大多数默认为 1 ）， -wap-marquee-speed 属性（指定 marquee 的速度，值： slow ， normal- 默认， fast ）， -wap-marquee-style （指定 marquee 在屏幕上如何滚动，有三个值： scroll- 默认， slide ， alternate ）

（十二 .3 ） WCSS Marquee 扩展

WAP2.0 设计原则设计站点前的准备工作界面设计、挑选核心服务、 WAP 设备特性统计（浏览器等）关注导航模型一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入（考虑选择列表、复选框或单选按钮等。 -wap-input-format ： *N; 避免模式转换。首字母。）设计导航层次导航模型一致、少用‘返回’链接、避免深度太深（ 4-5 ）、返回首页或目录

WAP2.0 设计原则考虑小尺寸屏幕的设计确保内容可见、 <title> 少于 14 个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性（ 1-3 ）、充分利用空间（图文）、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。保持较短的文档大小：内存有限，不支持 WML 的多 card ，使用锚链接等不要包含长注释、去除缩进或空格、尽量少用 id 和 class 6. 用户任务流流畅和图片合理使用图片不是用户目的尽少使用、避免使用大表格。

WAP2.0 设计原则 7. 页面上提供足够信息首屏常用导航链接、搜索域、登录屏幕和大量信息；上下滚动困难，表单交互要简短。为用户操作提供信息反馈对用户操作、错误和问题情况提供正确的反馈。 9. 尽可能减少图片数量和减小图像容量大小每张图片都是一个请求，降低页面显示的速度，且内容可能重排序，占用时间和资源，全站规划相同图片。定义图像的高度和宽度属性定义了预占位，改善用户体验，

WAP2.0 设计原则 11. 谨慎使用表格单元格宽度使用绝对宽度；嵌套层数增加，页面复杂度和处理时间增加；表格边框避免太粗。 12. 考虑添加样式定义选项权衡！使用 Unicode 字符编写 XHTML MP 内容进行可用性测试

附录 1. 常用 WAP 模拟器 WinWAP 、 OpenWave 、 Opera 2. 常用 WAP 网站 www.wapforum.org www.spforum.net www.csdn.com www.blueidea.com

Wap2.0

More Related Content

Similar to Wap2.0

Wap2.0