原文链接（英文）：/wap/xhtmlmp/同时推荐的文章（英文）/starting/story/a-beginners-guide-mobile-web-development更多关于WAPCSS的信息请访问：/wap/wcss/当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧！下面的链接可以下载到你需要的实例：/starting/story/site-templates一：XHTMLMP的语法规则我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP2.0网站是用XHTMLMP(eXtensible HyperText Markup Language Mobile Profile)构建，以供手持设备的访问，如手机、PDA等。XHTMLMP是XHTML的子集，因此继承了它的语法。XHTML是更严格和简洁的HTML版本。现在来看看XHTMLMP的语法规则：1：标签必须正确闭合！<p>XHTMLMP教程段落1</p><p>XHTMLMPtutorialparagraph2</p><p>XHTMLMPtutorialparagraph3</p>有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTMLMPtutorialparagraph1），就必须用这种形式：Linebreak<br/>。请注意一定要加上斜杠2：标签和属性都必须是用小写正确的写法：<pid="p1">XHTMLMPtutorialparagraph1</p><pid="p2">XHTMLMPtutorialparagraph2</p><pid="p3">XHTMLMPtutorialparagraph3</p>3：属性的值必须放置在双引号内<pid="p1">XHTMLMPtutorialparagraph1</p>4：不支持属性简写在html中，如下写法是正确的：<inputtype="checkbox"checked/>而xhtml中必须这样写：<inputtype="checkbox"checked="checked"/>下面再举一个例子：<selectmultiple="multiple"><option>XHTMLMPTutorialPart1</option><optionselected="selected">XHTMLMPTutorialPart2</option><option>XHTMLMPTutorialPart3</option></select>5：标签的嵌套必须正确不支持标签的重叠，所以下面的写法是错误的！<p><b>XHTMLMPtutorialparagraph1</p></b>应该这样子写：<p><b>XHTMLMPtutorialparagraph1</b></p>二：XHTMLMP的MIME类型和文件扩展名XHTMLMP支持下面三种MIME类型1.application/vnd.wap.xhtml+xml2.application/xhtml+xml3.text/html第一种类型是一些wap浏览器所需要的（如某些诺基亚S60浏览器），以便正确显示XHTMLMP文档。第二种是XHTML系列文档的类型第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档，而如果遇到上面的两种类型就会弹出一个对话框让你保存这些文档。动态选择MIME类型比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xmlMIME类型，那所有的XHTMLMP文档就都使用application/vnd.wap.xhtml+xmlMIME类型发送给客户端。要实现这个就必须通过服务器端编程，获取客户端HTTP请求的Header值，这里面的值包含客户端可以处理的所有MIME类型。如果支持就设置XHTMLMP的MIME类型为application/vnd.wap.xhtml+xml，如果支持其它的，就设置成其它的。下面的例子是JSP的，但是你如果使用其它技术的话，原理是一样的，代码也是大同小异！<%StringacceptHeader=request.getHeader("accept");if(acceptHeader.indexOf("application/vnd.wap.xhtml+xml")!=-1)response.setContentType("application/vnd.wap.xhtml+xml");elseif(acceptHeader.indexOf("application/xhtml+xml")!=-1)response.setContentType("application/xhtml+xml");elseresponse.setContentType("text/html");%>这里的代码很简单，我就不多加解释了！文件的扩展名静态XHTMLMP文档的典型扩展名包括：.xhtml、.html和.htm。当然，你也可以使用其它扩展名，只要你在WAP服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术（如JSP、PHP、ASP、SSI等），你就必须使用相应的扩展名，如PHP使用.php，SSI使用.shtml。三：XHTMLMP文档结构第一个例子一个典型的ＸＨＴＭＬＭＰ文档结构<?xmlversion="1.0"?><!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd"><htmlxmlns="/1999/xhtml"><head><title>XHTMLMPTutorial</title></head><body><p>Helloworld.WelcometoourXHTMLMPtutorial.</p></body></html>讲解：<?xmlversion="1.0"?><!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd">前面的预声明不是ＸＨＴＭＬＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬＭＰ的约定。剩下的内容和普通的ｈｔｍｌ没有什么不同了。记住：ＸＨＴＭＬＭＰ必须包含<html>,<head>,<title>,和<body>元素。四：XML声明和字符编码<?xmlversion="1.0"encoding="UTF-8"?>所有的XHTMLMP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。如果文档的字符编码是UTF-8orUTF-16的话，其实可以省略掉。虽然这个XML声明是可以省略的，但是我们不建议这么做，因此这样可能导致某些索爱的WAP浏览器产生错误。五：DOCTYPE声明这个<!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd">声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息，可供验证工具验证你写的XHTMLMP文档的语法正确性。这些验证工具集成在很多IDE中了。六：各标记简析<html>是XHTMLMP的根标记。目前，该标记的xmlns属性只能是/1999/xhtml这个值，这个用来保证严格遵守XHTMLMP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。<head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>，这几个标记的功能和在传统的html里面的功能是一样的！这里不再废话了。还有<body>标记也不重复解释了。<p>标记的text-align属性已经被取消了，你可以在css中定义实现这个功能，如：p{text-align:right}七：XHTMLMP的Metadata先看下面的例子：<head><title>XHTMLMPTutorial</title><metaname="author"content="Andrew"/></head>WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。八：XHTMLMP的缓存控制这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就直接显示这个页面，而不需要再次联网下载，这样节省了时间。当然，你可以禁止缓存，你可以这样做：<head><title>XHTMLMPTutorial</title><metahttp-equiv="Cache-Control"content="no-cache"/></head>上面的也可以这样写：<metahttp-equiv="Cache-Control"content="max-age=0"/>如果你要设置缓存时间是300秒的话，可以这么做：<head><title>XHTMLMPTutorial</title><metahttp-equiv="Cache-Control"content="max-age=300"/></head>还要注意的一点是，上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。面对这种情况，更好的方法是通过服务器端编程技术设置HTTPheader和HTTPresponse。九：XHTMLMP的定时刷新<head><title>XHTMLMPTutorial</title><metahttp-equiv="Cache-Control"content="no-cache"/><metahttp-equiv="refresh"content="15"/></head>上面的代码让页面每隔15秒刷新一次！注意：必须包含这句：<metahttp-equiv="Cache-Control"content="no-cache"/>，如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。还有一个用法就是用来URL自动跳转，例子如下：<head><title>XHTMLMPTutorial</title><metahttp-equiv="refresh"content="3;URL=/patriot074/"/></head>需要注意的是，不是所有浏览器都支持refresh，如：诺基亚浏览器4.0和EricssonT610和T68i不过，阿佛使用的WindowsMobile手机是支持的，所以推荐使用。随着智能手机的降价，上面的那些不支持的也很快要淘汰了吧。十：注释和html的一样啦：<!--ThisisacommentinXHTMLMP-->十一：换行<BR/>,例子：<body><p>Line1<br/>Line2<br/><br/>Line3</p></body>十二：<hr/>标记这个标记会给你的页面添加一条水平线。注意：这个标记不能在<p></p>标记之间使用！！！例子：<body><p>TableofContents:<br/></p><hr/><p>Part1XHTMLMPIntroduction<br/>Part2DevelopmentofWirelessMarkupLanguages<br/>Part3AdvantagesofXHTMLMP<br/>Part4WMLFeaturesLostinXHTMLMP</p></body>十三：标题标记<h1>,<h2>,<h3>,<h4>,<h5>,和<h6>浏览器将以不同的大小显示置于此标记中的文字，具体效果你可以测试下面的代码：<body><h1>Level1Heading</h1><h2>Level2Heading</h2><h3>Level3Heading</h3><h4>Level4Heading</h4><h5>Level5Heading</h5><h6>Level6Heading</h6></body>十四：文字样式首先声明的是有些浏览器并不支持XHTMLMP支持的标记。例子：<body><p><b>Bold</b><br/><i>Italic</i><br/><b><i>Bolditalic</i></b><br/><small>Small</small><br/><big>Big</big><br/><em>Emphasis</em><br/><strong>Strong</strong></p></body>你还可以通过WAPCSS进行更精确的控制，比如把文字大小设置为12pt。更多关于WAPCSS的信息请访问：（下面将不再重复声明）/wap/wcss/十五：预格式文本在XHTMLMP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：<body><p>Hello,welcometoourXHTMLMPtutorial.</p></body>为了能够保持你希望的格式，可以使用<pre>标签：<body><pre>Hello,welcometoourXHTMLMPtutorial.</pre></body>这样最后显示的格式就和上面代码中排列的一样了。十六：列表标签使用<ul>标签来建立无序列表，每个列表项前将显示一个小圆点。<li>标签用来包围每个列表项。请看下面的例子：<body><p>TableofContents:</p><ul><li>Part1XHTMLMPIntroduction</li><li>Part2DevelopmentofWirelessMarkupLanguages</li><li>Part3AdvantagesofXHTMLMP</li><li>Part4WMLFeaturesLostinXHTMLMP</li></ul></body>使用<ol>标签来建立有序列表，请看下面的例子：<body><p>TableofContents:</p><ol><li>XHTMLMPIntroduction</li><li>DevelopmentofWirelessMarkupLanguages</li><li>AdvantagesofXHTMLMP</li><li>WMLFeaturesLostinXHTMLMP</li></ol></body>其中，在<ol>标签中可以设置start属性的值来决定列表序号的起始值，例如：<olstart="4">通过WAPCSS你可以对列表的外观进行更精确的控制。例如，可以修改显示序号的方式，比如使用i,ii,iii来替代1，2，3。十七：显示图片和HTML中一样，使用<img>标签来显示图片。height和width属性用来指定图片的高和宽（像素）。WAP2.0支持常用的GIF、JPG、PNG图像格式，当然这还跟用户所有设备有关，一些设备只能显示其中的一部分格式。要想知道客户端支持的图片格式，很容易，和先前讲过的一样，可以通过检查HTTPHeader，请看下面的代码：<?xmlversion="1.0"?><!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd"><htmlxmlns="/1999/xhtml"><head><title>ImageinXHTMLMP</title></head><body><p><imgsrc="monkey.gif"alt="coolMonkey"height="50"width="50"/><br/>Hello,welcometoourXHTMLMPtutorial.</p></body></html>其中alt属性在图片无法显示的时候会显示其设置的文本值。十八：大图片问题很多WAP浏览器没有水平滚动条（我的WMIE也是，但是它会自动缩放图片到合适尺寸）。因此如果图片超过设备的屏幕尺寸，很多浏览器就只能显示局部图片，这样从用户看来很糟糕！还有注意的就是height和width属性设置只是影响外观，加载图片的时间和图片大小有关，与你设置的height和width的值无关。使用大图片将让你的访问用户掏更多钱（并花费更多的时间）去支援移动，因为大图片带来大流量，移动的疯狂收费已经吓住了不少潜在的客户（你不希望你的网站吓走用户吧）。阿佛的哥哥就是个例子，移动的1元包月5M套餐，而他超过了流量（不少普通用户根本没有流量的概念），移动收了几十元，从此就再也不敢用手机GPRS上网了。因此从优化XHTMLMP页面图像的角度来看，控制图片的大小有下面几招：1：使用PS等图片处理软件减小图片的尺寸，而不是传送大图片给无线设备，然后通过height和width来设定显示尺寸。2：如果使用的GIF格式的图片，那么请使用小型颜色调色板，使用小型调色板会降低图片的质量，不过你可以在二者之间做一个较好的平衡。3：如果图片是JPG格式，你应该用合适压缩比率来压缩。这个平衡（图片尺寸和显示质量）也要你来控制。4：期待移动降低上网资费并提高龟速网络（这仅仅是期待）。更好的提高你的手机网站性能方式是先处理页面的文档请求，再接着处理图片的显示。但是如果构建这样的网站已经超过了本文要描述的范围，如果你感兴趣的话请自行搜索关键字：Multipartmessages十九：表格创建表格所使用的标签和HTML中使用的没有区别。所以请直接看下面的例子：<body><table><tr><td>CellA</td><td>CellB</td><td>CellC</td></tr><tr><td>CellD</td><td>CellE</td><tdrowspan="2">CellF</td></tr><tr><tdcolspan="2">CellG</td></tr></table></body>这里显示出来的效果是不带边框的表格。如果你要显示，可以使用WAPCSS来控制。在<head>标签里面加入如下代码：<style>td{border:thinsolidblack}</style>二十：超链接超链接是用来导航的，你可以点击一个连接然后跳转到其他XHTMLMP页面。这个html中的一样，请看下面的例子：<ahref="/patriot074/">阿佛的博客首页</a>下面再讲讲当前页面的定位（滚动到当前页面的指定位置）：请看下面的例子：<body><p><aid="top">TableofContents:</a></p><ul><li>Part1XHTMLMPIntroduction</li><li>Part2DevelopmentofWirelessMarkupLanguages</li><li>Part3AdvantagesofXHTMLMP</li><li>Part4WMLFeaturesLostinXHTMLMP</li><li>如果页面不够长，无法显示效果的话就再多几个列表项</li><li>如果页面不够长，无法显示效果的话就再多几个列表项</li><li>如果页面不够长，无法显示效果的话就再多几个列表项</li><li>如果页面不够长，无法显示效果的话就再多几个列表项</li></ul><p><ahref="#top">Backtotop</a></p></body>从上面的例子可以看出，要定位到指定位置，可以通过<ahref="#top">Backtotop</a>来实现，#号加上要跳转到位置的<a>标记的id值就可以了。一些老的机器和浏览器不支持这个，如索爱的T610和T68i（02年的，应该没什么人用了吧）二十一：使用更短的URL我们知道手机输入比用电脑键盘慢多了。因此你应该让你的网站的url尽可能的短，看看下面的几种方法：1：好好利用子域名。使用/来代替/wap/。还可以使用更短的域名：/。2：让你的web站点和wap站点使用相同的URL。使用"/"或者/来代替/wap/"作为WAP站点的域名。如果一个HTTP请求来自手机，那么将把WAP版本的站点发送给这个请求用户，否则将返回web版本的站点。3：设置站点的默认文档。这样就可以通过/来访问/index.xhtml页面。二十二：图形化链接这里的技巧和HTML的一样。你可以在<a>标签中放一个<img>标签，这样就可以在你点击图片的时候进行页面跳转了。<body><p>Thisispage1.<br/><ahref="linksEg5.xhtml"><imgsrc="to2.gif"alt="GotolinksEg5.xhtml"/></a></p></body>二十三：设置超链接的访问快捷键<body><p>Thisispage1.<br/><aaccesskey="1"href="linksEg7.xhtml"><imgsrc="to2.gif"alt="GotolinksEg7.xhtml"/></a></p></body>属性accesskey用来设置快捷键，当你按下这个键的时候就相当于点击了这个超链接（而在PC上浏览器仅仅是让这个超链接获得焦点）。accesskey属性的可用值是：*,#,0,1,2,3,4,5,6,7,8,和9。二十四：下拉选择框这个也和HTML中一样，所以直接上代码：<body><formmethod="get"action="xhtml_mp_tutorial_proc.asp"><p><selectname="selectionList"><optionvalue="tutorial_A">XHTMLMPTutorialPartA</option><optionvalue="tutorial_B">XHTMLMPTutorialPartB</option><optionvalue="tutorial_C">XHTMLMPTutorialPartC</option></select></p></form></body>默认选择的代码是：<optionvalue="tutorial_B"selected="selected">XHTMLMPTutorialPartB</option>支持多选的代码是：（在WMIE中无效）<selectname="selectionList"multiple="multiple">二十五：Input元素和HTML一样，XHTMLMP也拥有各种获取用户输入的input元素。input元素必须放置在<form>标记之间。<input>标记的type属性定义了input元素的类型。name属性定义了input元素的名称，可供服务器端检索。二十六：文本域文本域用来获取字母和数字数据。请看下面的例子：<inputtype="text"name="name_for_this_element"/>type的默认属性就是text，所以可以忽略。你可以使用maxlength属性来控制文本域可输入的字符数，例如：<inputtype="text"name="myTextField"maxlength="16"/>你还可以使用value属性来设置文本域的默认值，例如：<inputtype="text"name="myTextField"maxlength="16"value="Jack"/>XHTMLMP不再支持<input>标签的format属性，你可以使用WAPCSS的-wap-input-format来控制。例如，限制输入格式为最多10个数字：input{-wap-input-format:"10N"}下面再来介绍一下密码域：在密码域中所有的字符通过星号来显示，请看例子：<inputtype="password"name="name_for_this_element"/>二十七：复选框和单选按钮复选框和HTML中也类似，例如：<inputtype="checkbox"name="xhtml_mp_tutorial_chapter"value="1"/><inputtype="checkbox"name="xhtml_mp_tutorial_chapter"value="2"/><inputtype="checkbox"name="xhtml_mp_tutorial_chapter"value="3"/>value的值将被发送服务器端（当有选中该复选框）。你也可以通过checked属性设置复选框是否选中，代码如下：<inputtype="checkbox"name="xhtml_mp_tutorial_chapter"value="1"checked="checked"/>下面的标记代码创建一个单选按钮：<inputtype="radio"name="name_for_this_element"/>和复选框按钮类似，拥有相同name属性值的单选按钮将被分在同一个组，例如：<inputtype="radio"name="xhtml_mp_tutorial_chapter"value="1"/><inputtype="radio"name="xhtml_mp_tutorial_chapter"value="2"/><inputtype="radio"name="xhtml_mp_tutorial_chapter"value="3"/>name和value对是相关联的，这个将在form提交后用来后台取值。和复选框一样，checked属性用来指定是否选中该项。二十八：隐藏字段隐藏字段将不会在页面中显示。它用来存储状态信息的。例如：<inputtype="hidden"name="temp_id"value="123456"/>value属性会被回发到服务器端。二十九：提交窗体数据到服务器端在前文中，我们讲到了很多input元素，它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢？你需要把这些标签和提交按钮置于<form></form>标签中。例如：<?xmlversion="1.0"?><!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd"><htmlxmlns="/1999/xhtml"><head><title>XHTMLMPTutorial</title></head><body><h1>RegistrationForm</h1><formmethod="get"action="processing.asp"><p>Username:<br/><inputname="username"/><br/>Password:<br/><inputtype="password"name="password"/><br/>Gender:<br/><inputtype="radio"name="gender"value="m"/>Male<inputtype="radio"name="gender"value="f"/>Female<br/>Country:<br/><selectname="country"><optionvalue="ca">Canada</option><optionvalue="cn">China</option><optionvalue="fr">France</option><optionvalue="de">Germany</option><optionvalue="in">India</option><optionvalue="it">Italy</option><optionvalue="jp">Japan</option><optionvalue="kr">Korea</option><optionvalue="uk">UnitedKingdom</option><optionvalue="us">UnitedStates</option></select><br/>WhichpartofourXHTMLMPtutorialdoyoulike?<br/><inputtype="checkbox"name="tutorial_part"value="1"/>Part1<inputtype="checkbox"name="tutorial_part"value="2"/>Part2<inputtype="checkbox"name="tutorial_part"value="3"/>Part3<inputtype="checkbox"name="tutorial_part"value="4"/>Part4<inputtype="hidden"name="temp_id"value="123456"/></p><hr/><p><inputtype="submit"/><inputtype="reset"/></p></form></body></html>三十：Form元素<form>标记是form控件的容器。下面继续介绍<form>标记的两个方法POST和GET。先介绍get方法：<formmethod="get"action="processing.asp">使用get方法，数据将追加到URL中发送。由于URL携带的字符量是有限制的，这也成了get方法的一大缺点。还有一个问题是为了避免编码问题（当有非ASCII字符时），你应该使用POST方法替代get方法。而使用POST方法数据时，数据将插入到请求到一起发送。接下来再讲解一下action属性，该属性指定了哪个页面用来处理提交的数据，你可以在该页面编写后台处理代码。三十一：提交按钮和重置按钮在XHTMLMP中，而每个form都应该包含一个submit按钮。当点击这个按钮后，窗体数据就会被提交到服务器进行处理。下面来看看这个按钮：<inputtype="submit"value="OK"/>value属性用来指定这个按钮的标题。如果没有设置这个属性的话，那么将显示默认的submit（如果是中文浏览器，会显示提交）接着再来介绍一下重置按钮。当按下重置按钮时，form中包含的控件值将回到初始状态。例如：<inputtype="reset"/>如果没有设置重置按钮的value值，那么将默认显示reset或者重置。三十二：服务器端你可以使用你熟悉的服务器端技术来处理这些<input>和<select>属性。流行的技术包括ASP/、JavaServlet/JSP、Perl和PHP。下面提供一个简单的获取客户端传过来的值的样例，关于ASP的。在现实中服务器端要做更复杂的处理。例如，把窗体发送过来的数据存储到数据库中。<?xmlversion="1.0"?><!DOCTYPEhtmlPUBLIC"-//WAPFORUM//DTDXHTMLMobile1.0//EN""/DTD/xhtml-mobile10.dtd"><%Response.ContentType="application/vnd.wap.xhtml+xml"%><htmlxmlns="/1999/xhtml"><head><title>XHTMLMPTutorial</title></head><body><p>Datareceivedattheserver:<br/>Username:<%=Request.QueryString("username")%><br/>Password:<%=Request.QueryString("password")%><br/>Gender:<%=Request.QueryString("gender")%><br/>Country:<%=Request.QueryString("country")%><br/>WhichpartofourXHTMLMPtutorialdoyoulike?<%fori=1toRequest.QueryString("tutorial_part").CountResponse.Write(Request.QueryString("tutorial_part")(i)&"")next%><br/>temp_id:<%=Request.QueryString("temp_id")%></p></body></html>
如果觉得《WAP 2.0网站是用XHTML MP基础（手机网站开发基础技术）》对你有帮助，请点赞、收藏，并留下你的观点哦！
