现在的位置: 首页 > 综合 > 正文

(转载)WAP 2.0开发XHTML MP (XHTML Mobile Profile)语法及注意问题

2012年01月29日 ⁄ 综合 ⁄ 共 11890字 ⁄ 字号 评论关闭

XHTML Mobile Profile 的基本结构

<?xml version="1.0" encoding="utf-8"?>
<!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>
        <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset= UTF-8"/>
        <title>中文页</title>
 <link rel="stylesheet" href="http://simpleton.h.blog.163.com/blog/style.css" type="text/css"/>
    </head>
    <body>
        <h1> 标题 </h1>
        <p>
    文本
        </p>
    </body>
</html>

---------------------------------------------------
定义样式表CSS

XHTML 移动规范[XHTMLMP]规定,外部样式表是可选的,并可通过下面两种方法之一为 XHTML文档定义

外部样式表: 
通过一个在XML 声明(<?xml>)后而不是在<head>元素中定义的 XML处理指令,如下所示。注意,建议定义新的“handheld”媒体类型:
<?xml-stylesheet href="http://simpleton.h.blog.163.com/blog/mystylesheet.css" media="handheld" type="text/css" ?> 

通过在<head>元素中定义的一个或多个<link>元素,例如:
<link href=”mystyle.css” type=”text/css” rel=”stylesheet”/>

还可以通过在嵌套于<head>元素中的<style>元素里定义样式属性来创建一个内部样式表。用这种方法定义的样式可以应用于整个文档。

注意,除了样式表,还可以利用属性 style 把样式应用于个别元素。其优先级顺序为:
1. 首先应用浏览器的默认样式。
2. 外部样式表覆盖默认样式。
3. 文档头元素中的 style 元素覆盖外部样式表。
4. 位于一个标签中的行内样式覆盖之前只对该标签定义的所有样式。

---------------------------------------------------

<meta>元素
<meta>元素是 XHTML MP的一部分,但很多浏览器不支持meta 功能。在XHTML MP中不支持属性http-equiv。

在 XHTML MP中,<body> 元素不支持bgcolor、text、link属性。与其它 XHTML MP 元素一样,<body>支持class、id、style属性来指定 CSS特性

XHTML MP 中的所有文本 必须包含一个<p>元素或一个其它XHTML MP元素(如头、列表、表等)。

------------------------------------------------
列表

<h2>Definition lists 定义列表</h2>
<dl>
 <dt>Atom</dt>
 <dd>Subject consists of atoms</dd>
 <dt>Proton</dt>
 <dd>Constituent of the atom</dd> 
</dl>

<h2>Numbered lists 有序列表</h2>
<ol>
 <li>The first</li>
 <li>The second</li>
</ol>

<h2>Unnumbered lists 无序列表</h2>
<ul>
 <li>Meat</li>
 <li>Veggies</li>
</ul>

---------------------------------------------------
XHTML Basic 和XHTML MP之间的格式化差异

下面的XHTML 元素不是 XHTML Basic的组成部分, 但被加入到了 XHTML MP中;
注意,除了 hr中的 align="left|right|center",在这些元素中不支持任何属性。
属于XHTML MP 但不属于 XHTML Basic的元素
<b>  <big>  <i>  <small>  <hr/> 

---------------------------------------------------
对 XHTML MP的格式化限制

在 XHTML MP中,元素<br/>不支持属性clear*。
元素<div>、<h1> 至<h6>以及<p>不支持属性align。
XHTML MP 不支持元素<blink>* 。
如下所示,使用WAP CSS的样式特性显示闪烁文本 
<span style="text-decoration: blink">this blinks</span>
或者使用更好的方法:
<span class="blink"> 
这里,用<style>元素或外部样式表定义下面的类:
.blink { text-decoration:blink }

-----------------------------------------------------
锚(anchor)元素

在 XHTML MP中, 元素<a> 支持除coords、 button、 name、 shape 和target 外的所有 HTML属性。
诺基亚移动浏览器支持 name 属性以保持与 CHTML 的兼容性。

类似于WML 卡片的分段锚

XHTML MP 支持对“ 段”锚的链接。在 Web 中可以见到这种情况,点击一个链接时,页面就向下滚动至当前页面的某个部分,也可是“回到顶部”的链接:

