- 原文链接(英文):http://www.developershome.com/wap/xhtmlmp/
- 同时推荐的文章(英文)http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development
- 更多关于WAP CSS的信息请访问:http://www.developershome.com/wap/wcss/
- 当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧!下面的链接可以下载到你需要的实例:
- http://mobiforge.com/starting/story/site-templates
- 一:XHTML MP的语法规则
- 我们知道,我们通常用电脑访问的网站的网页是用html构建的。类似的,现在WAP 2.0网站是用XHTML MP
- 构建,以供手持设备的访问,如手机、PDA等。
- XHTML MP是XHTML的子集,因此继承了它的语法。
- XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则:
- 1:标签必须正确闭合!
- <p>XHTML MP 教程 段落 1</p>
- <p>XHTML MP tutorial paragraph 2</p>
- <p>XHTML MP tutorial paragraph 3</p>
- 有些标签是不含内容的(开始标签和结束标签之间的东东,如上面的XHTML MP tutorial paragraph 1),
- 就必须用这种形式:Line break<br/>。请注意一定要加上 斜杠
- 2:标签和属性都必须是用小写
- 正确的写法:
- <p id="p1">XHTML MP tutorial paragraph 1</p>
- <p id="p2">XHTML MP tutorial paragraph 2</p>
- <p id="p3">XHTML MP tutorial paragraph 3</p>
- 3:属性的值必须放置在双引号内
- <p id="p1">XHTML MP tutorial paragraph 1</p>
- 4:不支持属性简写
- 在html中,如下写法是正确的:
- <input type="checkbox" checked />
- 而xhtml中必须这样写:
- <input type="checkbox" checked="checked" />
- 下面再举一个例子:
- <select multiple="multiple">
- <option>XHTML MP Tutorial Part 1</option>
- <option selected="selected">XHTML MP Tutorial Part 2</option>
- <option>XHTML MP Tutorial Part 3</option>
- </select>
- 5:标签的嵌套必须正确
- 不支持标签的重叠,所以下面的写法是错误的!
- <p><b>XHTML MP tutorial paragraph 1</p></b>
- 应该这样子写:
- <p><b>XHTML MP tutorial paragraph 1</b></p>
- 二:XHTML MP的 MIME类型 和 文件扩展名
- XHTML MP支持下面三种MIME类型
- 1. application/vnd.wap.xhtml+xml
- 2. application/xhtml+xml
- 3. text/html
- 第一种类型是一些wap浏览器所需要的(如某些诺基亚S60浏览器),以便正确显示XHTML MP文档。
- 第二种是XHTML系列文档的类型
- 第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档,而如果遇到上面的两种类型就会弹出一个对话框
- 让你保存这些文档。
- 动态选择MIME类型
- 比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型,那所有的XHTML MP文档就
- 都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
- 要实现这个就必须通过服务器端编程,获取客户端HTTP请求的Header值,这里面的值包含客户端可以处理的所有MIME类型。
- 如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml,如果支持其它的,就设置成其它的。
- 下面的例子是JSP的,但是你如果使用其它技术的话,原理是一样的,代码也是大同小异!
- <%
- String acceptHeader = request.getHeader("accept");
- if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
- response.setContentType("application/vnd.wap.xhtml+xml");
- else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
- response.setContentType("application/xhtml+xml");
- else
- response.setContentType("text/html");
- %>
- 这里的代码很简单,我就不多加解释了!
- 文件的扩展名
- 静态XHTML MP文档的典型扩展名包括:.xhtml、.html和.htm。当然,你也可以使用其它扩展名,只要你在
- WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术(如JSP、PHP、ASP、SSI等),你就必须
- 使用相应的扩展名,如PHP使用.php,SSI使用.shtml。
- 三:XHTML MP文档结构
- 第一个例子 一个典型的XHTML MP文档结构
- <?xml version="1.0"?>
- <!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>
- <title>XHTML MP Tutorial</title>
- </head>
- <body>
- <p>Hello world. Welcome to our XHTML MP tutorial.</p>
- </body>
- </html>
- 讲解:
- <?xml version="1.0"?>
- <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
- 前面的预声明不是XHTML MP元素的一部分,所以不必遵守XHTML MP的约定。
- 剩下的内容和普通的html没有什么不同了。
- 记住:XHTML MP必须包含<html>, <head>, <title>, 和 <body>元素。
- 四:XML声明和字符编码
- <?xml version="1.0" encoding="UTF-8"?>
- 所有的XHTML MP文档都是XML文档,因此开始都会有一个XML声明。这里也可以指定文档的字符编码。
- 如果文档的字符编码是UTF-8 or UTF-16的话,其实可以省略掉。
- 虽然这个XML声明是可以省略的,但是我们不建议这么做,因此这样可能导致某些索爱的WAP浏览器产生错误。
- 五:DOCTYPE声明
- 这个<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
- 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息,可供验证工具验证你写的XHTML MP文档的语法正确性。
- 这些验证工具集成在很多IDE中了。
- 六:各标记简析
- <html>是XHTML MP的根标记。目前,该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值,这个用来保证
- 严格遵守XHTML MP标准。但是即使缺失了这个标记,大部分浏览器还是能正常显示页面。
- <head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>,这几个标记的功能和在传统的html里面的功能是一样的!
- 这里不再废话了。
- 还有<body>标记也不重复解释了。
- <p>标记的text-align属性已经被取消了,你可以在css中定义实现这个功能,如:
- p {
- text-align: right
- }
- 七:XHTML MP 的 Metadata
- 先看下面的例子:
- <head>
- <title>XHTML MP Tutorial</title>
- <meta name="author" content="Andrew"/>
- </head>
- WAP浏览器会自动忽略你自定义的meta属性(它不会显示在你的页面中),如这里的name,这并不会对你的页面的界面有任何影响。
- 八:XHTML MP的缓存控制
- 这里的缓存就是客户端用来临时存储XHTML文档的空间,如果浏览器发现缓存里面有这个页面了而且没有过期,那它就
- 直接显示这个页面,而不需要再次联网下载,这样节省了时间。
- 当然,你可以禁止缓存,你可以这样做:
- <head>
- <title>XHTML MP Tutorial</title>
- <meta http-equiv="Cache-Control" content="no-cache"/>
- </head>
- 上面的也可以这样写:<meta http-equiv="Cache-Control" content="max-age=0"/>
- 如果你要设置缓存时间是300秒的话,可以这么做:
- <head>
- <title>XHTML MP Tutorial</title>
- <meta http-equiv="Cache-Control" content="max-age=300"/>
- </head>
- 还要注意的一点是,上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的,所以你设置了也未必能起到作用。
- 面对这种情况,更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。
- 九:XHTML MP的定时刷新
- <head>
- <title>XHTML MP Tutorial</title>
- <meta http-equiv="Cache-Control" content="no-cache"/>
- <meta http-equiv="refresh" content="15"/>
- </head>
- 上面的代码让页面每隔15秒刷新一次!
- 注意:必须包含这句:<meta http-equiv="Cache-Control" content="no-cache"/>,
- 如果没有的话,那可能刷新后只是看到缓存中的副本,并没有重新从服务器下载页面。
- 还有一个用法就是用来URL自动跳转,例子如下:
- <head>
- <title>XHTML MP Tutorial</title>
- <meta http-equiv="refresh" content="3;URL=http://blog.csdn.net/patriot074/"/>
- </head>
- 需要注意的是,不是所有浏览器都支持refresh,如:诺基亚 浏览器4.0和Ericsson T610 和 T68i
- 不过,阿佛使用的Windows Mobile手机是支持的,所以推荐使用。
- 随着智能手机的降价,上面的那些不支持的也很快要淘汰了吧。
- 十:注释
- 和html的一样啦:
- <!-- This is a comment in XHTML MP -->
- 十一:换行
- <BR/>, 例子:
- <body>
- <p>
- Line 1<br/>
- Line 2<br/><br/>
- Line 3
- </p>
- </body>
- 十二:<hr/>标记
- 这个标记会给你的页面添加一条水平线。注意:
- 这个标记不能在<p></p>标记之间使用!!!
- 例子:
- <body>
- <p>
- Table of Contents:<br/>
- </p>
- <hr/>
- <p>
- Part 1 XHTML MP Introduction<br/>
- Part 2 Development of Wireless Markup Languages<br/>
- Part 3 Advantages of XHTML MP<br/>
- Part 4 WML Features Lost in XHTML MP
- </p>
- </body>
- 十三:标题标记
- <h1>, <h2>, <h3>, <h4>, <h5>, 和 <h6>
- 浏览器将以不同的大小显示置于此标记中的文字,具体效果你可以测试下面的代码:
- <body>
- <h1>Level 1 Heading</h1>
- <h2>Level 2 Heading</h2>
- <h3>Level 3 Heading</h3>
- <h4>Level 4 Heading</h4>
- <h5>Level 5 Heading</h5>
- <h6>Level 6 Heading</h6>
- </body>
- 十四:文字样式
- 首先声明的是有些浏览器并不支持XHTML MP支持的标记。
- 例子:
- <body>
- <p>
- <b>Bold</b><br/>
- <i>Italic</i><br/>
- <b><i>Bold italic</i></b><br/>
- <small>Small</small><br/>
- <big>Big</big><br/>
- <em>Emphasis</em><br/>
- <strong>Strong</strong>
- </p>
- </body>
- 你还可以通过WAP CSS进行更精确的控制,比如把文字大小设置为12pt。
- 更多关于WAP CSS的信息请访问:(下面将不再重复声明)
- http://www.developershome.com/wap/wcss/
- 十五:预格式文本
- 在XHTML MP中,段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子:
- <body>
- <p> Hello, welcome
- to
- our
- XHTML MP tutorial. </p>
- </body>
- 为了能够保持你希望的格式,可以使用<pre>标签:
- <body>
- <pre> Hello, welcome
- to
- our
- XHTML MP tutorial. </pre>
- </body>
- 这样最后显示的格式就和上面代码中排列的一样了。
- 十六:列表标签
- 使用<ul>标签来建立无序列表,每个列表项前将显示一个小圆点。
- <li>标签用来包围每个列表项。
- 请看下面的例子:
- <body>
- <p>Table of Contents:</p>
- <ul>
- <li>Part 1 XHTML MP Introduction</li>
- <li>Part 2 Development of Wireless Markup Languages</li>
- <li>Part 3 Advantages of XHTML MP</li>
- <li>Part 4 WML Features Lost in XHTML MP</li>
- </ul>
- </body>
- 使用<ol>标签来建立有序列表,请看下面的例子:
- <body>
- <p>Table of Contents:</p>
- <ol>
- <li>XHTML MP Introduction</li>
- <li>Development of Wireless Markup Languages</li>
- <li>Advantages of XHTML MP</li>
- <li>WML Features Lost in XHTML MP</li>
- </ol>
- </body>
- 其中,在<ol>标签中可以设置start属性的值来决定列表序号的起始值,例如:
- <ol start="4">
- 通过WAP CSS你可以对列表的外观进行更精确的控制。例如,可以修改显示序号的方式,
来自 http://www.cnblogs.com/appleseed/archive/2008/12/29/1364393.html