天天看点
返回

XHTML MP 语法基础知识

  1. 原文链接（英文）：http://www.developershome.com/wap/xhtmlmp/
  2. 转载自：appleseed's blog
  3. 同时推荐的文章（英文）http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development
  4. 更多关于WAP CSS的信息请访问：http://www.developershome.com/wap/wcss/
  5. 当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧！下面的链接可以下载到你需要的实例：
  6. http://mobiforge.com/starting/story/site-templates
  7. 一：XHTML MP的语法规则
  8. 我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP
  9. 构建，以供手持设备的访问，如手机、PDA等。
  10. XHTML MP是XHTML的子集，因此继承了它的语法。
  11. XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则：
  12. 1：标签必须正确闭合！
  13. <p>XHTML MP 教程 段落 1</p>
  14. <p>XHTML MP tutorial paragraph 2</p>
  15. <p>XHTML MP tutorial paragraph 3</p>
  16. 有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTML MP tutorial paragraph 1），
  17. 就必须用这种形式：Line break<br/>。请注意一定要加上 斜杠
  18. 2：标签和属性都必须是用小写
  19. 正确的写法：
  20. <p id="p1">XHTML MP tutorial paragraph 1</p>
  21. <p id="p2">XHTML MP tutorial paragraph 2</p>
  22. <p id="p3">XHTML MP tutorial paragraph 3</p>
  23. 3：属性的值必须放置在双引号内
  24. <p id="p1">XHTML MP tutorial paragraph 1</p>
  25. 4：不支持属性简写
  26. 在html中，如下写法是正确的：
  27. <input type="checkbox" checked />
  28. 而xhtml中必须这样写：
  29. <input type="checkbox" checked="checked" />
  30. 下面再举一个例子：
  31. <select multiple="multiple">
  32. <option>XHTML MP Tutorial Part 1</option>
  33. <option selected="selected">XHTML MP Tutorial Part 2</option>
  34. <option>XHTML MP Tutorial Part 3</option>
  35. </select>
  36. 5：标签的嵌套必须正确
  37. 不支持标签的重叠，所以下面的写法是错误的！
  38. <p><b>XHTML MP tutorial paragraph 1</p></b>
  39. 应该这样子写：
  40. <p><b>XHTML MP tutorial paragraph 1</b></p>
  41. 二：XHTML MP的 MIME类型 和 文件扩展名
  42. XHTML MP支持下面三种MIME类型
  43. 1.  application/vnd.wap.xhtml+xml
  44. 2.  application/xhtml+xml
  45. 3.  text/html
  46. 第一种类型是一些wap浏览器所需要的（如某些诺基亚S60浏览器），以便正确显示XHTML MP文档。
  47. 第二种是XHTML系列文档的类型
  48. 第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档，而如果遇到上面的两种类型就会弹出一个对话框
  49. 让你保存这些文档。
  50. 动态选择MIME类型
  51. 比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型，那所有的XHTML MP文档就
  52. 都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
  53. 要实现这个就必须通过服务器端编程，获取客户端HTTP请求的Header值，这里面的值包含客户端可以处理的所有MIME类型。
  54. 如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml，如果支持其它的，就设置成其它的。
  55. 下面的例子是JSP的，但是你如果使用其它技术的话，原理是一样的，代码也是大同小异！
  56. <%
  57. String acceptHeader = request.getHeader("accept");
  58. if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
  59. response.setContentType("application/vnd.wap.xhtml+xml");
  60. else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
  61. response.setContentType("application/xhtml+xml");
  62. else
  63. response.setContentType("text/html");
  64. %>
  65. 这里的代码很简单，我就不多加解释了！
  66. 文件的扩展名
  67. 静态XHTML MP文档的典型扩展名包括：.xhtml、.html和.htm。当然，你也可以使用其它扩展名，只要你在
  68. WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术（如JSP、PHP、ASP、SSI等），你就必须
  69. 使用相应的扩展名，如PHP使用.php，SSI使用.shtml。
  70. 三：XHTML MP文档结构
  71. 第一个例子    一个典型的ＸＨＴＭＬ　ＭＰ文档结构
  72. <?xml version="1.0"?>
  73. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  74. <html xmlns="http://www.w3.org/1999/xhtml">
  75. <head>
  76. <title>XHTML MP Tutorial</title>
  77. </head>
  78. <body>
  79. <p>Hello world. Welcome to our XHTML MP tutorial.</p>
  80. </body>
  81. </html>
  82. 讲解：
  83. <?xml version="1.0"?>
  84. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  85. 前面的预声明不是ＸＨＴＭＬ　ＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬ　ＭＰ的约定。
  86. 剩下的内容和普通的ｈｔｍｌ没有什么不同了。
  87. 记住：ＸＨＴＭＬ　ＭＰ必须包含<html>, <head>, <title>, 和 <body>元素。
  88. 四：XML声明和字符编码
  89. <?xml version="1.0" encoding="UTF-8"?>
  90. 所有的XHTML MP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。
  91. 如果文档的字符编码是UTF-8 or UTF-16的话，其实可以省略掉。
  92. 虽然这个XML声明是可以省略的，但是我们不建议这么做，因此这样可能导致某些索爱的WAP浏览器产生错误。
  93. 五：DOCTYPE声明
  94. 这个<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  95. 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息，可供验证工具验证你写的XHTML MP文档的语法正确性。
  96. 这些验证工具集成在很多IDE中了。
  97. 六：各标记简析
  98. <html>是XHTML MP的根标记。目前，该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值，这个用来保证
  99. 严格遵守XHTML MP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。
  100. <head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>，这几个标记的功能和在传统的html里面的功能是一样的！
  101. 这里不再废话了。
  102. 还有<body>标记也不重复解释了。
  103. <p>标记的text-align属性已经被取消了，你可以在css中定义实现这个功能，如：
  104. p {
  105. text-align: right
  106. }
  107. 七：XHTML MP 的 Metadata
  108. 先看下面的例子：
  109. <head>
  110. <title>XHTML MP Tutorial</title>
  111. <meta name="author" content="Andrew"/>
  112. </head>
  113. WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。
  114. 八：XHTML MP的缓存控制
  115. 这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就
  116. 直接显示这个页面，而不需要再次联网下载，这样节省了时间。
  117. 当然，你可以禁止缓存，你可以这样做：
  118. <head>
  119. <title>XHTML MP Tutorial</title>
  120. <meta http-equiv="Cache-Control"  content="no-cache"/>
  121. </head>
  122. 上面的也可以这样写：<meta http-equiv="Cache-Control" content="max-age=0"/>
  123. 如果你要设置缓存时间是300秒的话，可以这么做：
  124. <head>
  125. <title>XHTML MP Tutorial</title>
  126. <meta http-equiv="Cache-Control" content="max-age=300"/>
  127. </head>
  128. 还要注意的一点是，上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。
  129. 面对这种情况，更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。
  130. 九：XHTML MP的定时刷新
  131. <head>
  132. <title>XHTML MP Tutorial</title>
  133. <meta http-equiv="Cache-Control" content="no-cache"/>
  134. <meta http-equiv="refresh" content="15"/>
  135. </head>
  136. 上面的代码让页面每隔15秒刷新一次！
  137. 注意：必须包含这句：<meta http-equiv="Cache-Control" content="no-cache"/>，
  138. 如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。
  139. 还有一个用法就是用来URL自动跳转，例子如下：
  140. <head>
  141. <title>XHTML MP Tutorial</title>
  142. <meta http-equiv="refresh" content="3;URL=http://blog.csdn.net/patriot074/"/>
  143. </head>
  144. 需要注意的是，不是所有浏览器都支持refresh，如：诺基亚 浏览器4.0和Ericsson T610 和 T68i
  145. 不过，阿佛使用的Windows Mobile手机是支持的，所以推荐使用。
  146. 随着智能手机的降价，上面的那些不支持的也很快要淘汰了吧。
  147. 十：注释
  148. 和html的一样啦：
  149. <!-- This is a comment in XHTML MP -->
  150. 十一：换行
  151. <BR/>, 例子：
  152. <body>
  153. <p>
  154. Line 1<br/>
  155.  Line 2<br/><br/>
  156.  Line 3
  157.  </p>
  158. </body>
  159. 十二：<hr/>标记
  160. 这个标记会给你的页面添加一条水平线。注意：
  161. 这个标记不能在<p></p>标记之间使用！！！
  162. 例子：
  163. <body>
  164. <p>
  165.  Table of Contents:<br/>
  166.  </p>
  167.  <hr/>
  168.  <p>
  169.  Part 1 XHTML MP Introduction<br/>
  170.  Part 2 Development of Wireless Markup Languages<br/>
  171.  Part 3 Advantages of XHTML MP<br/>
  172.  Part 4 WML Features Lost in XHTML MP
  173.  </p>
  174. </body>
  175. 十三：标题标记
  176. <h1>, <h2>, <h3>, <h4>, <h5>, 和 <h6>
  177. 浏览器将以不同的大小显示置于此标记中的文字，具体效果你可以测试下面的代码：
  178. <body>
  179. <h1>Level 1 Heading</h1>
  180.  <h2>Level 2 Heading</h2>
  181.  <h3>Level 3 Heading</h3>
  182.  <h4>Level 4 Heading</h4>
  183.  <h5>Level 5 Heading</h5>
  184.  <h6>Level 6 Heading</h6>
  185.  </body>
  186. 十四：文字样式
  187. 首先声明的是有些浏览器并不支持XHTML MP支持的标记。
  188. 例子：
  189. <body>
  190. <p>
  191.  <b>Bold</b><br/>
  192.  <i>Italic</i><br/>
  193.  <b><i>Bold italic</i></b><br/>
  194.  <small>Small</small><br/>
  195.  <big>Big</big><br/>
  196.  <em>Emphasis</em><br/>
  197.  <strong>Strong</strong>
  198.  </p>
  199.  </body>
  200. 你还可以通过WAP  CSS进行更精确的控制，比如把文字大小设置为12pt。
  201. 更多关于WAP CSS的信息请访问：（下面将不再重复声明）
  202. http://www.developershome.com/wap/wcss/
  203. 十五：预格式文本
  204. 在XHTML MP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：
  205. <body>
  206. <p> Hello, welcome 
  207. to 
  208. our
  209. XHTML MP tutorial. </p>
  210. </body>
  211. 为了能够保持你希望的格式，可以使用<pre>标签：
  212. <body>
  213. <pre> Hello, welcome 
  214. to 
  215. our
  216. XHTML MP tutorial. </pre>
  217. </body>
  218. 这样最后显示的格式就和上面代码中排列的一样了。
  219. 十六：列表标签
  220. 使用<ul>标签来建立无序列表，每个列表项前将显示一个小圆点。
  221. <li>标签用来包围每个列表项。
  222. 请看下面的例子：
  223. <body>
  224. <p>Table of Contents:</p>
  225.  <ul>
  226.  <li>Part 1 XHTML MP Introduction</li>
  227.  <li>Part 2 Development of Wireless Markup Languages</li>
  228.  <li>Part 3 Advantages of XHTML MP</li>
  229.  <li>Part 4 WML Features Lost in XHTML MP</li>
  230.  </ul>
  231. </body>
  232. 使用<ol>标签来建立有序列表，请看下面的例子：
  233. <body>
  234. <p>Table of Contents:</p>
  235.  <ol>
  236.  <li>XHTML MP Introduction</li>
  237.  <li>Development of Wireless Markup Languages</li>
  238.  <li>Advantages of XHTML MP</li>
  239.  <li>WML Features Lost in XHTML MP</li>
  240.  </ol>
  241. </body>
  242. 其中，在<ol>标签中可以设置start属性的值来决定列表序号的起始值，例如：
  243. <ol start="4">
  244. 通过WAP CSS你可以对列表的外观进行更精确的控制。例如，可以修改显示序号的方式，
  245. 比如使用i ,ii ,iii来替代1，2，3。
  246. 十七：显示图片
  247. 和HTML中一样，使用<img>标签来显示图片。height和width属性用来指定图片的高和宽（像素）。
  248. WAP2.0支持常用的GIF、JPG、PNG图像格式，当然这还跟用户所有设备有关，一些设备只能显示
  249. 其中的一部分格式。要想知道客户端支持的图片格式，很容易，和先前讲过的一样，可以通过检查
  250. HTTP Header，请看下面的代码：
  251. <?xml version="1.0"?>
  252. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  253. <html xmlns="http://www.w3.org/1999/xhtml">
  254. <head>
  255. <title>Image in XHTML MP</title>
  256. </
wap xhtml mobile css 浏览器
上一篇: 通过response.encodeRedirectUrl的方式支持手机session
下一篇: 运行rviz出现python语法错误出现该问题的原因

继续阅读