WAP2.0,XHTMLMPandWCSS,懌飛,1,一、WAP的常識（省略）,2,二、XHTMLMP,3,（一）XHTMLMP介紹,XHTMLMP（eXtensibleHyperTextMarkupLanguageMobileProfile）WAP2.0與WCSS（WAPCSS/WAPCascadingStyleSheet）配套使用是XHTML的子集XHTMLBasic(XHTML子集)+另外的一些XHTML的元素和屬性WAP瀏覽器與互聯網之間以前WAP網站（WMLandWMLScript）更多的展示表現（presentationcontrol）,4,（一）XHTMLMP介紹,優勢：開發的站點可以在WEB和無線上都可以使用，也可以用任何Web瀏覽器訪問WAP2.0應用向后兼容：XHTMLMP/WCSS和WML/WMLScript,5,（二）無線標記語言發展,HTML：WAP發展的首要任務移動電話，PDA等訪問互聯網。WAPstandard(WMLandXHTMLMobileProfile)類似HTMLWML（WirelessMarkupLanguage）1.x：WAP1.x規范中規定的標記語言，無線設備的第一個標記語言。Openwave、Nokia和Ericsson很早都有自己的標記語言。WML規范是WAPForum（97）創建的。而現在，很多的WAP站點依然使用的是WML。XHTML：結構比HTML更簡潔和嚴格。這對于無線設備（例：移動電話）很重要，對于有限的處理能力。XHTMLBasic:是XHTML的一個簡化版本。為處理能力和性能有限的設備設計的（移動電話，PDA，呼機等）,6,（二）無線標記語言發展,但是不包含XHTML特性。例如CSS，frames和Scripting。是由W3C定義的。XHTMLMP:在WAP2.0說明中指定的官方標記語言。WAPForum基于XHTMLBasic創造，并從XHTML的完整版本中增加了一些元素和屬性。例如,和。XHTMLMP支持一個簡單的CSS版本，即WCSS/WAPCSS。WCSS/WAPCSS:CSS2的一個簡化版本，增加了WAP特有的擴展。可以很簡單的改變XHTMLMP頁面的布局和風格。WML2.0:WAP站點開發者不需要顧慮WML2.0。WML2.0向后兼容，并且對于WAP站點開發者還不可用。,7,（三）XHTMLMP的優點,最大優點：開發者可用相同的技術開發適用于WEB和WAP的站點。有HTML、XHTML、CSS基礎即可入門。同樣的開發工具可以用來開發WEB和WAP站點。開發過程中一般的WEB瀏覽器可以瀏覽你的WAP站點。HTML/XHTML頁面可以通過較小的修改成XHTMLMP，甚至不用修改（注意：布局是否適應小屏幕，文件大小是否出最大）。支持WCSS。移動設備有很多不同的特征，比如屏幕大小，只需寫一次結構，使用不同的WCSS文件即可。更多的表現控制。,8,（四）不支持的WML特性,XHTMLMP不支持和標簽。在XML中，一個文件可以包含一個或更多的card，所有的card組合成一個deck，并在無線設備中一同被下載。WAP瀏覽器每次只顯示一個card，可以通過錨鏈接訪問其他的card。通過這些，減少了服務器的往返的訪問。對性能的提高是有意義的。在XHTMLMP中要實現類似的特性，可以使用multipartmessages（多個文檔放到一個請求）另外一個方式是使用目標錨（一個頁面的不同位置）。XHTMLMP不支持標簽元素10秒后告訴WAP瀏覽器URL。注意點：WMLtimer僅當進入card，而HTMLrefreshtimer當進入XHTMLMP頁面。,9,（四）不支持的WML特性,3.XHTMLMP不支持事件。WML支持四個事件（ontimer,onenterbackward,onenterforward,onpick），除ontimer其他事件無法模擬。如要使用，需使用WML1.X。4.XHTMLMP不支持變量。在XML，可以聲明變量，并賦值，擁有全局作用域。可以在任何的deck和card中使用。XHMLMP放在服務器端處理（必須發送并保存）。5.XHTMLMP不支持客戶端腳本。在XML，你可以使用客戶端腳本（WMLScript）。JavaScript的簡化版，常用來驗證數據。放在服務器短處理。將來的版本將會支持客戶端腳本（ECMAScriptMP）,支持所有的WMLScript功能。,10,（四）不支持的WML特性,6.XHTMLMP不支持可編程序軟鍵（ProgrammableSoftKeys）。WML的一個最大特征。通過標簽使用。在XHMLMP中可以使用accesskey屬性。錨鏈接和提交按鈕支持這個屬性：XHTMLMPTutorialPart1標簽。在XML，用來在一些文字下添加下劃線。可以用WCSS中的text-decoration屬性。8.XHTMLMP不支持Input框的format屬性。在XML，可以定義類型和字數限制。可以使用WCSS中的-wap-input-format屬性，語法一致。比如限制5個數字字符：input-wap-input-format:”5N”,11,（四）不支持的WML特性,9.XHTMLMP不支持錨鏈接傳輸數據。姓名：提交姓名：,12,（五）語法規則,標簽必須完全閉合。標簽和屬性必須小寫。屬性值必須包含在引號標記內。不允許無屬性值存在。標簽必須完全嵌套。,13,（六）MIME類型和文件擴展名,MIME類型：application/vnd.wap.xhtml+xml、application/xhtml+xml、text/html。動態生成MIME類型。獲得HTTP請求中的acceptheader信息。文件擴展名：.xhtml、.html、.htm,14,（七）文檔結構,必須包含,和元素。HelloworldHelloworld.W.,15,（七）文檔結構,XML聲明和字符編碼：UTF-8/16編碼可省略。XML聲明也不是必須的，但如果忽略在許多WAP瀏覽器中出錯。必須有DOCTYPE聲明。在XML聲明和元素之間。、元素，align屬性已經去除，可以通過WAPCSS的text-align屬性來設置。,16,（八）通用的元數據,使用標簽，包含在內WAP瀏覽器如果不理解則忽略。比如添加作者：CacheControl：標簽的一個應用是控制XHTMLMP文件在Cache中的存在周期：注意點：與設備相關。一些使用不相的方法，一些沒有Cache機制。還有一些不支持但識別Cache-Control:no-cache的HTTP頭。也可應用于圖片的緩存。,17,（八）通用的元數據,周期性刷新。必須配合使用。不是所有瀏覽器都支持。,18,（九）常用標簽介紹,注釋：，和HTML和WML1.X相同。換行：，和HTML和WML1.X相同。水平線：。不能包含在標簽之內。標題：-（不同的大小和樣式），有些設備看起來一樣的。,19,（九）常用標簽介紹,字體樣式：XML可以使用標簽來改變字體樣式（、等）。但一些瀏覽器只支持其中的部分，不支持的忽略，不會出錯。WCSS控制字體格式。與格式化文本：在XHTMLMP中，標簽間空白不顯示，此外，段落中2個或更多的空白只顯示一個，如果想保持文字的格式，可使用。列表：、。對于元素，可以用屬性start指定數字開始的序列。還可以用WCSS來做更精確的控制。顯示圖片：標簽用來顯示圖片。和HTML一樣。如果文件沒發現或者圖片格式不支持，顯示alt屬性文本。Height和width屬性來指定圖片顯示區域的高度和寬度,20,（九）常用標簽介紹,除了老的WBMP圖片格式，WAP2.0還支持WEB上的圖片格式（gif,jpg和PNG），但WAP2.0無線設備支持上面圖片格式的某些。GPRS-gif,CDMA-png。可以通過acceptHTTPheader判斷設置。關于大圖片的發布：很多WAP瀏覽器都沒有水平滾動功能。如果寬度大于顯示屏，很多的WAP瀏覽器會裁切圖片。圖片的按比例縮小不能幫助提升性能。大圖片還會造成訪問站點用戶的費用。優化圖片：1、用制圖軟件按比例縮小圖片；2、如果是gif圖片，減少顏色，但降低了圖片質量，權衡。3、如果是jpg圖片，保存一定的壓縮比例，依然是權衡。使用multipartmessages，先下載的XHTMLMP文檔，,21,（九）常用標簽介紹,后請求圖片，產生多個請求。該方式可以使文檔和圖片在一個請求，意味著一個頁面只有一個請求。減少服務器的壓力。表格：創建表格，需要使用、標簽，默認表格沒有邊線。屬性有rowspan和colspan。錨鏈接：一般用在導航。標簽為。屬性href定義指定的URL。當前頁面位置的跳轉：先設置目標鏈接，通過id屬性設置；再設置錨鏈接的URL為#id名稱。對錨鏈接設置快捷鍵：標簽的accesskey屬性，有效的值為：*，#，0-9。還可以用-wap-accesskey設置。,22,（九）常用標簽介紹,選擇列表：選擇列表使用標簽，包含一個或更多的標簽。標簽的name屬性定義選擇列表的名字。name用來取得被選擇的item的值（option的value屬性定義）。1.多重選擇列表：Option的selected屬性用來設置默認的option。如果想設置多重選擇列表，可使用標簽的multiple屬性，只有一個唯一值multiple。2.Option分組：使用標簽，label屬性定義option組的名稱。,23,（九）常用標簽介紹,選擇列表,24,（九）常用標簽介紹,輸入元素：Textfield、Passwordfireld、Checkbox、Radiobutton、Hiddenfield。通過元素創建。傳輸數據到服務器，元素必須和一起使用。Type屬性用來定義input元素的類別。Name屬性用來定義名稱，方便取得用戶數據。input-wap-input-format:10N,25,（九）常用標簽介紹,13.form元素：、等元素不能直接包含在form元素下，XHMTLMP標準規定必須有塊級元素。如果有non-ASCII字符，需使用POST方法來避免編碼問題。14.提交按鈕：所有的表單都必須包含一個提交按鈕。元素用來創建一個提交按鈕。而type屬性被定義為submit。,26,（九）常用標簽介紹,15.重置按鈕：并不是必須的。元素用來創建一個重置按鈕。而type屬性被定義為reset。16.Div和Span。,27,三、WCSS/WAPCSS,28,（一）WCSS介紹,WCSS/WAPCSS/WirelessCSS/WirelessProfileCSS（WAPCascadingStyleSheet）是CSS2的子集+一些WAP特有的擴展目的：定義文檔的風格和布局，從文檔內容中分離。重要性：不同的手機設備有多樣的特征，比如屏幕大小。WML不支持WCSSW3CCSSMobileProfile和WAPCSS不同。,29,（二）使用WCSS的優勢,主要：學習成本降低，可用相同的開發工具，可用WEB瀏覽器瀏覽。表現和結構的分離：匹配不同無線設備的特征（屏幕大小）、不同客戶端代理（PC、PDA、手機）；降低維護成本（新手機）；改變視覺和布局僅需CSS；重復使用CSS；便于工作細分。比WML更好的控制表現：可以定義元素的color，font，background，border，margin，padding等屬性。移動設備第一次訪問站點下載樣式（Cache）。使用外部WCSS，XHTMLMP的文檔大小變小，提高下載時間。,30,（三）使用WCSS的劣勢,不同的WAP瀏覽器對WCSS的支持不同，可能一個屬性在這個WAP瀏覽器上支持，而另外一個不支持。外部的WAPCSS可能增加第一次訪問頁面的請求時間。原因：外部WCSS不存在于手機的Cache，必須從服務器下載；XHTMLMP文檔和外部的WCSS下載是不同的請求，增加了服務器壓力；如果使用一個WCSS定義WAP站點的所有表現，該文件大小可能很大；WAP瀏覽器需要解析WCSS到XHTMLMP文檔。,31,（四）MIME類型和文件擴展名,MIME類型：text/css。文件擴展名：.css,32,（五）WCSS的語法規則,WCSS聲明：selectorproperty:property_value多個屬性允許的，用;分隔。多個選擇器也是允許的，用，分隔。注釋：/*orz*/，WAP瀏覽器將忽略這些內容。,33,（六）如何在XHTMLMP文檔中應用,鏈接外部WCSS（推薦），放置在文檔的head部分，用style屬性定義WCSS樣式，可以多個，無需修改rel和type屬性。someWCSSstatements,34,（七）不同的選擇器,類型選擇器：h1font-style:italic元素名稱必須小寫。Class選擇器：.classcolor:blue對應標簽的class屬性，還可以聯合元素名稱使用h1.classcolor:blue。ID選擇器：#idcolor:red對應標簽的id屬性也可聯合元素名稱。通用選擇器：*color:blue，所有的標簽。注意：在某些WAP瀏覽器上會使樣式渲染變慢。（建議不要用）,35,（八）常用的屬性值,長度：%，px，em，ex，cm，mm，in，pt，pc（值和單位之間不允許有空格：margin-top:1px而不是margrin-top:1px）。顏色：rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16種)。URL：ullist-style-image:url(bullet.gif)無引號、雙引號、單引號均可。,36,（九）字體和文本屬性,字體名稱：pfont-family:“TimesNewRoman”名稱中有空格或多個單詞必須用引號包含。字體大小：pfont-size:12px，也可以用xx-small，x-samll，small，medium，large，x-large，xx-large字體樣式：斜體、粗體和下劃線（font-style,font-weight和text-decoration）。設置文本對齊：text-align和float。WAP中float（left,right,none）常用在img和table標簽,37,（十）列表屬性,改變無序列表的圖標（list-style-type）：默認disc，其他值：circle，square，none。可以應用在ul和li元素上。改變有序列表的次序：默認decimal，其他值：upper-alpha（A），lower-alpha（a），upper-raman（I），lower-raman（i），none3.使用圖片文件作為小圖標：list-style-image:url(bullet.gif)。注：OpenwareWAP瀏覽器本地保存了一些icon，可以使用這些作為小圖標，例如：ullist-style-image:localsrc(rightarrow1),38,（十）列表屬性,39,（十一）顏色屬性和border屬性,設置前景和背景顏色：color、background-color屬性。設置border樣式：border-style（border-top-style等）屬性，值有很多，但只有none和solid被WAP瀏覽器廣泛支持。tableborder-style:solid設置border寬度：border-width（同上）屬性，值為數值，還接受thin、medium和thick。注：值設置border-width，border并不可見，必須設置border-style非none值。設置border顏色：border-color（同上）屬性。注意點同上。設置border屬性的快捷方式：tableborder:2pxsolidblack順序自由。,40,（十二）WAP特有的CSS擴展,快捷鍵：-wap-accesskey，用來指定XHTMLMP元素的快捷鍵。Input：定義文本框是否可以留空，什么類型，可以輸入多少字符Marquee：在屏幕上滾動一些內容。,41,（十二.1）WCSS快捷鍵擴展,給元素定義快捷鍵：-wap-accesskey屬性可用的屬性值*，#，0，1，2，3，4，5，6，7，8，9input.wcss_class-wap-accesskey:4直接定義*和#違反CSS2語法。需要使用Unicode轉義字符2a和23。但是有些WAP瀏覽器（SonyEricssonWAP瀏覽器）要求使用2a和23,一些（Openwave手機瀏覽器）要求使用*和#。與元素的accesskey屬性同效，如同時定義，顯示該屬性值。只用于四個元素a，input，label，textarea，其他定義也無效。,42,（十二.2）WCSS輸入擴展,由兩個屬性組成：-wap-input-famat和-wap-input-required，對應于WML中元素的format（定義類型和字符數量）和emptyok（是否可以留空）屬性。早些的移動設備上WAP瀏覽器不支持，但支持format和emptyok屬性作為XHTMLMP的擴展。為了更好的兼容性，建議WCSS和WML都使用。控制文本框的類型和字符數量：-wap-input-format。需應用在,和標簽上，如應用在其他標簽無效。格式字符（大小寫敏感）：a（小寫字母或符號），A（大寫字母或符號），n（數字或符號）,43,（十二.2）WCSS輸入擴展,N（數字），x（小寫字母或數字或符號），X（大寫字母或數字或符號），m（任何字符，默認小寫字母輸入模式，可換大寫模式），M（任何字符，默認大寫字母輸入模式，可換小寫模式）。屬性值必須包含在引號內，由于部分Openwave手機瀏覽器不支持單引號，建議使用雙引號（）-wap-input-format:“2N”（最多兩個數字）-wap-input-format:“NN”（兩個數字）-wap-input-format:“*N”（無限個數字）-wap-input-format:“A*a”（第一個大寫字母或符號，0-n個小寫字母或符號）-wap-input-format:“*M”（默認）格式字符前使用數字或*的原則：1、只允許一次；2、在最后,44,（十二.2）WCSS輸入擴展,如果值語法錯誤，則WAP瀏覽器忽略該屬性。也可以包含轉義字符：在WCSS中是特殊字符，使用。控制文本框是否可以留空：-wap-input-required（值為：false和true），幫助控制文本框是否可以空白。使用元素同上。當-wap-input-format和-wap-input-required沖突時，以required優先。,45,（十二.3）WCSSMarquee擴展,可以在屏幕上滾動一些內容（一行文字，一個圖片，一個鏈接等），但一些WAP瀏覽器只支持滾動文字。當內容超過屏幕時很有用。包含四個屬性和一個屬性值：-wap-marquee屬性值（display屬性的值），-wap-marquee-dir屬性（指定marquee的方向,值：ltr，rtl-默認），-wap-marquee-loop屬性（指定marquee重復的時間，infinite永遠，大多數默認為1），-wap-marquee-speed屬性（指定marquee的速度，值：slow，nor