手机端UI开发

完成一个移动的手机终端的UI开发,来体验一下手机端的UI开发流程。先了解一 下其代码结构。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>中国移动</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<link href="/css/common.wap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>你好! 欢迎来到sabayon的地盘.</p>
</body>
</html>

XHTML MP 以序言 (prolog) 开头, 该序言中含有 XML 声明和 DOCTYPE 声明.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd
">
该序言组件并非 XHTML MP 的元素, 因此不应该把它关闭, 也就是, 你不应该给它们加结束标签或用 /> 结束它们.

文档的其余部分, 除了 HTML 中的 <html> 标签不应该有 xmlns 属性外, 与普通的 HTML 文档相同.

XHTML MP 必须包含 <html>, <head>, <title>, 和 <body> 元素.

XML 声明与字符编码格式

所有 XHTML MP 都是 XML 文档. 因此, 文档的开始总会有 XML 声明. XML 声明指定了文档的 XML 版本. 文档的字符编码也可以在这里指定, 像这样:

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

上面一行表述了 XHTML MP 文档的 XML 版本为 1.0, 字符编码格式为 UTF-8. 如果 XHTML MP 文档的编码格式为 UTF-8 或 UTF-16, encoding 属性可以省略.

在XHTML MP 中, XML 声明并非必需的组件. 然而, 如果 XML 声明被省略的话, 将会导致一些 WAP 浏览器出问题. 例如, 一些 Sony Ericsson 的 WAP 浏览器, 当接收到的 MIME 类型为 text/html 时, 会利用 XML 声明来区分 XHTML MP 和 IHTML (一个 NTT DoCoMo 定义的有专利的标记语言) 文档: 如果文档包含 XML 声明, 它就是一个 XHTML MP 文档, 否则它就是一个 IHTML 文档.

DOCTYPE 声明

所有 XHTML MP 文档都必须有 DOCTYPE 声明. 该声明应该放在 XML 声明与 <html> 元素之间. 下面是 XHTML MP 的 DOCTYPE 声明. 你可以直接将其复制并粘贴到你的 XHTML MP 中.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " 

http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd

">

DOCTYPE 指定了 DTD (文档类型定义) 的名字 和链接到 DTD 的 URL. DTD 包含了关于标记语言的语法信息. 它定义了什么元素和属性可以在标记中使用和使用它们的规则. 验证工具, 通过把你的 XHTML MP 文档与 DOCTYPE 声明中指定的 DTD 进行比较, 可用于检查你的 XHTML MP 文档是否遵守了 XHTML MP 语言的规则. 一些 IDE 集成了类似的审核工具.

<html> 元素

<html> 是 XHTML MP 的根元素. 所有其它元素都必须被包含在 <html></html> 标签中.

xmlns 属性是用来定义 XHTML MP 的命名空间的. 目前只有 "http://www.w3.org/1999/xhtml" 值可被指定用于 xmlns 的属性. 你必须通过包含 xmlns 属性来严格遵循 XHTML MP 标准, 尽管目前大部分 WAP 浏览器仍然能够正确显示 XHTML MP 页面即使不用 xmlns 属性.

<head> 元素

<head> 和 </head> 分别用于指定文档头的开始与结尾. 一个文档的信息都是存放在文档头里的. <head> 被用作其它元素, 诸如 <title> 和 <link> 的容器. <title> 元素和 <link> 元素分别用于指定 XHTML MP 文档的标题和指向外部样式单的链接 URL. XHTML MP 文档的 metadata 也是放在文档头中. metadata 要用 <meta> 元素指定.

<title> 元素

<title> 元素用于指定一个 XHTML MP 页面的标题. 该元素应被包含在 <head></head> 标签对中. 大部分 WAP 浏览器将在屏幕顶部显示标题. 如果标题太长, WAP 浏览器将会截取标题以适应标题条的大小. WAP CSS 不可用于 <title> 元素.

<meta> 元素

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其中:
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

<body> 元素

<body> 元素用于实际内容的容器. 一个 XHTML MP 文件只能包含一个 <body> 元素, 也就是说, WML 1.x 的 deck 和 card 的概念已经不再被支持了.

文本不可直接被包含在 <body></body> 标签对中. 例如, 下面的标记代码在 XHTML MP 中是不正确的:

<body>

你好. 欢迎来学习 XHTML MP 教程.

</body>

要纠正上面的 XHTML MP 标记代码, 文档 body 中的文本必须被包含在其它元素, 如段落 (<p></p>), 列表 (<ul><li></li></ul> 或 <ol><li></li></ol>), 标题 (<h1></h1>, <h2></h2>...), 等等, 之间. 下面的标记代码在 XHTML MP 中是正确的:

<body>

<p>你好! 欢迎来到sabayon的地盘.</p>

</body>

 原文地址:http://hi.baidu.com/sabayon99/blog/item/1e6f51f59fff68e67709d74f.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值