當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

WAP网站设计之xhtml mp

發(fā)布時(shí)間：2023/12/29 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 WAP网站设计之xhtml mp 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

WAP網(wǎng)站設(shè)計(jì)之xhtml mp
作者:99770動(dòng)漫網(wǎng)　來(lái)源:hi.baidu.com　【大中小】　瀏覽:1971　添加日期：2010-05-11　我要評(píng)論(1)　??? 一：XHTML MP的語(yǔ)法規(guī)則
我們知道，我們通常用電腦訪問(wèn)的網(wǎng)站的網(wǎng)頁(yè)是用html構(gòu)建的。類(lèi)似的，現(xiàn)在WAP 2.0網(wǎng)站是用XHTML MP
構(gòu)建，以供手持設(shè)備的訪問(wèn)，如手機(jī)、PDA等。
XHTML MP是XHTML的子集，因此繼承了它的語(yǔ)法。

XHTML是更嚴(yán)格和簡(jiǎn)潔的HTML版本。現(xiàn)在來(lái)看看XHTML MP的語(yǔ)法規(guī)則：

1：標(biāo)簽必須正確閉合！
<p>XHTML MP 教程段落 1</p>
<p>XHTML MP tutorial paragraph 2</p>
<p>XHTML MP tutorial paragraph 3</p>
有些標(biāo)簽是不含內(nèi)容的（開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的東東，如上面的XHTML MP tutorial paragraph 1），
就必須用這種形式：Line break<br/>。請(qǐng)注意一定要加上斜杠

2：標(biāo)簽和屬性都必須是用小寫(xiě)
正確的寫(xiě)法：
<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：屬性的值必須放置在雙引號(hào)內(nèi)
<p id="p1">XHTML MP tutorial paragraph 1</p>

4：不支持屬性簡(jiǎn)寫(xiě)
在html中，如下寫(xiě)法是正確的：
<input type="checkbox" checked />

而xhtml中必須這樣寫(xiě)：
<input type="checkbox" checked="checked" />

