移动网站开发——标记语言

发表于 2010年06月23日
安全工具
更新于 2013年02月06日 17:26:45 下午

移动互联网被称为“第五次科技革命”，而随着iPhone和Android等智能手机的日渐流行和iPad等平板电脑的出现，移动互联网的潜力和趋势也愈发显现，针对移动设备的网站开发越来越受到关注，国内很多公司也开始重视面向所有移动设备的网站开发。

一般来说，对于移动网站可以采取两种方式：

专门开发一个独立的移动版本
使用media type和mediaquery控制网站在移动浏览器的表现

本文和下一篇文章将介绍第一种方案，后面的文章将介绍第2种方案。

本文我们先了解一下移动网站的标记语言。

移动网站标记语言的演进

我们先看一下 @AdrianF2E 分享的一张《移动web相关标记语言的演进》的图表，一目了然：

这张图形象的展示了标记语言的发展历程，包括移动网站标记语言。

移动网站开发要比普通的网站开发复杂的多，选择一种用于移动网站的标记语言同样相当纠结。

在最初，WAP论坛(后来和NTT合并，组成OMA，Open MobileAlliance)创建了一种基于XML的语言，称为WML，这是用于WAP网站的标记语言。它并不是理想的方案，因为它将网站分割为两部分：普通页面使用(X)HTML，而移动网站使用WML。网站开发者想要做一个移动网站也不得不学习一种新的语言而不是转换技术，“一站式”的信条也被打破，用户不能访问他们喜欢的网站并且不得不发现这个网站的WAP版本——如果它们存在的话。另外日本的NTT创建了他们自己的语言cHTML(compactHTML)，但是它并不能与XHTML和WML兼容。

由于这与理想中的方案相去甚远，W3C创建了XHTML Basic1.0。正如其名，这是一个XHTML 1.1的子集。由于XHTML1.1将XHTML改善为小型的模块，一个子集就可以只包含一些必须的或者可以在低端移动设备上控制的基本的模块、元素和属性。

基于 XHTML

XHTMLBasic为针对移动网站的标记语言提供基础的模块。与其基础的XML一样，它也被设计用于扩展。这正好结合了WAP和NTT的合并之后(也就是OMA) 的做法，他们创建了cHTML和WML的继承者XHTML Mobile Profile——它在XHTMLBasic的基础上添加了一些在它们之前的版本中有的特性。XHTML Basic和XHTMLMP共存的状况看起来有些混乱，但是之后不久W3C就发布了XHTML 1.1版本，吸收了在XHTMLMP中加入的一些特性。所以现在看来这两个版本差不多是一样的，至于使用哪个很多时候只是看个人喜好了。这里我们选择XHTMLBasic，因为它是W3C推荐的….. 🙂

开始使用XHTML Basic

由于XHTMLBasic是XHTML的一个子集，如果你已经了解XHTML的开发，那么开始制作XHTML Basic的页面就手到擒来了。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=="en">
	<head>
		<title>Hello Mobile</title>
	</head>
	<body>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

<head>

<title>Hello Mobile</title>

</head>

<body>

</body>

</html>

是的，只是加了个XML的头声明，然后使用xhtml basic的DTD。

XHTML Basic 支持的模块

模块	元素/属性
结构	html, head,title, body
文字	abbr, acronym, address,blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,p, pre, q, samp, span, strong, var
链接	a
列表	dl, dt, dd, ol, ul, li
表单	button,fieldset, form, input, label, legend, select, optgroup, option, textarea
表格	caption, table, td, th, tr
图片	img
对象	object, param
表现	b, big, hr, i,small, sub, sup, tt
元信息	meta
链接	link
base	base
事件	onblur,onfocus, onload, onunload, onreset, onsubmit, onchange
脚本	script, noscript
样式	支持style元素
样式属性	支持style属性
目标	支持target属性