wap1.1和wap2.0的比较

原创
gundumw100 2023-03-20 09:12:13 ©著作权
文章标签 html xml css 文章分类 Html/CSS 前端开发
©著作权归作者所有：来自51CTO博客作者gundumw100的原创作品，请联系作者获取转载授权，否则将追究法律责任
wap1.2版本： 

1、抬头： 

<?xml version="1.0"?> 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_2.1.xml"> 

<% response.setContentType("text/vnd.wap.wml;charset=UTF-8");%> 

<% request.setCharacterEncoding("UTF-8");%> 

<%@ page contentType="text/vnd.wap.wml; charset=GB2312" %> 


wap2.0版本： 

基本上和html语言一样，只是介于部分手机不支持一些标签，所以我们的页面书写有所限制，并且不能用js语言 

2.0不能实现的功能可以使用wap1.2页面代替 

1、抬头 

<?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 

<%@ page contentType="application/vnd.wap.xhtml+xml;charset=gb2312" %> 

<% response.setContentType("application/xhtml+xml;charset=UTF-8");%> 

<% request.setCharacterEncoding("UTF-8");%> 


MyEclipse中抬头的写法 

WAP1.2 

<%@ page contentType="text/vnd.wap.wml; charset=GB2312" %><?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 

<% response.setContentType("text/vnd.wap.wml;charset=UTF-8");%> 

<% request.setCharacterEncoding("UTF-8");%> 

<wml> 

<head> 

         <meta http-equiv="Cache-Control" content="max-age=0" forua="true" /> 

         <meta http-equiv="Cache-Control" content="no-cache" /> 

         <meta http-equiv="Cache-Control" content="must-revalidate"/> 

</head> 


WAP2.0 

<%@ page language="java" contentType="application/vnd.wap.xhtml+xml;charset=gb2312"%> 

<% response.setContentType("application/xhtml+xml;charset=utf-8");%> 

<% request.setCharacterEncoding("utf-8");%> 

<?xml version="1.0" encoding="utf-8"?> 

<!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> 

        <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset=UTF-8" /> 

        <link rel="stylesheet" href="jspx/style.css" type="text/css" /> 

        <title>wap搜索</title> 

     </head> 

----------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

2、<wml></wml>相当于html中的<html></html>，所有的内容都在其中 

<card></card>相当于html中的<body></body>，但是一个wml中可以有多个card，主体内容一定要包括在card中 

<p></p>和html中的一样 

通常格式为： 

<?xml version="1.0"?> 

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_2.1.xml"> 

<% response.setContentType("text/vnd.wap.wml;charset=UTF-8");%> 

<% request.setCharacterEncoding("UTF-8");%> 

<%@ page contentType="text/vnd.wap.wml; charset=GB2312" %> 

<wml> 

<card> 

<p> 

………… 

………… 

</p> 

</card> 

</wml> 


wap2.0版本： 

2、在<html>中一定要写成： 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head>和标准的html相似： 

<head> 

          <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset= UTF-8" /> 

          <link rel="stylesheet" href="cssurl" type="text/css" />     

          <title>titlename</title> 

</head> 

<body></body>，<p></p>和标准的一样，但是除了<form>以外，所有的内容都要在<p></p>中，对于<form>，格式为 

<form><p></p></form> 

通常的页面格式为： 

<?xml version="1.0" encoding="utf-8"?> 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 

<%@ page contentType="application/vnd.wap.xhtml+xml;charset=gb2312" %> 

<% response.setContentType("application/xhtml+xml;charset=UTF-8");%> 

<% request.setCharacterEncoding("UTF-8");%> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

          <meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset= UTF-8" /> 

          <link rel="stylesheet" href="cssurl" type="text/css" />     

          <title>titlename</title> 

</head> 

<body> 

<p> 

………… 

………… 

</p> 

<form> 

<p> 

………… 

………… 

</p> 

</form> 

</body> 

</html> 

---------------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

3、常用标签： 

(1)回车：<br/> 


wap2.0版本： 

3、常用标签： 

(1)回车：<br/> 

------------------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

(2)链接： 

<anchor>linkname 

<go href="linkurl" method="post"> 

     <postfield name="fieldname" value="fieldvalue" /> 

</go> 

</anchor> 

postfield可以为多个，表示要传递的参数，必须包括在<anchor></anchor>中，如果没有传递的参数，可以直接写成： 

<anchor>linkname 

<go href="linkurl" method="post"/> 

</anchor> 


wap2.0版本： 

(2)链接： 

<a href="linkurl">linkname</a> 