下面再舉一個(gè)例子：
<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：標(biāo)簽的嵌套必須正確
不支持標(biāo)簽的重疊，所以下面的寫(xiě)法是錯(cuò)誤的！
<p><b>XHTML MP tutorial paragraph 1</p></b>
應(yīng)該這樣子寫(xiě)：
<p><b>XHTML MP tutorial paragraph 1</b></p>
二：XHTML MP的 MIME類(lèi)型和文件擴(kuò)展名
XHTML MP支持下面三種MIME類(lèi)型
1. application/vnd.wap.xhtml+xml
2. application/xhtml+xml
3. text/html
第一種類(lèi)型是一些wap瀏覽器所需要的（如某些諾基亞S60瀏覽器），以便正確顯示XHTML MP文檔。
第二種是XHTML系列文檔的類(lèi)型
第三種是HTML文檔的類(lèi)型。這樣用IE6就可以正常瀏覽這些文檔，而如果遇到上面的兩種類(lèi)型就會(huì)彈出一個(gè)對(duì)話框
讓你保存這些文檔。
動(dòng)態(tài)選擇MIME類(lèi)型
比如服務(wù)器端判斷某個(gè)客戶(hù)端請(qǐng)求可以處理application/vnd.wap.xhtml+xml MIME類(lèi)型，那所有的XHTML MP文檔就
都使用application/vnd.wap.xhtml+xml MIME類(lèi)型發(fā)送給客戶(hù)端。
要實(shí)現(xiàn)這個(gè)就必須通過(guò)服務(wù)器端編程，獲取客戶(hù)端HTTP請(qǐng)求的Header值，這里面的值包含客戶(hù)端可以處理的所有MIME類(lèi)型。
如果支持就設(shè)置XHTML MP的MIME類(lèi)型為application/vnd.wap.xhtml+xml，如果支持其它的，就設(shè)置成其它的。
下面的例子是JSP的，但是你如果使用其它技術(shù)的話，原理是一樣的，代碼也是大同小異！
<%
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");
%>
這里的代碼很簡(jiǎn)單，我就不多加解釋了！
文件的擴(kuò)展名
靜態(tài)XHTML MP文檔的典型擴(kuò)展名包括：.xhtml、.html和.htm。當(dāng)然，你也可以使用其它擴(kuò)展名，只要你在
WAP 服務(wù)配置文件里面設(shè)置清楚就OK了。如果你要使用服務(wù)器端技術(shù)（如JSP、PHP、ASP、SSI等），你就必須
使用相應(yīng)的擴(kuò)展名，如PHP使用.php，SSI使用.shtml。
三：XHTML MP文檔結(jié)構(gòu)
第一個(gè)例子一個(gè)典型的ＸＨＴＭＬ　ＭＰ文檔結(jié)構(gòu)
<?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">
前面的預(yù)聲明不是ＸＨＴＭＬ　ＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬ　ＭＰ的約定。
剩下的內(nèi)容和普通的ｈｔｍｌ沒(méi)有什么不同了。
記住：ＸＨＴＭＬ　ＭＰ必須包含<html>, <head>, <title>, 和 <body>元素。
四：XML聲明和字符編碼
<?xml version="1.0" encoding="UTF-8"?>
所有的XHTML MP文檔都是XML文檔，因此開(kāi)始都會(huì)有一個(gè)XML聲明。這里也可以指定文檔的字符編碼。
如果文檔的字符編碼是UTF-8 or UTF-16的話，其實(shí)可以省略掉。
雖然這個(gè)XML聲明是可以省略的，但是我們不建議這么做，因此這樣可能導(dǎo)致某些索愛(ài)的WAP瀏覽器產(chǎn)生錯(cuò)誤。
五：DOCTYPE聲明
這個(gè)<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
聲明是必須的。這個(gè)聲明規(guī)定了DTD名稱(chēng)和URL。這個(gè)DTD包含標(biāo)記語(yǔ)言的語(yǔ)法信息，可供驗(yàn)證工具驗(yàn)證你寫(xiě)的XHTML MP文檔的語(yǔ)法正確性。
這些驗(yàn)證工具集成在很多IDE中了。
六：各標(biāo)記簡(jiǎn)析
<html>是XHTML MP的根標(biāo)記。目前，該標(biāo)記的xmlns屬性只能是http://www.w3.org/1999/xhtml這個(gè)值，這個(gè)用來(lái)保證
嚴(yán)格遵守XHTML MP標(biāo)準(zhǔn)。但是即使缺失了這個(gè)標(biāo)記，大部分瀏覽器還是能正常顯示頁(yè)面。
<head>標(biāo)記用來(lái)存放關(guān)于文檔本身的信息。比如<title>和<link>,還有<meta>，這幾個(gè)標(biāo)記的功能和在傳統(tǒng)的html里面的功能是一樣的！
這里不再?gòu)U話了。
還有<body>標(biāo)記也不重復(fù)解釋了。
<p>標(biāo)記的text-align屬性已經(jīng)被取消了，你可以在css中定義實(shí)現(xiàn)這個(gè)功能，如：
p {
text-align: right
}
七：XHTML MP 的 Metadata
先看下面的例子：
<head>
<title>XHTML MP Tutorial</title>
<meta name="author" content="Andrew"/>
</head>
WAP瀏覽器會(huì)自動(dòng)忽略你自定義的meta屬性（它不會(huì)顯示在你的頁(yè)面中），如這里的name，這并不會(huì)對(duì)你的頁(yè)面的界面有任何影響。
八：XHTML MP的緩存控制
這里的緩存就是客戶(hù)端用來(lái)臨時(shí)存儲(chǔ)XHTML文檔的空間，如果瀏覽器發(fā)現(xiàn)緩存里面有這個(gè)頁(yè)面了而且沒(méi)有過(guò)期，那它就
直接顯示這個(gè)頁(yè)面，而不需要再次聯(lián)網(wǎng)下載，這樣節(jié)省了時(shí)間。
當(dāng)然，你可以禁止緩存，你可以這樣做：
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="no-cache"/>
</head>
上面的也可以這樣寫(xiě)：<meta http-equiv="Cache-Control" content="max-age=0"/>
如果你要設(shè)置緩存時(shí)間是300秒的話，可以這么做：
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="max-age=300"/>
</head>
還要注意的一點(diǎn)是，上面的設(shè)置和所用的設(shè)備是有關(guān)系的。有些wap瀏覽器是沒(méi)有緩存的，所以你設(shè)置了也未必能起到作用。
面對(duì)這種情況，更好的方法是通過(guò)服務(wù)器端編程技術(shù)設(shè)置HTTP header和HTTP response。
九：XHTML MP的定時(shí)刷新
<head>
<title>XHTML MP Tutorial</title>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="refresh" content="15"/>
</head>
上面的代碼讓頁(yè)面每隔15秒刷新一次！
注意：必須包含這句：<meta http-equiv="Cache-Control" content="no-cache"/>，
如果沒(méi)有的話，那可能刷新后只是看到緩存中的副本，并沒(méi)有重新從服務(wù)器下載頁(yè)面。