<a href="http://simpleton.h.blog.163.com/blog/#h">Help</a>
...
<a name="h">Help text</a>
第 接显示文本Help。该链接被选中时,显示包含名为h的锚的文档部分。只有属性 name(没有属性href)的锚没有下划线并且无法被选中 们是具有属性 href="http://simpleton.h.blog.163.com/blog/#anchor-name"的锚的不可见目标。

这 是一种产生类似于WML“多卡片”行为的合理方法 XHTML页面的上端有一个 “ ” 链接,可以利用“ 跳至该页面的各个部分。例如,在页面底部可能有帮助文本,用户可以利用Help 链接迅速滚动到底部获取帮助文本。后退(Back)键能使用户返回到滚动前的位置,就如在Web浏览器中一样。

下面的程序段示例了一个锚元素,在此元素中对快捷键5 进行了定义,并将其链接到同一文档中的某个分段。
<a href="http://simpleton.h.blog.163.com/blog/#h" accesskey="5">Help</a>

------------------------------------------------------
发起电话呼叫

为在用户电话上创建一个能产生语音呼叫的锚:
调用 WMLScript 库函数wtai://wp/mc;NNN ,其中NNN 表示由数字组成的被呼电话号码。
<a href="wtai://wp/mc;8005551212">Call 800 Info</a>

该锚的显示与普通锚相同。当用户选中链接时,就会给出让用户确认呼叫号码的提示,然后将会拨通呼叫。
 
许 多XHTML MP 浏览器还支持 i-mode tel: scheme,它是一个扩展,可以发起电话呼叫。可选属性cti="…"(如果存在的话)能够拨通号码,然后发送带有停顿(,)的 DTMF“ 音多频拨号音”,并且等待用户的确认(/)。<a>标签中的属性 href="tel:…"、 telbook="…"或 email="…"的任意组合都能启动移动设备的“ 电话簿”功能,并同时给出预设的可用数据。
<a href="tel:8005551234" telbook="John Doe" email="wap@2536.com" cti="8005551234/123">Call John</a>

执 行上面语句将会拨出号码 8005551234,然后等待并提示用户按下 OK键以发送 DTMF 音频123。另外,还会启动“ 电话簿”选项功能,此选项功能在电话簿中把 tel: value(或 cti 的值,如果给出该值的话)保存到姓名 John Doe下,如果设备在电话簿中支持 e-mail 地址,它还将保存 e-mail 地址。

-------------------------------------------------------
保存到电话簿

为创建一个能在用户电话簿上保存姓名和号码的锚:
调用 WMLScript 库函数wtai://wp/ap;NNN;aaa ,其中 NNN 表示由数字组成的被呼电话号码,aaa表示由字母和数字组成的姓名。
<a href="wtai://wp/ap;8005551234;John Doe">Save John Doe</a>

-------------------------------------------------------
发送e-mail

许多支持发送 e-mail(如短消息服务[SMS],多媒体消息服务[MMS]或其它格式)的设备支持mailto: 方案 一个可以发送 e-mail消息的扩展:
<a href="mailto:wap@2536.com">Message to John</a>

还可以在 URL中指定默认的 subject 和/或body以获得参数:
<a href="mailto:wap@2536.com?subject=The%20Subject&amp;body=this%20is%20the%20message">Message to John</a>

--------------------------------------------------------
快捷键

设备显示屏上的链接使导航变得快捷,它们甚至是导航不可缺少的部分,尤其在文档较长时,使用链接可以跳至文档的某个部分。然而,即使使用链接,也需要把页面滚动到链接位置,因此为到达链接位置用户需要多次按键操作。
快捷键使用户通过一次按键就能激活可见的链接,而无需到达链接位置。在<a>元素中加入属性accesskey就能创建快捷方式。该属性值定义为了激活链接用户必须按下的键。

然而,为让用户知道应该按下哪个键,有必要用文本 在<a>元素之前的<p>元素中)说明为属性accesskey选择的按键号码。在文本中加入按键值可保证用户看到与描述锚目标的文本 起的快捷键值。例如,在内容中定义下行:
1 <a href="http://simpleton.h.blog.163.com/blog/next.html" accesskey="1">Next</a>

导致如下显示:
1 Next