-------------------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

(3)图片（联通为png格式，移动为gif格式）： 

<img src="imageurl" alt="" height="80"/> 


wap2.0版本： 

(3)图片（联通为png格式，移动为gif格式）： 

<img src="imageurl" alt="" height="80"/> 

---------------------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

(4)输入框： 

<input name="keywordtext" value="" maxlength="10" title="请输入关键字" emptyok="false"/> 

<br/> 

<anchor>linkname 

<go href="linkurl" method="post"> 

     <postfield name="postfieldname1" value="postfieldvalue1" /> 

     <postfield name="postfieldname2" value="$keywordtext" /> 

</go> 

</anchor> 

keywordtext为输入框的名称，作为参数传递是要写成<postfield name="postfieldname2" value="$keywordtext" />的形式 

postfieldname1为通常的参数传递 

(5)下拉框 

<select name="selectname" title="下拉框"> 

<option value="1">1</option> 

<option value="2">2</option> 

<option value="3">3</option> 

<option value="4">4</option> 

<option value="5">5</option> 

<option value="6">6</option> 

</select> 

selectname为下拉框的名称，参数传递如(4)，要写成<postfield name="postfieldname" value="$selectname" />的形式 

(6)多选框 

<select name="multiselect" multiple="true"> 

<option value="value1">view1</option> 

<option value="value2">view2</option> 

<option value="value3">view3</option> 

</select> 

multiselect为多选框的名称，参数传递如(4)，要写成<postfield name="postfieldname" value="$multiselect" />的形式 

如果选择了value1和value2，在后台接收到的数据为postfieldname＝value1;value2，以此类推 


wap2.0版本： 

(4)表单： 

<form action="linkurl" method="post"> 

<p> 

下面是输入框：<br/> 

<input type="text" name="textname" value="initializevalue"/><br/> 

下面是下拉框：<br/> 

<select name="selectname"> 

<option value="1">1</option> 

<option value="2">2</option> 

<option value="3">3</option> 

<option value="4">4</option> 

</select><br/> 

下面是多选框：<br/> 

<input type="checkbox" name="checkbox1" title="hot" value="hot"/>checkboxvalue1  

<input type="checkbox" name="checkbox2" title="top" value="top"/>checkboxvalue2  

<input type="checkbox" name="checkbox3" title="new" value="new"/>checkboxvalue3<br/> 

下面是单选框：<br/> 

<input type="radio" name="radiotest" value="hot" checked="checked"/>checkboxvalue1<br/> 

<input type="radio" name="radiotest" value="top"/>checkboxvalue2<br/> 

<input type="radio" name="radiotest" value="new"/>checkboxvalue3<br/> 

下面是隐藏体：<br/> 

<input type="hidden" name="hiddenname" value="hiddenvalue"/> 

下面是按钮：<br/> 

<input type="submit" value="提交"/> 

</p> 

</form> 

-------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

(7)拨号 

直接拨号：<a href="wtai://wp/mc;telnum">telname</a> 

telnum：是要拨号的电话，不能有其他字符，只能是数字； 

telname：可以是任何字符 

跳转拨号： 

从任意一个页面转到下页，然后过0.05秒，手机就转接到要拨打的电话 

<card id="eshop-index" ontimer="wtai://wp/mc;telnum"> 


<timer value="50"/> 


</card> 


wap2.0版本： 

(5)拨号： 

<a href="wtai://wp/mc;telnum">telname</a> 

telnum：是要拨号的电话，不能有其他字符，只能是数字； 

telname：可以是任何字符 

--------------------------------------------------------------------------------------------------------------------- 


wap1.2版本： 

(8)手机快捷键 

<do label="viewname" type="accept" name="linkname"> 

<go href="linkurl" method="post"> 

</go> 

</do> 

viewname为显示的名称，linkname为这个链接的名称，在同一个页面中不可以有重复的linkname，linkurl为链接url 


wap2.0版本： 

(6)快捷键： 

<a href="linkurl" accesskey="telkey"> 

telkey：为手机上的键名称，可以是0、2、3、4、5、6、7、8、9、*、#这12个键 

只要用户按键不放，就可以到达linkurl地址 

(7)css: 

书写格式和html一样： 

body {color: #000000; font-family: "Arial", 


sans-serif; background-color: #E7FAFF;} 


.red { color: #ff00ff; } 


a:hover span{ color:red; } 


.yellow { background-color:#E7FAFF; } 

引入： 

<link rel="stylesheet" href="cssurl" type="text/css" /> 

调用： 

<span class="red">testtext</span>