還有一個(gè)用法就是用來(lái)URL自動(dòng)跳轉(zhuǎn)，例子如下：
<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
不過(guò)，阿佛使用的Windows Mobile手機(jī)是支持的，所以推薦使用。
隨著智能手機(jī)的降價(jià)，上面的那些不支持的也很快要淘汰了吧。
十：注釋
和html的一樣啦：

十一：換行
<BR/>, 例子：
<body>
<p>
Line 1<br/>
Line 2<br/><br/>
Line 3
</p>
</body>
十二：<hr/>標(biāo)記
這個(gè)標(biāo)記會(huì)給你的頁(yè)面添加一條水平線。注意：
這個(gè)標(biāo)記不能在<p></p>標(biāo)記之間使用！！！
例子：
<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>
十三：標(biāo)題標(biāo)記
<h1>, <h2>, <h3>, <h4>, <h5>, 和 <h6>
瀏覽器將以不同的大小顯示置于此標(biāo)記中的文字，具體效果你可以測(cè)試下面的代碼：
<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支持的標(biāo)記。
例子：
<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>
你還可以通過(guò)WAP CSS進(jìn)行更精確的控制，比如把文字大小設(shè)置為12pt。
更多關(guān)于WAP CSS的信息請(qǐng)?jiān)L問(wèn)：（下面將不再重復(fù)聲明）
http://www.developershome.com/wap/wcss/
十五：預(yù)格式文本
在XHTML MP中，段落中的多個(gè)空格在手持設(shè)備中顯示時(shí)只顯示為一個(gè)空格。請(qǐng)看下面的例子：
<body>
<p> Hello, welcome
to
our
XHTML MP tutorial. </p>
</body>
為了能夠保持你希望的格式，可以使用<pre>標(biāo)簽：
<body>
<pre> Hello, welcome
to
our
XHTML MP tutorial. </pre>
</body>
這樣最后顯示的格式就和上面代碼中排列的一樣了。
十六：列表標(biāo)簽
使用<ul>標(biāo)簽來(lái)建立無(wú)序列表，每個(gè)列表項(xiàng)前將顯示一個(gè)小圓點(diǎn)。
<li>標(biāo)簽用來(lái)包圍每個(gè)列表項(xiàng)。
請(qǐng)看下面的例子：
<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>標(biāo)簽來(lái)建立有序列表，請(qǐng)看下面的例子：
<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>標(biāo)簽中可以設(shè)置start屬性的值來(lái)決定列表序號(hào)的起始值，例如：
<ol start="4">
通過(guò)WAP CSS你可以對(duì)列表的外觀進(jìn)行更精確的控制。例如，可以修改顯示序號(hào)的方式，
比如使用i ,ii ,iii來(lái)替代1，2，3。
十七：顯示圖片
和HTML中一樣，使用<img>標(biāo)簽來(lái)顯示圖片。height和width屬性用來(lái)指定圖片的高和寬（像素）。
WAP2.0支持常用的GIF、JPG、PNG圖像格式，當(dāng)然這還跟用戶(hù)所有設(shè)備有關(guān)，一些設(shè)備只能顯示
其中的一部分格式。要想知道客戶(hù)端支持的圖片格式，很容易，和先前講過(guò)的一樣，可以通過(guò)檢查
HTTP Header，請(qǐng)看下面的代碼：
<?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>Image in XHTML MP</title>
</head>