范例:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html mlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML 1</title>
 </head>
 <body>
  <a name="top"/>
  <h2>Anchors</h2>
  <p>
   <a href="http://simpleton.h.blog.163.com/blog/#bottom">Bottom</a><br/>
 
   1 <a href="http://simpleton.h.blog.163.com/blog/file2.xhtml" accesskey="1">File</a><br/>
   2 <a href="wtai://wp/mc;8005551212" accesskey="2">Call Directory</a><br/>
   3 <a href="mailto:joe@company.com?

   subject=The%20Subject&amp;
   body=this%20is%20the%20message" accesskey="3">
   Email Joe</a><br/>
   <a href="http://simpleton.h.blog.163.com/blog/#top">Top</a><br/>
   <a name="bottom"/>
  </p>
 </body> 
</html>

--------------------------------------------------
菜单中的快捷键(Access-key)选项

在 诺基亚移动浏览器和诺基亚 Series 40移动设备中,所有包含属性 accesskey的链接和提交按钮都被自动加入选项菜单中。选项菜单中的标签是元素<a>的文本 (如果元素<a>只包含一个图像,则是 img的属性alt 的值)或提交按钮的值。为匹配菜单,必要时需对文本 短。

这个功能确保用户总能快速获得主导航链接,不管滚动到了当前页面的何处。这与 WML 1.x 中的元素<do>功能相同(并且比<do>简单)。

包含属性 accesskey的锚和提交按钮都以它们在文档中出现的顺序被加入选项菜单中。

-------------------------------------------------
Forms表单

与 WML 不同,XHTML Form是利用提交按钮发送给服务器的,而 WML利用具有元素 postfield的锚。
 
可以利用 Form 中的CSS来提供具有 padding 和margin 属性的元素定位功能。此外,还支持 CSS 边界,但在诺基亚浏览器中,CSS边界出现在元素input、textarea和 select 中已经存在的黑色边界之外。
 
XHTML MP支持的窗体元素:
select  textarea  Optgroup  option  form  Input  label    
 
XHTML MP 不支持下列各项: 
<form>元素的属性accept-charset 
任何元素的属性 tabindex 和 label 
元素<fieldset>、<button>和<legend> 
<input>元素中的type="button"

-------------------------------------------------
form 元素

Form 元素定义 action 和 method,二者都是用来向 Web 服务器发送Form 数据的。action 定义Form数据送往的服务器上的 URL。method 可以是get 或 post。

可以使用 method="get"发送 Form 数据作为附加在URL 之后的查询字符串值。例如:
<form method="get" action="form-process.cgi">
 Name: <input type="text" name="uname"/><br/>
 Password: <input type="password" name="pw"/>
</form> 
将会请求使用如下URL的页面:
http://form-process.cgi?uname=Joe&pw=xyzzy

--------------------------------------------------
input 元素

input 元素用于输入短小文本 一行)或密码。用户通常利用input 元素输入用户名、密码、e-mail 主题、电话号码等。

XHTML MP 中支持的输入元素类型
Text  Password  Checkbox  Submit  Radio  Reset  Image  Hidden  
  
XHTML MP中不支持的HTML输入属性
Accept  Align  alt  Disabled  Ismap  Readonly  Usemap    

范例:
<form action="form-process.xhtml" method="get">
 First Name:
 <input type="text" name="fname" title="First Name"
  style="-wap-input-format:ammmmmm"/> <br/>
 <input type="submit"/>
</form>

---------------------------------------------------
复选框checkbox

<input type="checkbox" name="..."/>
使 用属性 checked="checked"定义默认情况下被选中的复选框。考虑服务的目标群体,判定哪个选项是大多数用户的可能选择,然后适当地把选项设定为选 中或未选中。(注意,在 XHTML中,每个属性都必须有一个引用值,而HTML中布尔型属性可以省略这个值。)

---------------------------------------------------
单选按钮radio
<input type="radio" name="..."/>
在同一个 form 中,确保给每个单选按钮定义的name属性相同。

---------------------------------------------------
提交(Submit)或复位(Reset)按纽

<input type="submit"/>
<input type="reset"/>

---------------------------------------------------
文本 (textarea)元素

避免定义比内容区域还要大的文本 ,即使要求的输入长度超过文本区的大小。

---------------------------------------------------
选择(select)元素

如有可能,定义一个默认的选项(selected="selected")。

在一个单选列表(即不包含 multiple="multiple")中,如果选项元素都没有定义selected="selected",则选择列表的第一个选项将最先被选中。 

