<input type="text" name=“taobao" maxlength="16" value=“yuanxin"/>
input { -wap-input-format: "10N"}
<input type="password" name=“taobao"/>
<input type="checkbox" name=“taobao" value=“yuanxin" checked="checked"/>
<input type="radio" name=“taobao" value=“yuanxin" checked="checked"/>
<input type="hidden" name=“taobao" value=“yuanxin"/>
(九)常用标签介绍
13. form元素:<input>、<select>等元素不能直接包含在form元素下,XHMTL MP标准规定必须有块级元素。如果有non-ASCII字符,需使用POST方法来避免编码问题。
<form method="get" action=“yuanxin.asp"> <p> <input ...> <select ...> </p> </form>
14. 提交按钮:所有的表单都必须包含一个提交按钮。<input>元素用来创建一个提交按钮。而type属性被定义为’submit’。
<input type="submit" value="OK"/>
(九)常用标签介绍
15. 重置按钮:并不是必须的。<input>元素用来创建一个重置按钮。而type属性被定义为’reset’。
<input type="reset" value="Default"/>
16. Div和Span。
三、WCSS/WAP CSS
(一)WCSS 介绍
WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS(WAP Cascading Style Sheet )
是CSS2的子集+一些WAP特有的扩展
目的:定义文档的风格和布局,从文档内容中分离。
重要性:不同的手机设备有多样的特征,比如屏幕大小。
WML不支持WCSS
W3C CSS Mobile Profile和WAP CSS 不同。
(二)使用WCSS的优势
主要:学习成本降低,可用相同的开发工具,可用WEB浏览器浏览。
表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理(PC、PDA、手机);降低维护成本(新手机);改变视觉和布局仅需CSS;重复使用CSS;便于工作细分。
比WML更好的控制表现:可以定义元素的color,font,background,border,margin,padding等属性。
移动设备第一次访问站点下载样式(Cache)。
使用外部WCSS,XHTML MP的文档大小变小,提高下载时间。
(三)使用WCSS的劣势
不同的WAP浏览器对WCSS的支持不同,可能一个属性在这个WAP浏览器上支持,而另外一个不支持。
外部的WAP CSS可能增加第一次访问页面的请求时间。原因:外部WCSS不存在于手机的Cache,必须从服务器下载;XHTML MP文档和外部的WCSS下载是不同的请求,增加了服务器压力;如果使用一个WCSS定义WAP站点的所有表现,该文件大小可能很大;WAP浏览器需要解析WCSS到XHTML MP文档。
(四)MIME 类型和文件扩展名
MIME类型: text/css。
文件扩展名:.css
(五)WCSS的语法规则
WCSS声明:selector {property: property_value}
多个属性允许的,用’;’分隔。
多个选择器也是允许的,用‘,’分隔。
注释:/*orz*/,WAP浏览器将忽略这些内容。
(六)如何在XHTML MP文档中应用
链接外部WCSS(推荐),放置在文档的head部分,用style属性定义WCSS样式
<link href=“url” rel=“stylesheet” type=“text/css”/>,可以多个,无需修改rel和type属性。
<style type="text/css"> some WCSS statements </style>
<hr style="color: blue"/>
(七)不同的选择器
类型选择器:h1 { font-style: italic} 元素名称必须小写。
Class选择器: .class { color:blue} 对应标签的class属性,还可以联合元素名称使用 h1.class {color:blue}。
ID选择器:#id {color:red} 对应标签的id属性也可联合元素名称。
通用选择器:* { color:blue} ,所有的标签。注意:在某些WAP浏览器上会使样式渲染变慢。(建议不要用)
(八)常用的属性值
长度:%,px,em,ex,cm,mm,in,pt,pc(值和单位之间不允许有空格:margin-top:1px而不是margrin-top:1 px)。
颜色:rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。
URL:ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。
(九)字体和文本属性
字体名称:p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
字体大小:p {font-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标签
(十)列表属性
改变无序列表的图标(list-style-type ):默认disc,其他值:circle,square,none。可以应用在ul和li元素上。
改变有序列表的次序:默认decimal,其他值:upper-alpha(A),lower-alpha(a),upper-raman(I),lower-raman(i),none
3. 使用图片文件作为小图标:list-style-image: url(bullet.gif) 。注:Openware WAP浏览器本地保存了一些icon,可以使用这些作为小图标,例如:ul {list-style-image: localsrc("rightarrow1")}
(十)列表属性
(十一)颜色属性和border属性
设置前景和背景颜色:color、background-color属性。
设置border样式:border-style(border-top-style等)属性,值有很多,但只有none和solid被WAP浏览器广泛支持。table {border-style: solid}
延伸阅读:
php作wap开发时需要注意的几个问题
什么是wap
wap1.0和wap2.0有什么区别
WAP技术的一些基本常识
wap技术知道多少
wap开发常见问答
Wap开发FAQ大全
wap开发常见问答2