<body>
<p>
<img src="monkey.gif" alt="coolMonkey" height="50" width="50" /><br/>
Hello, welcome to our XHTML MP tutorial.
</p>
</body>
</html>
其中alt屬性在圖片無(wú)法顯示的時(shí)候會(huì)顯示其設(shè)置的文本值。
十八：大圖片問(wèn)題
很多WAP瀏覽器沒(méi)有水平滾動(dòng)條（我的WM IE也是，但是它會(huì)自動(dòng)縮放圖片到合適尺寸）。因此如果圖片超過(guò)設(shè)備的屏幕尺寸，
很多瀏覽器就只能顯示局部圖片，這樣從用戶(hù)看來(lái)很糟糕！還有注意的就是height和width屬性設(shè)置只是影響外觀，加載圖片的時(shí)間
和圖片大小有關(guān)，與你設(shè)置的height和width的值無(wú)關(guān)。使用大圖片將讓你的訪問(wèn)用戶(hù)掏更多錢(qián)（并花費(fèi)更多的時(shí)間）去支援移動(dòng)，因?yàn)榇髨D片帶來(lái)大流量，
移動(dòng)的瘋狂收費(fèi)已經(jīng)嚇住了不少潛在的客戶(hù)（你不希望你的網(wǎng)站嚇走用戶(hù)吧）。阿佛的哥哥就是個(gè)例子，移動(dòng)的1元包月5M套餐，
而他超過(guò)了流量（不少普通用戶(hù)根本沒(méi)有流量的概念），移動(dòng)收了幾十元，從此就再也不敢用手機(jī)GPRS上網(wǎng)了。
因此從優(yōu)化XHTML MP頁(yè)面圖像的角度來(lái)看，控制圖片的大小有下面幾招：
1：使用PS等圖片處理軟件減小圖片的尺寸，而不是傳送大圖片給無(wú)線設(shè)備，然后通過(guò)height和width來(lái)設(shè)定顯示尺寸。
2：如果使用的GIF格式的圖片，那么請(qǐng)使用小型顏色調(diào)色板，使用小型調(diào)色板會(huì)降低圖片的質(zhì)量，不過(guò)你可以在二者
之間做一個(gè)較好的平衡。
3：如果圖片是JPG格式，你應(yīng)該用合適壓縮比率來(lái)壓縮。這個(gè)平衡（圖片尺寸和顯示質(zhì)量）也要你來(lái)控制。
4：期待移動(dòng)降低上網(wǎng)資費(fèi)并提高龜速網(wǎng)絡(luò)（這僅僅是期待）。
更好的提高你的手機(jī)網(wǎng)站性能方式是先處理頁(yè)面的文檔請(qǐng)求，再接著處理圖片的顯示。但是如果構(gòu)建這樣的網(wǎng)站已經(jīng)超過(guò)了本文要
描述的范圍，如果你感興趣的話請(qǐng)自行搜索關(guān)鍵字：Multipart messages
十九：表格
創(chuàng)建表格所使用的標(biāo)簽和HTML中使用的沒(méi)有區(qū)別。所以請(qǐng)直接看下面的例子：
<body>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>

