XHTML MP 需要注意的一些问题
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="style.css" type="text/css"/>
</head>
<body>
<h1> 标题 </h1>
<p>
文本
</p>
</body>
</html>
---------------------------------------------------
定义样式表
XHTML 移动规范[XHTMLMP]规定，外部样式表是可选的，并可通过下面两种方法之一为 XHTML文档定义
外部样式表：
通过一个在XML 声明(<?xml>)后而不是在<head>元素中定义的 XML处理指令，如下所示。注意，建议定义新的“handheld”媒体类型：
<?xml-stylesheet href="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>元素是 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="#h">Help</a>
...
<a name="h">Help text</a>
第 接显示文本Help。该链接被选中时，显示包含名为h的锚的文档部分。只有属性 name（没有属性href）的锚没有下划线并且无法被选中 们是具有属性 href="#anchor-name"的锚的不可见目标。
这是一种产生类似于WML“多卡片”行为的合理方法 XHTML页面的上端有一个 “ ” 链接，可以利用“ 跳至该页面的各个部分。例如，在页面底部可能有帮助文本，用户可以利用Help 链接迅速滚动到底部获取帮助文本。后退（Back）键能使用户返回到滚动前的位置，就如在Web浏览器中一样。
下面的程序段示例了一个锚元素，在此元素中对快捷键5 进行了定义，并将其链接到同一文档中的某个分段。
<a href="#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="john.doe@company.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="Message" _mce_href="mailto:john.doe@company.com">Message">mailto:john.doe@company.com">Message to John</a>
还可以在 URL中指定默认的 subject 和/或body以获得参数：
<a href="Message" _mce_href="mailto:john.doe@company.com?subject=The%20Subject&body=this%20is%20the%20message">Message">mailto:john.doe@company.com?subject=The%20Subject&body=this%20is%20the%20message">Message to John</a>
--------------------------------------------------------
快捷键
设备显示屏上的链接使导航变得快捷，它们甚至是导航不可缺少的部分，尤其在文档较长时，使用链接可以跳至文档的某个部分。然而，即使使用链接，也需要把页面滚动到链接位置，因此为到达链接位置用户需要多次按键操作。
快捷键使用户通过一次按键就能激活可见的链接，而无需到达链接位置。在<a>元素中加入属性accesskey就能创建快捷方式。该属性值定义为了激活链接用户必须按下的键。
然而，为让用户知道应该按下哪个键，有必要用文本 在<a>元素之前的<p>元素中）说明为属性accesskey选择的按键号码。在文本中加入按键值可保证用户看到与描述锚目标的文本 起的快捷键值。例如，在内容中定义下行：
1 <a href="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="#bottom">Bottom</a><br/>
1 <a href="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&
body=this%20is%20the%20message" accesskey="3">
Email Joe</a><br/>
<a href="#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>
---------------------------------------------------
复选框
<input type="checkbox" name="..."/>
使用属性 checked="checked"定义默认情况下被选中的复选框。考虑服务的目标群体，判定哪个选项是大多数用户的可能选择，然后适当地把选项设定为选中或未选中。（注意，在 XHTML中，每个属性都必须有一个引用值，而HTML中布尔型属性可以省略这个值。）
---------------------------------------------------
单选按钮
<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="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="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种。
