WAP 2.0网站是用XHTML MP基础（手机网站开发基础技术）

灰太狼 2022-09-20 08:32 1阅读 0赞

1.  原文链接（英文）：http://www.developershome.com/wap/xhtmlmp/
2.  同时推荐的文章（英文）http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development
3.  更多关于WAP CSS的信息请访问：[http://www.developershome.com/wap/wcss/][http_www.developershome.com_wap_wcss]
4.  当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧！下面的链接可以下载到你需要的实例：
5.  [http://mobiforge.com/starting/story/site-templates][http_mobiforge.com_starting_story_site-templates]
6.   
7.   
8.  一：XHTML MP的语法规则
9.  我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP(eXtensible HyperText Markup Language Mobile Profile)构建，以供手持设备的访问，如手机、PDA等。
10. XHTML MP是XHTML的子集，因此继承了它的语法。
11.  
12. XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则：
13.  
14. 1：标签必须正确闭合！
15. **<p>**XHTML MP 教程 段落 1**</p>**
16. **<p>**XHTML MP tutorial paragraph 2**</p>**
17. **<p>**XHTML MP tutorial paragraph 3**</p>**
18. 有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTML MP tutorial paragraph 1），
19. 就必须用这种形式：Line break**<br/>**。请注意一定要加上 斜杠
20.  
21. 2：标签和属性都必须是用小写
22. 正确的写法：
23. **<p** id="p1"**>**XHTML MP tutorial paragraph 1**</p>**
24. **<p** id="p2"**>**XHTML MP tutorial paragraph 2**</p>**
25. **<p** id="p3"**>**XHTML MP tutorial paragraph 3**</p>**
26.  
27. 3：属性的值必须放置在双引号内
28. **<p** id="p1"**>**XHTML MP tutorial paragraph 1**</p>**
29.  
30. 4：不支持属性简写
31. 在html中，如下写法是正确的：
32. **<input** type="checkbox" checked **/>**
33.  
34. 而xhtml中必须这样写：
35. **<input** type="checkbox" checked="checked" **/>**
36.  
37. 下面再举一个例子：
38. **<select** multiple="multiple"**>**
39. **<option>**XHTML MP Tutorial Part 1**</option>**
40. **<option** selected="selected"**>**XHTML MP Tutorial Part 2**</option>**
41. **<option>**XHTML MP Tutorial Part 3**</option>**
42. **</select>**
43.  
44. 5：标签的嵌套必须正确
45. 不支持标签的重叠，所以下面的写法是错误的！
46. **<p><b>**XHTML MP tutorial paragraph 1**</p></b>**
47. 应该这样子写：
48. **<p><b>**XHTML MP tutorial paragraph 1**</b></p>**
49. 二：XHTML MP的 MIME类型 和 文件扩展名
50. XHTML MP支持下面三种MIME类型
51. 1.  application/vnd.wap.xhtml+xml
52. 2.  application/xhtml+xml
53. 3.  text/html
54. 第一种类型是一些wap浏览器所需要的（如某些诺基亚S60浏览器），以便正确显示XHTML MP文档。
55. 第二种是XHTML系列文档的类型
56. 第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档，而如果遇到上面的两种类型就会弹出一个对话框
57. 让你保存这些文档。
58. 动态选择MIME类型
59. 比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型，那所有的XHTML MP文档就
60. 都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
61. 要实现这个就必须通过服务器端编程，获取客户端HTTP请求的Header值，这里面的值包含客户端可以处理的所有MIME类型。
62. 如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml，如果支持其它的，就设置成其它的。
63. 下面的例子是JSP的，但是你如果使用其它技术的话，原理是一样的，代码也是大同小异！
64. **<**%
65. String acceptHeader = request.getHeader("accept");
66.  
67. if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
68. response.setContentType("application/vnd.wap.xhtml+xml");
69. else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
70. response.setContentType("application/xhtml+xml");
71. else
72. response.setContentType("text/html");
73. %**>**
74. 这里的代码很简单，我就不多加解释了！
75. 文件的扩展名
76. 静态XHTML MP文档的典型扩展名包括：.xhtml、.html和.htm。当然，你也可以使用其它扩展名，只要你在
77. WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术（如JSP、PHP、ASP、SSI等），你就必须
78. 使用相应的扩展名，如PHP使用.php，SSI使用.shtml。
79. 三：XHTML MP文档结构
80. 第一个例子    一个典型的ＸＨＴＭＬ　ＭＰ文档结构
81. **<?xml** version="1.0"**?>**
82. **<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
83.  
84. **<html** xmlns="http://www.w3.org/1999/xhtml"**>**
85. **<head>**
86. **<title>**XHTML MP Tutorial**</title>**
87. **</head>**
88.  
89. **<body>**
90. **<p>**Hello world. Welcome to our XHTML MP tutorial.**</p>**
91. **</body>**
92. **</html>**
93. 讲解：
94. **<?xml** version="1.0"**?>**
95. **<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
96. 前面的预声明不是ＸＨＴＭＬ　ＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬ　ＭＰ的约定。
97. 剩下的内容和普通的ｈｔｍｌ没有什么不同了。
98. 记住：ＸＨＴＭＬ　ＭＰ必须包含**<html>**, **<head>**, **<title>**, 和 **<body>**元素。
99. 四：XML声明和字符编码
100. **<?xml** version="1.0" encoding="UTF-8"**?>**
101. 所有的XHTML MP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。
102. 如果文档的字符编码是UTF-8 or UTF-16的话，其实可以省略掉。
103. 虽然这个XML声明是可以省略的，但是我们不建议这么做，因此这样可能导致某些索爱的WAP浏览器产生错误。
104. 五：DOCTYPE声明
105. 这个**<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
106. 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息，可供验证工具验证你写的XHTML MP文档的语法正确性。
107. 这些验证工具集成在很多IDE中了。
108. 六：各标记简析
109. **<html>**是XHTML MP的根标记。目前，该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值，这个用来保证
110. 严格遵守XHTML MP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。
111. **<head>**标记用来存放关于文档本身的信息。比如**<title>**和**<link>**,还有**<meta>**，这几个标记的功能和在传统的html里面的功能是一样的！
112. 这里不再废话了。
113. 还有**<body>**标记也不重复解释了。
114. **<p>**标记的text-align属性已经被取消了，你可以在css中定义实现这个功能，如：
115. p \{
116. text-align: right
117. \}
118. 七：XHTML MP 的 Metadata
119. 先看下面的例子：
120. **<head>**
121. **<title>**XHTML MP Tutorial**</title>**
122. **<meta** name="author" content="Andrew"**/>**
123. **</head>**
124. WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。
125. 八：XHTML MP的缓存控制
126. 这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就
127. 直接显示这个页面，而不需要再次联网下载，这样节省了时间。
128. 当然，你可以禁止缓存，你可以这样做：
129. **<head>**
130. **<title>**XHTML MP Tutorial**</title>**
131. **<meta** http-equiv="Cache-Control"  content="no-cache"**/>**
132. **</head>**
133. 上面的也可以这样写：**<meta** http-equiv="Cache-Control" content="max-age=0"**/>**
134. 如果你要设置缓存时间是300秒的话，可以这么做：
135. **<head>**
136. **<title>**XHTML MP Tutorial**</title>**
137. **<meta** http-equiv="Cache-Control" content="max-age=300"**/>**
138. **</head>**
139. 还要注意的一点是，上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。
140. 面对这种情况，更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。
141. 九：XHTML MP的定时刷新
142. **<head>**
143. **<title>**XHTML MP Tutorial**</title>**
144. **<meta** http-equiv="Cache-Control" content="no-cache"**/>**
145. **<meta** http-equiv="refresh" content="15"**/>**
146. **</head>**
147. 上面的代码让页面每隔15秒刷新一次！
148. 注意：必须包含这句：**<meta** http-equiv="Cache-Control" content="no-cache"**/>**，
149. 如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。
150.  
151. 还有一个用法就是用来URL自动跳转，例子如下：
152. **<head>**
153. **<title>**XHTML MP Tutorial**</title>**
154. **<meta** http-equiv="refresh" content="3;URL=http://blog.csdn.net/patriot074/"**/>**
155. **</head>**
156. 需要注意的是，不是所有浏览器都支持refresh，如：诺基亚 浏览器4.0和Ericsson T610 和 T68i
157. 不过，阿佛使用的Windows Mobile手机是支持的，所以推荐使用。
158. 随着智能手机的降价，上面的那些不支持的也很快要淘汰了吧。
159. 十：注释
160. 和html的一样啦：
161. 
162. 十一：换行
163. **<BR/>**, 例子：
164. **<body>**
165. **<p>**
166. Line 1**<br/>**
167.  Line 2**<br/><br/>**
168.  Line 3
169.  **</p>**
170. **</body>**
171. 十二：**<hr/>**标记
172. 这个标记会给你的页面添加一条水平线。注意：
173. 这个标记不能在**<p></p>**标记之间使用！！！
174. 例子：
175. **<body>**
176. **<p>**
177.  Table of Contents:**<br/>**
178.  **</p>**
179.  **<hr/>**
180.  **<p>**
181.  Part 1 XHTML MP Introduction**<br/>**
182.  Part 2 Development of Wireless Markup Languages**<br/>**
183.  Part 3 Advantages of XHTML MP**<br/>**
184.  Part 4 WML Features Lost in XHTML MP
185.  **</p>**
186. **</body>**
187. 十三：标题标记
188. **<h1>**, **<h2>**, **<h3>**, **<h4>**, **<h5>**, 和 **<h6>**
189. 浏览器将以不同的大小显示置于此标记中的文字，具体效果你可以测试下面的代码：
190. **<body>**
191. **<h1>**Level 1 Heading**</h1>**
192.  **<h2>**Level 2 Heading**</h2>**
193.  **<h3>**Level 3 Heading**</h3>**
194.  **<h4>**Level 4 Heading**</h4>**
195.  **<h5>**Level 5 Heading**</h5>**
196.  **<h6>**Level 6 Heading**</h6>**
197.  **</body>**
198.  
199. 十四：文字样式
200. 首先声明的是有些浏览器并不支持XHTML MP支持的标记。
201. 例子：
202. **<body>**
203. **<p>**
204.  **<b>**Bold**</b><br/>**
205.  **<i>**Italic**</i><br/>**
206.  **<b><i>**Bold italic**</i></b><br/>**
207.  **<small>**Small**</small><br/>**
208.  **<big>**Big**</big><br/>**
209.  **<em>**Emphasis**</em><br/>**
210.  **<strong>**Strong**</strong>**
211.  **</p>**
212.  **</body>**
213. 你还可以通过WAP  CSS进行更精确的控制，比如把文字大小设置为12pt。
214. 更多关于WAP CSS的信息请访问：（下面将不再重复声明）
215. http://www.developershome.com/wap/wcss/
216. 十五：预格式文本
217. 在XHTML MP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：
218. **<body>**
219. **<p>** Hello, welcome 
220. to 
221. our
222. XHTML MP tutorial. **</p>**
223. **</body>**
224. 为了能够保持你希望的格式，可以使用**<pre>**标签：
225. **<body>**
226. **<pre>** Hello, welcome 
227. to 
228. our
229. XHTML MP tutorial. **</pre>**
230. **</body>**
231. 这样最后显示的格式就和上面代码中排列的一样了。
232. 十六：列表标签
233. 使用**<ul>**标签来建立无序列表，每个列表项前将显示一个小圆点。
234. **<li>**标签用来包围每个列表项。
235. 请看下面的例子：
236. **<body>**
237. **<p>**Table of Contents:**</p>**
238.  **<ul>**
239.  **<li>**Part 1 XHTML MP Introduction**</li>**
240.  **<li>**Part 2 Development of Wireless Markup Languages**</li>**
241.  **<li>**Part 3 Advantages of XHTML MP**</li>**
242.  **<li>**Part 4 WML Features Lost in XHTML MP**</li>**
243.  **</ul>**
244. **</body>**
245. 使用**<ol>**标签来建立有序列表，请看下面的例子：
246. **<body>**
247. **<p>**Table of Contents:**</p>**
248.  **<ol>**
249.  **<li>**XHTML MP Introduction**</li>**
250.  **<li>**Development of Wireless Markup Languages**</li>**
251.  **<li>**Advantages of XHTML MP**</li>**
252.  **<li>**WML Features Lost in XHTML MP**</li>**
253.  **</ol>**
254. **</body>**
255. 其中，在**<ol>**标签中可以设置start属性的值来决定列表序号的起始值，例如：
256. **<ol** start="4"**>**
257. 通过WAP CSS你可以对列表的外观进行更精确的控制。例如，可以修改显示序号的方式，
258. 比如使用i ,ii ,iii来替代1，2，3。
259. 十七：显示图片
260. 和HTML中一样，使用**<img>**标签来显示图片。height和width属性用来指定图片的高和宽（像素）。
261. WAP2.0支持常用的GIF、JPG、PNG图像格式，当然这还跟用户所有设备有关，一些设备只能显示
262. 其中的一部分格式。要想知道客户端支持的图片格式，很容易，和先前讲过的一样，可以通过检查
263. HTTP Header，请看下面的代码：
264. **<?xml** version="1.0"**?>**
265. **<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
266.  
267. **<html** xmlns="http://www.w3.org/1999/xhtml"**>**
268. **<head>**
269. **<title>**Image in XHTML MP**</title>**
270. **</head>**
271.  
272. **<body>**
273. **<p>**
274. **<img** src="monkey.gif" alt="coolMonkey" height="50" width="50" **/><br/>**
275. Hello, welcome to our XHTML MP tutorial.
276. **</p>**
277. **</body>**
278. **</html>**
279. 其中alt属性在图片无法显示的时候会显示其设置的文本值。
280. 十八：大图片问题
281. 很多WAP浏览器没有水平滚动条（我的WM IE也是，但是它会自动缩放图片到合适尺寸）。因此如果图片超过设备的屏幕尺寸，
282. 很多浏览器就只能显示局部图片，这样从用户看来很糟糕！还有注意的就是height和width属性设置只是影响外观，加载图片的时间
283. 和图片大小有关，与你设置的height和width的值无关。使用大图片将让你的访问用户掏更多钱（并花费更多的时间）去支援移动，因为大图片带来大流量，
284. 移动的疯狂收费已经吓住了不少潜在的客户（你不希望你的网站吓走用户吧）。阿佛的哥哥就是个例子，移动的1元包月5M套餐，
285. 而他超过了流量（不少普通用户根本没有流量的概念），移动收了几十元，从此就再也不敢用手机GPRS上网了。
286. 因此从优化XHTML MP页面图像的角度来看，控制图片的大小有下面几招：
287. 1：使用PS等图片处理软件减小图片的尺寸，而不是传送大图片给无线设备，然后通过height和width来设定显示尺寸。
288. 2：如果使用的GIF格式的图片，那么请使用小型颜色调色板，使用小型调色板会降低图片的质量，不过你可以在二者
289. 之间做一个较好的平衡。
290. 3：如果图片是JPG格式，你应该用合适压缩比率来压缩。这个平衡（图片尺寸和显示质量）也要你来控制。
291. 4：期待移动降低上网资费并提高龟速网络（这仅仅是期待）。
292. 更好的提高你的手机网站性能方式是先处理页面的文档请求，再接着处理图片的显示。但是如果构建这样的网站已经超过了本文要
293. 描述的范围，如果你感兴趣的话请自行搜索关键字：Multipart messages
294. 十九：表格
295. 创建表格所使用的标签和HTML中使用的没有区别。所以请直接看下面的例子：
296. **<body>**
297. **<table>**
298. **<tr>**
299.   **<td>**Cell A**</td>**
300.   **<td>**Cell B**</td>**
301.   **<td>**Cell C**</td>**
302. **</tr>**
303.  
304. **<tr>**
305.   **<td>**Cell D**</td>**
306.   **<td>**Cell E**</td>**
307.   **<td** rowspan="2"**>**Cell F**</td>**
308. **</tr>**
309.  
310. **<tr>**
311.   **<td** colspan="2"**>**Cell G**</td>**
312. **</tr>**
313. **</table>**
314. **</body>**
315. 这里显示出来的效果是不带边框的表格。如果你要显示，可以使用WAP CSS来控制。
316. 在**<head>**标签里面加入如下代码：
317. **<style>**
318.     td \{
319.   border: thin solid black
320. \}
321. **</style>**
322. 二十：超链接
323. 超链接是用来导航的，你可以点击一个连接然后跳转到其他XHTML MP页面。这个html中的一样，请看下面的例子：
324. **<a** href="http://blog.csdn.net/patriot074/"**>**阿佛的博客首页**</a>**
325. 下面再讲讲当前页面的定位（滚动到当前页面的指定位置）：
326. 请看下面的例子：
327. **<body>**
328. **<p><a** id="top"**>**Table of Contents:**</a></p>**
329. **<ul>**
330. **<li>**Part 1 XHTML MP Introduction**</li>**
331. **<li>**Part 2 Development of Wireless Markup Languages**</li>**
332. **<li>**Part 3 Advantages of XHTML MP**</li>**
333. **<li>**Part 4 WML Features Lost in XHTML MP**</li>**
334. **<li>**如果页面不够长，无法显示效果的话就再多几个列表项**</li>**
335. **<li>**如果页面不够长，无法显示效果的话就再多几个列表项**</li>**
336. **<li>**如果页面不够长，无法显示效果的话就再多几个列表项**</li>**
337. **<li>**如果页面不够长，无法显示效果的话就再多几个列表项**</li>**
338. **</ul>**
339. **<p><a** href="\#top"**>**Back to top**</a></p>**
340. **</body>**
341. 从上面的例子可以看出，要定位到指定位置，可以通过**<a** href="\#top"**>**Back to top**</a>**
342. 来实现，\#号加上要跳转到位置的 **<a>**标记的id值就可以了。
343. 一些老的机器和浏览器不支持这个，如索爱的T610 和 T68i（02年的，应该没什么人用了吧）
344. 二十一：使用更短的URL
345. 我们知道手机输入比用电脑键盘慢多了。因此你应该让你的网站的url尽可能的短，看看下面的几种方法：
346. 1：好好利用子域名。使用http://wap.somedomain.com/来代替http://www.somedomain.com/wap/。还可以使用
347. 更短的域名：  http://somedomain.com/ 。
348. 2：让你的web站点和wap站点使用相同的URL。
349. 使用"http://www.somedomain.com/" 或者 http://somedomain.com/来代替http://www.somedomain.com/wap/"作为
350. WAP站点的域名。如果一个HTTP 请求来自手机，那么将把WAP版本的站点发送给这个请求用户，否则将返回web版本的站点。
351. 3：设置站点的默认文档。这样就可以通过http://wap.somedomain.com/来访问http://wap.somedomain.com/index.xhtml页面。
352. 二十二：图形化链接
353. 这里的技巧和HTML的一样。你可以在**<a>**标签中放一个**<img>**标签，这样就可以在你点击图片的时候进行页面跳转了。
354. **<body>**
355. **<p>**
356. This is page 1.**<br/>**
357. **<a** href="linksEg5.xhtml"**><****img** src="to2.gif" alt="Go to linksEg5.xhtml"**/></****a>**
358. **</p>**
359. **</body>**
360. 二十三：设置超链接的访问快捷键
361. **<body>**
362. **<p>**
363. This is page 1.**<br/>**
364. **<a** accesskey="1" href="linksEg7.xhtml"**><****img** src="to2.gif" alt="Go to linksEg7.xhtml"**/></****a>**
365. **</p>**
366. **</body>**
367. 属性accesskey用来设置快捷键，当你按下这个键的时候就相当于点击了这个超链接（而在PC上浏览器仅仅是让这个超链接获得焦点）。
368. accesskey属性的可用值是：\*, \#, 0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9。
369. 二十四：下拉选择框
370. 这个也和HTML中一样，所以直接上代码：
371. **<body>**
372. **<form** method="get" action="xhtml\_mp\_tutorial\_proc.asp"**>**
373. **<p>**
374. **<select** name="selectionList"**>**
375. **<option** value="tutorial\_A"**>**XHTML MP Tutorial Part A**</option>**
376. **<option** value="tutorial\_B"**>**XHTML MP Tutorial Part B**</option>**
377. **<option** value="tutorial\_C"**>**XHTML MP Tutorial Part C**</option>**
378. **</select>**
379. **</p>**
380. **</form>** 
381. **</body>**
382. 默认选择的代码是：
383. **<option** value="tutorial\_B" selected="selected"**>**XHTML MP Tutorial Part B**</option>**
384. 支持多选的代码是：（在WM IE中无效）
385. **<select** name="selectionList" multiple="multiple"**>**
386. 二十五：Input元素
387. 和HTML一样，XHTML MP也拥有各种获取用户输入的input元素。
388. input元素必须放置在**<form>**标记之间。
389. **<input>**标记的 type 属性定义了input元素的类型。name属性定义了input元素的名称，可供服务器端检索。
390. 二十六：文本域
391.     文本域用来获取字母和数字数据。请看下面的例子：
392. **<input** type="text" name="name\_for\_this\_element"**/>**
393. type的默认属性就是text，所以可以忽略。
394. 你可以使用 maxlength属性来控制文本域可输入的字符数，例如：
395. **<input** type="text" name="myTextField" maxlength="16"**/>**
396. 你还可以使用value属性来设置文本域的默认值，例如：
397. **<input** type="text" name="myTextField" maxlength="16" value="Jack"**/>**
398. XHTML MP不再支持**<input>**标签的format属性，你可以使用WAP CSS的-wap-input-format来控制。
399. 例如，限制输入格式为最多10个数字：
400. input \{
401. \-wap-input-format: "10N"
402. \}
403. 下面再来介绍一下密码域：
404. 在密码域中所有的字符通过星号来显示，请看例子：
405. **<input** type="password" name="name\_for\_this\_element"**/>**
406. 二十七：复选框和单选按钮
407. 复选框和HTML中也类似，例如：
408. **<input** type="checkbox" name="xhtml\_mp\_tutorial\_chapter" value="1"**/>**
409. **<input** type="checkbox" name="xhtml\_mp\_tutorial\_chapter" value="2"**/>**
410. **<input** type="checkbox" name="xhtml\_mp\_tutorial\_chapter" value="3"**/>**
411. value的值将被发送服务器端（当有选中该复选框）。
412. 你也可以通过checked属性设置复选框是否选中，代码如下：
413. **<input** type="checkbox" name="xhtml\_mp\_tutorial\_chapter" value="1" checked="checked"**/>**
414. 下面的标记代码创建一个单选按钮：
415. **<input** type="radio" name="name\_for\_this\_element"**/>**
416. 和复选框按钮类似，拥有相同name属性值的单选按钮将被分在同一个组，例如：
417. **<input** type="radio" name="xhtml\_mp\_tutorial\_chapter" value="1"**/>**
418. **<input** type="radio" name="xhtml\_mp\_tutorial\_chapter" value="2"**/>**
419. **<input** type="radio" name="xhtml\_mp\_tutorial\_chapter" value="3"**/>**
420. name和value对是相关联的，这个将在form提交后用来后台取值。和复选框一样，checked属性用来指定是否选中该项。
421. 二十八：隐藏字段
422. 隐藏字段将不会在页面中显示。它用来存储状态信息的。例如：
423. **<input** type="hidden" name="temp\_id" value="123456"**/>**
424. value属性会被回发到服务器端。
425. 二十九：提交窗体数据到服务器端
426. 在前文中，我们讲到了很多input元素，它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢？
427. 你需要把这些标签和提交按钮置于**<form></form>**标签中。例如：
428. **<?xml** version="1.0"**?>**
429. **<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
430.  
431. **<html** xmlns="http://www.w3.org/1999/xhtml"**>**
432. **<head>**
433. **<title>**XHTML MP Tutorial**</title>**
434. **</head>**
435.  
436. **<body>**
437. **<h1>**Registration Form**</h1>**
438. **<form** method="get" action="processing.asp"**>**
439. **<p>**
440. Username:**<br/>**
441. **<input** name="username"**/><****br/>**
442.  
443. Password:**<br/>**
444. **<input** type="password" name="password"**/><****br/>**
445.  
446. Gender:**<br/>**
447. **<input** type="radio" name="gender" value="m"**/>**Male
448. **<input** type="radio" name="gender" value="f"**/>**Female**<br/>**
449.  
450. Country:**<br/>**
451. **<select** name="country"**>**
452. **<option** value="ca"**>**Canada**</option>**
453. **<option** value="cn"**>**China**</option>**
454. **<option** value="fr"**>**France**</option>**
455. **<option** value="de"**>**Germany**</option>**
456. **<option** value="in"**>**India**</option>**
457. **<option** value="it"**>**Italy**</option>**
458. **<option** value="jp"**>**Japan**</option>**
459. **<option** value="kr"**>**Korea**</option>**
460. **<option** value="uk"**>**United Kingdom**</option>**
461. **<option** value="us"**>**United States**</option>**
462. **</select><br/>**
463.  
464. Which part of our XHTML MP tutorial do you like?**<br/>**
465. **<input** type="checkbox" name="tutorial\_part" value="1"**/>**Part 1
466. **<input** type="checkbox" name="tutorial\_part" value="2"**/>**Part 2
467. **<input** type="checkbox" name="tutorial\_part" value="3"**/>**Part 3
468. **<input** type="checkbox" name="tutorial\_part" value="4"**/>**Part 4
469.  
470. **<input** type="hidden" name="temp\_id" value="123456"**/>**
471. **</p>**
472.  
473. **<hr/>**
474.  
475. **<p>**
476. **<input** type="submit"**/>**
477. **<input** type="reset"**/>**
478. **</p>**
479. **</form>**
480. **</body>**
481. **</html>** 
482. 三十：Form元素
483. **<form>**标记是form控件的容器。下面继续介绍**<form>**标记的两个方法POST和GET。
484. 先介绍get方法：
485. **<form** method="get" action="processing.asp"**>**
486. 使用get方法，数据将追加到URL中发送。由于URL携带的字符量是有限制的，这也成了get方法的一大缺点。
487. 还有一个问题是为了避免编码问题（当有非ASCII字符时），你应该使用POST方法替代get方法。而使用POST方法
488. 数据时，数据将插入到请求到一起发送。
489. 接下来再讲解一下action属性，该属性指定了哪个页面用来处理提交的数据，你可以在该页面编写后台处理代码。
490. 三十一：提交按钮和重置按钮
491. 在XHTML MP中，而每个form都应该包含一个submit按钮。当点击这个按钮后，窗体数据就会被提交到服务器进行处理。
492. 下面来看看这个按钮：
493. **<input** type="submit" value="OK"**/>**
494. value属性用来指定这个按钮的标题。如果没有设置这个属性的话，那么将显示默认的 submit （如果是中文浏览器，会显示提交）
495. 接着再来介绍一下重置按钮。当按下重置按钮时，form中包含的控件值将回到初始状态。例如：
496. **<input** type="reset"**/>**
497. 如果没有设置重置按钮的value值，那么将默认显示reset或者重置。
498. 三十二：服务器端
499. 你可以使用你熟悉的服务器端技术来处理这些**<input>**和**<select>**属性。流行的技术包括ASP/ASP.NET 、Java Servlet/JSP 、Perl和PHP。
500. 下面提供一个简单的获取客户端传过来的值的样例，关于ASP的。在现实中服务器端要做更复杂的处理。例如，把窗体发送过来的数据存储到数据库中。
501. **<?xml** version="1.0"**?>**
502. **<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">**
503.  
504. **<**% Response.ContentType = "application/vnd.wap.xhtml+xml" %**>**
505.  
506. **<html** xmlns="http://www.w3.org/1999/xhtml"**>**
507. **<head>**
508. **<title>**XHTML MP Tutorial**</title>**
509. **</head>**
510.  
511. **<body>**
512. **<p>**
513. Data received at the server:**<br/>**
514. Username: **<**% =Request.QueryString("username") %**><br/>**
515. Password: **<**% =Request.QueryString("password") %**><br/>**
516. Gender: **<**% =Request.QueryString("gender") %**><br/>**
517. Country: **<**% =Request.QueryString("country") %**><br/>**
518. Which part of our XHTML MP tutorial do you like?
519. **<**%
520. for i=1 to Request.QueryString("tutorial\_part").Count
521. Response.Write(Request.QueryString("tutorial\_part")(i) & " ")
522. next
523. %**>**
524. **<br/>**
525. temp\_id: **<**% =Request.QueryString("temp\_id") %**>**
526. **</p>**
527. **</body>**
528. **</html>**

[http_www.developershome.com_wap_wcss]: http://www.developershome.com/wap/wcss/
[http_mobiforge.com_starting_story_site-templates]: http://mobiforge.com/starting/story/site-templates

WAP 2.0网站是用XHTML MP基础（手机网站开发基础技术）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读