在有语句 multiple="multiple"的选择列表(多选列表)中,如果选项元素都不包含selected="selected",则选择列表最初为空。

范例:
<form action="form-process.xhtml" method="get">
<p>Choose City:<br/>
 <select name="city">
  <option value="Boston">Boston</option>
  <option value="Dallas">Dallas</option>
  <option value="SanFrancisco">San Francisco</option>
 </select>
 <br/>
 <input type="submit" value="Continue"/>
</p>
</form>

---------------------------------------------------
隐藏字段

<input type="hidden"/>

如果你发现自己正在创建多个隐藏值,那么就可能在XHTML 页面中保存了太多“状态”,这使页面大小和Form请求大小比必需的大。可以使用大多数Web 服务器中可用的“session”功能,来将用户状态存储到服务器上的会话数据库中。
 
在 XHTML窗体中,可以使用单个隐藏字段来保存session ID,此ID将与各窗体请求一起发送。而一些 Web 服务器 session 工具使用cookie 保存当前的session ID。cookie值可以与每个页面请求一起发送,这增大了所有请求的大小,而隐藏值仅在提交 Form 时发送。

---------------------------------------------------
表格

与 WML 相比,具有WAP CSS的 XHTML MP使表格具有更好的布局。例如,在WML 中,不能修改和去除表格边界,但在具有WAP CSS 的XHTML中是可能的。

加入列标题(<th>)和表格标题(<caption>)是一个好主意。避免定义大于显示屏高度的表格单元。

XHTML MP 中不支持的表格属性
Align  Cellpadding  Cellspacing  Border 
  
与 XHTML MP一起使用的WAP CSS特性允许设计单元填充、页边空白、文本对齐和边界的样式,对左/右/上/下边界的控制是分开的。WAP CSS 还控制边界宽度以及色彩(在支持色彩的设备中)。
在 XHTML MP中,元素<td>和 <th>不支持属性width 或 height

---------------------------------------------------
图像

在图像周围加入白色象素制造空白空间,这样可防止其它图像或周围的文本 粘”在图像边界上。这可以通过 WAP CSS 的属性margin实现。

在标记中显式地定义图像的高度和宽度,这样可使浏览器为图像预留合适的空间。
例如:  <img src="http://simpleton.h.blog.163.com/blog/pics/header_main_page_001.gif" width="175" height="41" />.

使用WAP CSS的属性float:left 或 float:right 使文本 于小于显示屏宽度一半的图像周围。与从新的一行开始的文本 悬浮文本 终端用户进行的滚动较少。

在<img>元素中利用属性alt 定义替换文本 果无法载入图像,多数浏览器将显示该文本。

在 XHTML MP中,<img>元素不支持属性 align、border、 hspace、vspace 和 usemap。

---------------------------------------------------
关于XHTML 的其它知识

软键

在诺基亚电话中,软键是固定的,并且不能被覆盖。左侧软键的标签为 Options(在输入文本 为 OK ),右侧软键的标签为 Back(在输入文本时为 Clear)。
 
在浏览过程中,Options软键使得用户在任何时候都能轻松访问所有浏览器相关选项。Back 软键使用户返回到先前访问的 XHTML 页面。

在诺基亚移动浏览器中,包含属性accesskey 的所有链接和提交按钮都被自动加入到选项菜单中。

脚本

XHTML MP中,不支持<script>元素和任何元素的script 属性。XHTML MP 包含元素<object> 和 <param>,但一些移动浏览器可能不支持它们。

Cookies

诺基亚移动浏览器的4.0 版本 过Nokia Activ Server网关以及其它网关支持标准的 HTTP cookie。

框架

在 XHTML MP中不支持框架

扩展

诺基亚移动浏览器和许多其它 XHTML MP浏览器支持对 XHTML MP的扩展以保持与 CHTML的兼容性:

<blink> <marquee> <u> <dir> <menu>
tel: URI scheme, with cti, telbook, and email attributes

XHTML MP 和 WML 1.3 间的差别包括:
 
● 在 WML 1.3 中不使用XML 命名空间,但在 XHTML中使用。默认的命名空间是 XHTML。 

● 在 XHTML MP中,去除了WML 的根元素<wml>。作为替代,一直把XHTML 的元素<html>用作根元素。 

● 在 XHTML模块中,使用以下各项:XHTML Basic 中的所有元素、元素<hr>、行内属性<style>以及元素<b>、<big>、<I>和<small>。 