<tr>
<td colspan="2">Cell G</td>
</tr>
</table>
</body>
這里顯示出來(lái)的效果是不帶邊框的表格。如果你要顯示，可以使用WAP CSS來(lái)控制。
在<head>標(biāo)簽里面加入如下代碼：
<style>
td {
border: thin solid black
}
</style>
二十：超鏈接
超鏈接是用來(lái)導(dǎo)航的，你可以點(diǎn)擊一個(gè)連接然后跳轉(zhuǎn)到其他XHTML MP頁(yè)面。這個(gè)html中的一樣，請(qǐng)看下面的例子：
<a href="http://blog.csdn.net/patriot074/">阿佛的博客首頁(yè)</a>
下面再講講當(dāng)前頁(yè)面的定位（滾動(dòng)到當(dāng)前頁(yè)面的指定位置）：
請(qǐng)看下面的例子：
<body>
<p><a id="top">Table of Contents:</a></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>
<li>如果頁(yè)面不夠長(zhǎng)，無(wú)法顯示效果的話就再多幾個(gè)列表項(xiàng)</li>
<li>如果頁(yè)面不夠長(zhǎng)，無(wú)法顯示效果的話就再多幾個(gè)列表項(xiàng)</li>
<li>如果頁(yè)面不夠長(zhǎng)，無(wú)法顯示效果的話就再多幾個(gè)列表項(xiàng)</li>
<li>如果頁(yè)面不夠長(zhǎng)，無(wú)法顯示效果的話就再多幾個(gè)列表項(xiàng)</li>
</ul>
<p><a href="#top">Back to top</a></p>
</body>
從上面的例子可以看出，要定位到指定位置，可以通過(guò)<a href="#top">Back to top</a>
來(lái)實(shí)現(xiàn)，#號(hào)加上要跳轉(zhuǎn)到位置的 <a>標(biāo)記的id值就可以了。
一些老的機(jī)器和瀏覽器不支持這個(gè)，如索愛(ài)的T610 和 T68i（02年的，應(yīng)該沒(méi)什么人用了吧）
二十一：使用更短的URL
我們知道手機(jī)輸入比用電腦鍵盤(pán)慢多了。因此你應(yīng)該讓你的網(wǎng)站的url盡可能的短，看看下面的幾種方法：
1：好好利用子域名。使用http://wap.somedomain.com/來(lái)代替http://www.somedomain.com/wap/。還可以使用
更短的域名： http://somedomain.com/ 。
2：讓你的web站點(diǎn)和wap站點(diǎn)使用相同的URL。
使用"http://www.somedomain.com/" 或者 http://somedomain.com/來(lái)代替http://www.somedomain.com/wap/"作為
WAP站點(diǎn)的域名。如果一個(gè)HTTP 請(qǐng)求來(lái)自手機(jī)，那么將把WAP版本的站點(diǎn)發(fā)送給這個(gè)請(qǐng)求用戶(hù)，否則將返回web版本的站點(diǎn)。
3：設(shè)置站點(diǎn)的默認(rèn)文檔。這樣就可以通過(guò)http://wap.somedomain.com/來(lái)訪問(wèn)http://wap.somedomain.com/index.xhtml頁(yè)面。
二十二：圖形化鏈接
這里的技巧和HTML的一樣。你可以在<a>標(biāo)簽中放一個(gè)<img>標(biāo)簽，這樣就可以在你點(diǎn)擊圖片的時(shí)候進(jìn)行頁(yè)面跳轉(zhuǎn)了。
<body>
<p>
This is page 1.<br/>
<a href="linksEg5.xhtml"><img src="to2.gif" alt="Go to linksEg5.xhtml"/></a>
</p>
</body>
二十三：設(shè)置超鏈接的訪問(wèn)快捷鍵
<body>
<p>
This is page 1.<br/>
<a accesskey="1" href="linksEg7.xhtml"><img src="to2.gif" alt="Go to linksEg7.xhtml"/></a>
</p>
</body>
屬性accesskey用來(lái)設(shè)置快捷鍵，當(dāng)你按下這個(gè)鍵的時(shí)候就相當(dāng)于點(diǎn)擊了這個(gè)超鏈接（而在PC上瀏覽器僅僅是讓這個(gè)超鏈接獲得焦點(diǎn)）。
accesskey屬性的可用值是：*, #, 0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9。
二十四：下拉選擇框
這個(gè)也和HTML中一樣，所以直接上代碼：
<body>
<form method="get" action="xhtml_mp_tutorial_proc.asp">
<p>
<select name="selectionList">
<option value="tutorial_A">XHTML MP Tutorial Part A</option>
<option value="tutorial_B">XHTML MP Tutorial Part B</option>
<option value="tutorial_C">XHTML MP Tutorial Part C</option>
</select>
</p>
</form>
</body>
默認(rèn)選擇的代碼是：
<option value="tutorial_B" selected="selected">XHTML MP Tutorial Part B</option>
支持多選的代碼是：（在WM IE中無(wú)效）
<select name="selectionList" multiple="multiple">
二十五：Input元素
和HTML一樣，XHTML MP也擁有各種獲取用戶(hù)輸入的input元素。
input元素必須放置在<form>標(biāo)記之間。
<input>標(biāo)記的 type 屬性定義了input元素的類(lèi)型。name屬性定義了input元素的名稱(chēng)，可供服務(wù)器端檢索。
二十六：文本域
文本域用來(lái)獲取字母和數(shù)字?jǐn)?shù)據(jù)。請(qǐng)看下面的例子：
<input type="text" name="name_for_this_element"/>
type的默認(rèn)屬性就是text，所以可以忽略。
你可以使用 maxlength屬性來(lái)控制文本域可輸入的字符數(shù)，例如：
<input type="text" name="myTextField" maxlength="16"/>
你還可以使用value屬性來(lái)設(shè)置文本域的默認(rèn)值，例如：
<input type="text" name="myTextField" maxlength="16" value="Jack"/>
XHTML MP不再支持<input>標(biāo)簽的format屬性，你可以使用WAP CSS的-wap-input-format來(lái)控制。
例如，限制輸入格式為最多10個(gè)數(shù)字：
input {
-wap-input-format: "10N"
}
下面再來(lái)介紹一下密碼域：
在密碼域中所有的字符通過(guò)星號(hào)來(lái)顯示，請(qǐng)看例子：
<input type="password" name="name_for_this_element"/>
二十七：復(fù)選框和單選按鈕
復(fù)選框和HTML中也類(lèi)似，例如：
<input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1"/>
<input type="checkbox" name="xhtml_mp_tutorial_chapter" value="2"/>
<input type="checkbox" name="xhtml_mp_tutorial_chapter" value="3"/>
value的值將被發(fā)送服務(wù)器端（當(dāng)有選中該復(fù)選框）。
你也可以通過(guò)checked屬性設(shè)置復(fù)選框是否選中，代碼如下：
<input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1" checked="checked"/>
下面的標(biāo)記代碼創(chuàng)建一個(gè)單選按鈕：
<input type="radio" name="name_for_this_element"/>
和復(fù)選框按鈕類(lèi)似，擁有相同name屬性值的單選按鈕將被分在同一個(gè)組，例如：
<input type="radio" name="xhtml_mp_tutorial_chapter" value="1"/>
<input type="radio" name="xhtml_mp_tutorial_chapter" value="2"/>
<input type="radio" name="xhtml_mp_tutorial_chapter" value="3"/>
name和value對(duì)是相關(guān)聯(lián)的，這個(gè)將在form提交后用來(lái)后臺(tái)取值。和復(fù)選框一樣，checked屬性用來(lái)指定是否選中該項(xiàng)。
二十八：隱藏字段
隱藏字段將不會(huì)在頁(yè)面中顯示。它用來(lái)存儲(chǔ)狀態(tài)信息的。例如：
<input type="hidden" name="temp_id" value="123456"/>
value屬性會(huì)被回發(fā)到服務(wù)器端。
二十九：提交窗體數(shù)據(jù)到服務(wù)器端
在前文中，我們講到了很多input元素，它們可以獲取用戶(hù)輸入的數(shù)據(jù)。那么服務(wù)器端該如何獲取這些輸入的數(shù)據(jù)呢？
你需要把這些標(biāo)簽和提交按鈕置于<form></form>標(biāo)簽中。例如：
<?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>
<h1>Registration Form</h1>
<form method="get" action="processing.asp">
<p>
Username:<br/>
<input name="username"/><br/>

