`
___loveOfForever
  • 浏览: 78254 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

XHTML MP与WCSS (XHTML MP教程)

阅读更多
XHTML MP(XHTML Mobile Profile),它是定义在WAP 2.0上面的标记语言(markup language)。XHTML MP是XHTML的子集,在XHTML MP出现之前,WAP网站的开发者们只能用WML和WML script来创建WAP的网站。而与此同时,web的开发者们却在用强大的多的HTML、CSS、XHTML等来进行传统网站的开发。所以XHTML MP的目标就是浏览者在WAP和web上获得尽可能相似的浏览体验。
一、XHTML MP 不支持WML特性
      1.XHTML MP 不支持<deck>和<card>标签。
      在XML中,一个文件可以包含一个或更多的card,所有的card组合成一个deck,并在无线设备中一同被下载。WAP浏览器每次只显示一个card,可以通过锚链接访问其他的card。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性,可以使用multipart messages(多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。
      2.XHTML MP 不支持<timer>标签

      <head>
      <meta http-equiv="refresh" content="10;URL=http://www.planabc.net/" />
      </head>
      <meta>元素10秒后告诉WAP浏览器URL。
      注意点:WML timer 仅当进入card,而HTML refresh timer当进入XHTML MP页面。XHTML MP 不支持事件。
      3.WML支持四个事件(ontimer,onenterbackward,onenterforward,onpick),除ontimer其他事件无法模拟。如要使用,需使用WML1.X。
      4.XHTML MP 不支持变量。在XML,可以声明变量,并赋值,拥有全局作用域。可以在任何的deck和card中使用。XHML MP放在服务器端处理(必须发送并保存)。
      5.XHTML MP 不支持客户端脚本。在XML,你可以使用客户端脚本(WMLScript)。JavaScript的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本(ECMAScript MP),支持所有的WMLScript功能。
      6.XHTML MP 不支持可编程序软键(Programmable SoftKeys)。WML的一个最大特征。通过<do>标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性:
      <a accesskey="1" href="part1.xhtml">XHTML MP Tutorial Part 1</a>
      WCSS中的-wap-accesskey属性也可以用来定义:a.wcss_class_1 {-wap-accesskey: 1}
      7.XHTML MP 不支持<u>标签。
      在XML,<u>用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。
      8.XHTML MP 不支持Input框的format属性。
      在XML,可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性,语法一致。比如限制5个数字字符:input {-wap-input-format:”5N”}
      9.XHTML MP 不支持锚链接传输数据。
二、XHMTL MP语法规则
      1. 标签必须完全闭合。
      2. 标签和属性必须小写。
      3. 属性值必须包含在引号标记内。
      4. 不允许无属性值存在。
      5. 标签必须完全嵌套。
三、文档结构和类型
      1.必须包含<html>, <head>, <title>和<body> 元素。
      2. XML声明和字符编码:<?xml version="1.0" encoding="UTF-8"?>,UTF-8/16编码可省略。XML声明也不是必须的,但如果忽略在许多WAP浏览器中出错。
      3. 必须有DOCTYPE声明。在XML声明和<html>元素之间。
      <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
      4. <html>、<head>、<link>、<title>、<body>
      5. <p>元素,align属性已经去除,可以通过WAP CSS的text-align属性来设置。
四、通用的元数据
      1. 使用<meta/>标签,包含在<head>内
      2. WAP浏览器如果不理解则忽略。
      3. 比如添加作者:<meta name="author" content=“yuanxin"/>
      4. Cache Control:<meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期:
      <meta http-equiv="Cache-Control" content="no-cache"/>
      <meta http-equiv="Cache-Control" content="max-age=0"/>
      注意点:与设备相关。一些使用不相的方法,一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的HTTP头。也可应用于图片的缓存。
      5. 周期性刷新。必须配合使用。不是所有浏览器都支持。
      <meta http-equiv="Cache-Control" content="no-cache"/>
      <meta http-equiv="refresh" content="15;URL=yuanxin.xhtml"/>
五、XHTML MP常用标签介绍
      1. 注释:<!– — >,和HTML和WML1.X相同。
      2. 换行:<br/> ,和HTML和WML1.X相同。
      3. 水平线:<hr/>。不能包含在<p></p>标签之内。
      4. 标题:<h1>-<h6>(不同的大小和样式),有些设备看起来一样的。
      5. 字体样式:XML可以使用标签来改变字体样式( <b>、<i>、<small>、<big>等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。 WCSS 控制字体格式。
      6. 与格式化文本:在XHTML MP中,标签间空白不显示,此外,段落中2个或更多的空白只显示一个,如果想保持文字的格式,可使用<pre>。
      7. 列表:<ul>、<ol>、<li>。对于<ol>元素,可以用属性 start 指定数字开始的序列。还可以用WCSS来做更精确的控制。
      8. 显示图片:<img>标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持,显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度除了老的WBMP图片格式,WAP2.0还支持WEB上的图片格式(gif, jpg和PNG),但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过accept HTTP header判断设置。 关于大图片的发布:很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。优化图片:1、用制图软件按比例缩小图片;2、如果是gif图片,减少颜色,但降低了图片质量,权衡。3、如果是jpg图片,保存一定的压缩比例,依然是权衡。使用multipart messages,先下载的XHTML MP文档,后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。
      9. 表格:创建表格,需要使用<table>、<tr>、<td>标签,默认表格没有边线。属性有rowspan和colspan。
      10. 锚链接:一般用在导航。标签为<a></a>。属性href定义指定的URL。当前页面位置的跳转:先设置目标链接,通过id属性设置;再设置锚链接的URL为#id名称。对锚链接设置快捷键:<a>标签的accesskey属性,有效的值为:*,#,0-9。还可以用-wap-accesskey设置。
      11. 选择列表:选择列表使用<select>标签,包含一个或更多的<option>标签。<select>标签的name属性定义选择列表的名字。name用来取得被选择的item的值(option的value属性定义)。多重选择列表:Option的selected属性用来设置默认的option。如果想设置多重选择列表,可使用<select>标签的multiple属性,只有一个唯一值‘multiple’;Option分组:使用<optgroup>标签,label属性定义option组的名称。
      12. 输入元素:Text field、Password fireld、Checkbox、Radio button、Hidden field。通过<input>元素创建。传输数据到服务器,<input>元素必须和<form>一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称,方便取得用户数据。
      14. 提交按钮:所有的表单都必须包含一个提交按钮。<input>元素用来创建一个提交按钮。而type属性被定义为’submit’。
      15. 重置按钮:并不是必须的。<input>元素用来创建一个重置按钮。而type属性被定义为’reset’。
      16. Div和Span。
六、WCSS介绍
      WCSS也叫 WAP CSS/Wireless CSS/Wireless Profile CSS(WAP Cascading Style Sheet ),是CSS2的子集+一些WAP特有的扩展,目的:定义文档的风格和布局,从文档内容中分离。重要性:不同的手机设备有多样的特征,比如屏幕大小。 WML不支持WCSS;W3C CSS Mobile Profile和WAP CSS 不同;主要:学习成本降低,可用相同的开发工具,可用WEB浏览器浏览;表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理(PC、PDA、手机);降低维护成本(新手机);改变视觉和布局仅需CSS;重复使用CSS;便于工作细分;比WML更好的控制表现:可以定义元素的color,font,background,border,margin,padding等属性;移动设备第一次访问站点下载样式(Cache); 使用外部WCSS,XHTML MP的文档大小变小,提高下载时间;不同的WAP浏览器对WCSS的支持不同,可能一个属性在这个WAP浏览器上支持,而另外一个不支持;外部的WAP CSS可能增加第一次访问页面的请求时间。原因:外部WCSS不存在于手机的Cache,必须从服务器下载;XHTML MP文档和外部的WCSS下载是不同的请求,增加了服务器压力;如果使用一个WCSS定义WAP站点的所有表现,该文件大小可能很大;WAP浏览器需要解析WCSS到XHTML MP文档;MIME类型: text/css;文件扩展名:.css
七、WCSS语法规则   
1. WCSS声明:selector {property: property_value}
     2. 多个属性允许的,用’;’分隔。
     3. 多个选择器也是允许的,用‘,’分隔。
     4. 注释:/*orz*/,WAP浏览器将忽略这些内容。
     5. 链接外部WCSS(推荐),放置在文档的head部分,用style属性定义WCSS样式
     6. <link href=“url” rel=“stylesheet” type=“text/css”/>,可以多个,无需修改rel和type属性。
     7. 类型选择器:h1 { font-style: italic} 元素名称必须小写。
     8. Class选择器: .class { color:blue} 对应标签的class属性,还可以联合元素名称使用 h1.class {color:blue}。
     9. ID选择器:#id {color:red} 对应标签的id属性也可联合元素名称。
     10. 通用选择器:* { color:blue} ,所有的标签。注意:在某些WAP浏览器上会使样式渲染变慢。(建议不要用)
八、WCSS常用属性
     1. 长度:%,px,em,ex,cm,mm,in,pt,pc(值和单位之间不允许有空格:margin-top:1px而不是margrin-top:1 px)。 2. 颜色:rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。
     3. URL:ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。
     4. 字体名称:p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
     5. 字体大小:p {font-size:12px},也可以用xx-small,x-samll,small,medium,large,x-large,xx-large
     6. 字体样式:斜体、粗体和下划线(font-style,font-weight和text-decoration)。
     7. 设置文本对齐:text-align和float。WAP中float(left,right,none)常用在img和table标签
     8. 改变无序列表的图标(list-style-type ):默认disc,其他值:circle,square,none。可以应用在ul和li元素上。
     9. 改变有序列表的次序:默认decimal,其他值:upper-alpha(A),lower-alpha(a),upper-raman(I),lower-raman(i),none
使用图片文件作为小图标:list-style-image: url(bullet.gif) 。注:Openware WAP浏览器本地保存了一些icon,可以使用这些作为小图标,例如:ul {list-style-image: localsrc("rightarrow1")}
     10. 设置前景和背景颜色:color、background-color属性。
     11. 设置border样式:border-style(border-top-style等)属性,值有很多,但只有none和solid被WAP浏览器广泛支持。table {border-style: solid}
     12. 设置border宽度:border-width(同上)属性,值为数值,还接受thin、medium和thick。注:值设置border-width,border并不可见,必须设置border-style非none值。
     13. 设置border颜色:border-color(同上)属性。注意点同上。
     14. 设置border属性的快捷方式:table {border: 2px solid black} 顺序自由。
九、WAP/WCSS扩展
     1. 快捷键:-wap-accesskey ,用来指定XHTML MP元素的快捷键。
     2. Input:定义文本框是否可以留空,什么类型,可以输入多少字符
     3. Marquee:在屏幕上滚动一些内容。
     1. 给元素定义快捷键:-wap-accesskey属性
     2. 可用的属性值*,#,0,1,2,3,4,5,6,7,8,9
     input.wcss_class {-wap-accesskey: 4}
     3. 直接定义*和#违反CSS2语法。需要使用Unicode转义字符\2a和\23。但是有些WAP浏览器(Sony Ericsson WAP 浏览器 )要求使用\2a 和 \23,一些(Openwave 手机浏览器) 要求使用* 和#。
     4. 与元素的accesskey属性同效,如同时定义,显示该属性值。
     5. 只用于四个元素a, input,label,textarea,其他定义也无效。
     6. 由两个属性组成:-wap-input-famat和-wap-input-required,对应于WML中<input>元素的format(定义类型和字符数量)和emptyok(是否可以留空)属性。
     7. 早些的移动设备上WAP浏览器不支持,但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性,建议WCSS和WML都使用。
     8. <input type="text" format="N" style='-wap-input-format: "N"'/>
     9. 控制文本框的类型和字符数量:-wap-input-format。需应用在<input type=“text”>, <input type=“password”>和<textarea> 标签上,如应用在其他标签无效。格式字符(大小写敏感):a(小写字母或符号),A(大写字母或符号),n(数字或符号) N(数字),x(小写字母或数字或符号),X(大写字母或数字或符号),m(任何字符,默认小写字母输入模式,可换大写模式),M(任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分Openwave 手机浏览器不支持单引号,建议使用双引号(<input type=“text” style=‘-wap-input-format: “N”’/> )
     10. WCSS输入扩展:由两个属性组成:-wap-input-famat和-wap-input-required,对应于WML中<input>元素的format(定义类型和字符数量)和emptyok(是否可以留空)属性。早些的移动设备上WAP浏览器不支持,但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性,建议WCSS和WML都使用。
     11. WCSS Marquee扩展:可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。
分享到:
评论

相关推荐

    wap2.0初探索XHTML MP、WCSS

    2. **向后兼容性**:XHTML MP与WCSS(WAP CSS)一起使用,兼容WML和WMLScript,这意味着原有的WAP 1.x应用仍能顺利运行。 **无线标记语言的发展** 1. **HTML**:最初用于网页设计,WAP的目标之一就是让移动设备也...

    WAP2.0(XHTML MP+WCSS)入门开发教程

    WAP2.0(XHTML MP+WCSS)入门开发教程

    WAP 2.0-XHTML MP and WCSS

    开发者可以利用XHTML MP和WCSS来创建交互式的、用户友好的移动应用程序,包括在线购物、社交媒体、新闻阅读等。同时,WAP 2.0的标准化协议使得这些应用能够在多种不同类型的移动设备上运行,增强了跨平台兼容性。 *...

    XHTML MP 教程(带WCSS效果很牛X)

    **XHTML MP与WCSS结合的实践** 在XHTML MP文档中应用WCSS,通常通过在`&lt;head&gt;`部分插入`&lt;style&gt;`标签或链接外部样式表文件(`.wcss`)来实现。例如: ```html 我的XHTML MP页面 body { font-family: Arial, ...

    WAP2.0.ppt XHTML MP and WCSS

    3. **与WCSS结合**:XHTML MP与WCSS结合使用,允许开发者通过样式表控制移动设备上的页面布局和视觉样式,提供更多的表现控制。 4. **通用性**:XHTML MP是基于XHTML Basic的,包含了一些额外的XHTML元素和属性,如`...

    wap2.0说明(XHTML MP and WCSS)

    XHTML MP是WAP 2.0规范的一部分,它结合了 **WCSS (WAP Cascading Style Sheets)**,以增强页面的样式和布局控制。 **XHTML MP** 的主要特点包括: 1. 它是 **XHTML** 的一个子集,继承了XHTML的结构化和严格的...

    WAP 2.0—— XHTML MP and WCSS

    HTML/XHTML页面可以通过较小的修改成XHTML MP,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出最大)。 支持WCSS。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的WCSS文件即可。 更...

    WAP2.0 XHTML MP WCSS

    简洁地介绍WAP2.0 XHTML MP WCSS 精简,到位,快速入门。

    WAP2.0——_XHTML_MP_and_WCSS

    WAP 2.0 是无线应用协议的一个重要升级,它引入了XHTML MP(XHTML Mobile Profile)和WCSS(WAP Cascading Style Sheet)...随着移动设备技术的不断发展,XHTML MP和WCSS将继续扮演着连接移动用户与互联网的重要角色。

    Mobile Web Development: Building mobile websites, SMS and MMS messaging, mobile payments, and automated voice call systems with XHTML MP, WCSS, and mobile AJAX

    本书《移动网络开发:构建移动网站、短信与多媒体信息服务、移动支付及自动语音呼叫系统》深入探讨了如何利用XHTML Mobile Profile(XHTML MP)、Wireless CSS(WCSS)以及移动AJAX等技术来创建高效的移动网站和服务...

    xhtml mp 基础(手机网站开发基础技术)

    【XHTML MP基础:手机网站开发的关键技术】 XHTML MP,全称为Extensible Hypertext Markup Language for Mobile Devices,是专为移动设备设计的一种简化版的XHTML标准,用于构建WAP 2.0网站,使其能在手机、PDA等...

    WAP2.0的PPT教程

    3. **XHTML MP与WCSS** - XHTML MP是WAP 2.0的官方标记语言,基于XHTML Basic扩展,添加了一些XHTML元素和属性。 - WCSS是CSS2的简化版,具有WAP特有的扩展,用于控制XHTML MP页面的布局和样式。 **四、XHTML MP...

    wap2.0教程讲解

    WAP 2.0教程讲解主要围绕着XHTML MP和WCSS在无线应用中的使用展开。WAP 2.0是WAP技术的一个重大升级,它引入了XHTML MP(eXtensible HyperText Markup Language Mobile Profile),这是一种针对移动设备优化的XHTML...

    WAP2.0教程PPT(Wap2.0规范)

    1. **向后兼容性**:XHTML MP不仅支持WAP2.0的应用,还可以与WML(Wireless Markup Language)和WMLScript相兼容,确保了旧有WAP站点的可访问性。 2. **跨平台性**:基于XHTML标准,XHTML MP允许开发的网站同时...

    WAP2.0ppt教程

    在这一教程中,重点介绍了WAP 2.0的核心组件:XHTML MP(eXtensible HyperText Markup Language Mobile Profile)和WCSS(WAP Cascading Style Sheets)。 XHTML MP 是针对移动设备优化的XHTML的一个子集,它允许...

    无线Web页面事件机制调研

    《无线Web页面事件机制调研——探索WAP 2.0与XHTML MP》 随着无线网络技术的飞速发展,WAP(Wireless Application Protocol)论坛在早期为适应无线网络环境,制定了一系列如WTCP、WDP、WSP、WTP和WML等协议,这些...

    wap2.0.ppt

    4. **集成WCSS**:XHTML MP与WCSS(WAP Cascading Style Sheets)结合使用,提供了类似CSS2的功能,允许开发者轻松调整页面布局和样式,以适应不同类型的移动设备。 5. **开发便利性**:对于熟悉HTML、XHTML和CSS的...

    (ecbpo.com)WAP2.0知识分享PPT

    WAP 2.0引入了XHTML MP(eXtensible HyperText Markup Language Mobile Profile),这是一种专为移动设备设计的XHTML子集,旨在提供更丰富的用户体验,同时保持与传统Web技术的兼容性。 XHTML MP是WAP 2.0的核心...

Global site tag (gtag.js) - Google Analytics