● 在 XHTML MP中,元素<head>是必须的。在 WML 1.3 中,该元素是可选的。 

● 在 XHTML MP中, WML 的元素<template>已经去除。 

● 在 XHTML MP中, WML 的元素<card>已经去除,并用<body>代替。与 WML 1.x 中的<card>不同,一个文件中只能有一个<body>元素。

● 在 XHTML MP中去掉了 WML的属性ordered。 

● 在 XHTML MP中不支持 WML事件, 如:<do>、<ontimer>、<onenterforward>、<onenterbackward>、<onevent>、 <onpick>、<go>、<prev>、<noop>和<postfield>。

● 在 XHTML MP中不能使用WML 的元素<do>。

● 行内表格(即段落中的 WML 元素<table>)是合法的,但在标准 XHTML 中是非法的。但是,为支持从WML 1.3到 WML 2.0 的转换,在 XHTML MP 中允许使用行内表格,诺基亚移动浏览器也对此给予支持。

● 元素<pre>可以包含窗体控制元素<input>和<select>。这在XHTML中是非法的。但是,为实现从 WML 1.3到 XHTML MP的转换,XHTML MP 允许在<pre>中使用窗体元素,诺基亚移动浏览器也对此给予支持。

● 输入元素不支持 WML 的属性 format (用于控制被认可的输入字母),并用CSS 的新属性-wap-input-formal作为替代,该属性与WML 的属性format 具有相同的语法。具体写法:style="-wap-input-format:ammmmmm"

● XHTML MP 在元素<a>、<input>、<label>和<textarea>中支持属性 accesskey 。但要注意,可能所有设备都不支持accesskey。 

● XHTML MP 中不支持WML 的格式化元素 <u>*。
在XHTML MP中实现格式化的推荐方法是使用 CSS类, 这可以通过在外部样式表中定义如下样式来完成:
.u {text-decoration:underline}
然后利用与类在一起的 span 元素来设置样式;
例如:
<span class="u">This is underlined</span>

● 在 XHTML MP中不支持其它 WML 1.x 元素。WAP 论坛定义了一个对 XHTML MP的扩展,该扩展被称为WML 2.0。WML 2.0 包含WML 1.x 的“兼容性”元素(如<wml:card>、 <wml:do>等)以实现WAP 网关从 WML1.x 到 WML 2.0 的自动翻译 。由于诺基亚移动浏览器原本 持 WML1.x ,翻译是不必要的,所以诺基亚移动浏览器不支持WML 2.0 。

------------------------------------------------

WAP CSS

1 引入外部文件
<link rel="stylesheet" href="http://simpleton.h.blog.163.com/blog/mydoc.css" type="text/css"/>

2 文档头中的样式元素
<style> p {color: blue} </style>

3 使用XHTML的 style属性
<p style="color:red”>red</p>

4 使用XHTML的 class属性
.class1 {padding-bottom:4px}
<p class="class1">This paragraph will have bottom padding.</p>

5 使用XHTML的 id属性
<style>
#myid {border-width: 1; border: solid; text-align: center}
<style>
<h1 id=”myid” >This heading has a solid border.</h1>

6 使用XHTML 的元素div 和 span
以上讨论了把由一个或多个元素定义的样式应用于内容,除此之外,还可以利用div 元素把样式(在样式表或<head>元素中被定义)应用于一系列元素或利用span元素把样式应用于一系列行内字符。

<div class=”test-case”>
<p>This paragraph is blue.</p>
<p>Here are <span class=”test-id”>Test51 and Test52</span> specs.</p>
</div>

-----------------------------------------
应避免的事项

● 避免使XHTML内容不能进行自动换行。也就是说,不要在属性white-space中使用值nowrap。

● 避免去掉锚(<a>元素)的下划线。也就是说,不要在锚中使用样式 text-decoration:none。

● 避免在普通文本 属性 text-decoration:underline。

● 避免过多地用属性font-style 和 font-variant 来强调文本 尤其在同一XHTML页面中。

● 避免在同一XHTML 页面中使用过多不同的字体类型(属性font-family)和字体大小(属性font-weigh 和font-size)。在一个XHTML 页面中,尽量把字体大小和字体类型限制在1 至3种。

【上篇】
【下篇】

抱歉!评论已关闭.