Password:<br/>
<input type="password" name="password"/><br/>

Gender:<br/>
<input type="radio" name="gender" value="m"/>Male
<input type="radio" name="gender" value="f"/>Female<br/>

Country:<br/>
<select name="country">
<option value="ca">Canada</option>
<option value="cn">China</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="in">India</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="kr">Korea</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
</select><br/>

Which part of our XHTML MP tutorial do you like?<br/>
<input type="checkbox" name="tutorial_part" value="1"/>Part 1
<input type="checkbox" name="tutorial_part" value="2"/>Part 2
<input type="checkbox" name="tutorial_part" value="3"/>Part 3
<input type="checkbox" name="tutorial_part" value="4"/>Part 4

<hr/>

<p>
<input type="submit"/>
<input type="reset"/>
</p>
</form>
</body>
</html>
三十：Form元素
<form>標(biāo)記是form控件的容器。下面繼續(xù)介紹<form>標(biāo)記的兩個(gè)方法POST和GET。
先介紹get方法：
<form method="get" action="processing.asp">
使用get方法，數(shù)據(jù)將追加到URL中發(fā)送。由于URL攜帶的字符量是有限制的，這也成了get方法的一大缺點(diǎn)。
還有一個(gè)問(wèn)題是為了避免編碼問(wèn)題（當(dāng)有非ASCII字符時(shí)），你應(yīng)該使用POST方法替代get方法。而使用POST方法
數(shù)據(jù)時(shí)，數(shù)據(jù)將插入到請(qǐng)求到一起發(fā)送。
接下來(lái)再講解一下action屬性，該屬性指定了哪個(gè)頁(yè)面用來(lái)處理提交的數(shù)據(jù)，你可以在該頁(yè)面編寫(xiě)后臺(tái)處理代碼。
三十一：提交按鈕和重置按鈕
在XHTML MP中，而每個(gè)form都應(yīng)該包含一個(gè)submit按鈕。當(dāng)點(diǎn)擊這個(gè)按鈕后，窗體數(shù)據(jù)就會(huì)被提交到服務(wù)器進(jìn)行處理。
下面來(lái)看看這個(gè)按鈕：
<input type="submit" value="OK"/>
value屬性用來(lái)指定這個(gè)按鈕的標(biāo)題。如果沒(méi)有設(shè)置這個(gè)屬性的話，那么將顯示默認(rèn)的 submit （如果是中文瀏覽器，會(huì)顯示提交）
接著再來(lái)介紹一下重置按鈕。當(dāng)按下重置按鈕時(shí)，form中包含的控件值將回到初始狀態(tài)。例如：
<input type="reset"/>
如果沒(méi)有設(shè)置重置按鈕的value值，那么將默認(rèn)顯示reset或者重置。
三十二：服務(wù)器端
你可以使用你熟悉的服務(wù)器端技術(shù)來(lái)處理這些<input>和<select>屬性。流行的技術(shù)包括ASP/ASP.NET 、Java Servlet/JSP 、Perl和PHP。
下面提供一個(gè)簡(jiǎn)單的獲取客戶(hù)端傳過(guò)來(lái)的值的樣例，關(guān)于ASP的。在現(xiàn)實(shí)中服務(wù)器端要做更復(fù)雜的處理。例如，把窗體發(fā)送過(guò)來(lái)的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中。
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<% Response.ContentType = "application/vnd.wap.xhtml+xml" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML MP Tutorial</title>
</head>

<body>
<p>
Data received at the server:<br/>
Username: <% =Request.QueryString("username") %><br/>
Password: <% =Request.QueryString("password") %><br/>
Gender: <% =Request.QueryString("gender") %><br/>
Country: <% =Request.QueryString("country") %><br/>
Which part of our XHTML MP tutorial do you like?
<%
for i=1 to Request.QueryString("tutorial_part").Count
Response.Write(Request.QueryString("tutorial_part")(i) & " ")
next
%>
<br/>
temp_id: <% =Request.QueryString("temp_id") %>
</p>
</body>
</html>

（如果您覺(jué)得本站不錯(cuò)，請(qǐng)告訴身邊的朋友，或轉(zhuǎn)載到論壇、百度知道、貼吧等，記得帶網(wǎng)址喲，不勝感激！）
〖技術(shù)文檔〗Tags: wap xhtml mp wap網(wǎng)站
文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/Tech/878.shtml)
文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/Tech/878.shtml)

總結(jié)

以上是生活随笔為你收集整理的WAP网站设计之xhtml mp的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：可以修改GPS的照片图像编辑器——Pho
下一篇： Advances in Graph Ne