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

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

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

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

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

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

移动网站标记语言的演进

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

移动web相关标记语言的演进

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

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

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

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

基于XHTML

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

开始使用XHTML Basic

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

1
2
3
4
5
6
7
8
9
<?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的头声明,然后使用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
basebase
事件onblur, onfocus, onload, onunload, onreset, onsubmit, onchange
脚本script, noscript
样式支持style元素
样式属性支持style属性
目标支持target属性

不支持的内容:

  • 不支持外部CSS文件
  • 不支持嵌套table;
  • 不支持thead、tbody、tfood等;
  • 不支持name属性;
  • 不支持框架;
  • 不支持del、ins、basefont、center、dir、font、isindex、menu、sstricke、u等元素。

注意事项:

  • 对事件的支持依赖具体的浏览器支持,有些浏览器不一定支持这些事件;
  • webkit支持更多的事件
  • opera mini由于是基于自己的代理服务器,有些事件是不支持的,详见:JavaScript support in Opera Mini 4

XHTML MP

正如之前提到的,XHTML MP是对XHTML Basic的一个扩展,所以XHTML MP有更好的适用性。而XHTML MP对于Basic最大的优势就是支持外部样式文件——虽然这会导致多一个HTTP请求。

这里是一份关于XHTML MP和XHTML basic的对比表。

PS:事实上,WAP 2.0也就是XHTML MP,也就是说,WAP 2.0与WAP 1.0关系不大。

兼容性与现状

  1. 根据W3C的统计,现在绝大部分手机都支持WAP 2.0了,使用WAP 1.0的设备已经非常的少了;
  2. 根据观察,绝大多数网站的移动版本,都是采用XHTML MP规范;
  3. 大部分网站使用内联样式表,而不是外部样式文件;
  4. 非常多的Mobile版本页面采用table布局
  5. Opera mini可以在所有支持java的手机上使用,而Opera mini支持全部的(X)HTML特性。

所以,如果你想要开发一个移动版的网站,可以放心的使用XHTML Basic 1.1 /MP。

HTML5

Mobile Webkit是目前对标准支持最好的移动浏览器,它支持所有的XHTML特性,同时对HTML5的支持也非常棒。如果你的项目只针对iPhone 和(或) Android,完全可以使用HTML 5来编码。

事实上作为又一个很强劲的趋势,HTML 5众望所归要成为下一代的网页标准,Google、apple、opera和微软等互联网巨头一直在努力推广和推进HTML 5。opera认为HTML 5是统一移动互联网的关键。

总结与展望

正 如之前所说的,XHTML basic支持了大部分在XHTML中定义的基础特性,所以对于大部分前端开发人员来说,开发一个基于XHTML Basic 1.1或XHTML MP的网站并不困难。但是由于移动设备厂商和设备都非常的多,所以各个设备在对某个细节上可能会有差异。

W3C存在的最大价值,是为我们提供成熟而统一的解决方案,虽然XHTML MP成了事实上的Mobile 标准,但是显然XHTML Basic功不可没,如果说两者并存尚容易让我们混淆的话,希望在不久的将来,HTML 5能够成为移动互联网中事实上的标准,这无疑将大大减少我们的开发需求。

但 是由于现实中很难将所有的设备统一,这就造成实现方式的必然存在差异。可以预见,XHTML Basic /MP和HTML 5将成为两种并行的规范存在,我们不得不用XHTML Basic/MP为低端设备开发基础页面,同时使用HTML 5为iPhone和Android等系统实现富界面。

整理自:Mobile markup – XHTML Basic 1.1

参考:

  • XHTML MP (XHTML Mobile Profile) Introduction
  • http://www.w3.org/TR/xhtml-basic/

转载于:https://www.cnblogs.com/wqj0405/archive/2010/09/17/1829437.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275898.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端技术未来三年前瞻性思考

大家好&#xff0c;我是若川。今天推荐云谦大佬的一篇好文章&#xff0c;值得收藏。点击下方卡片关注我、加个星标&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列习惯从业务场景、用户体验、研发速度、维护成本四个维度来看框架等前端技术&a…

微信临时素材接口_在接口中表达临时性

微信临时素材接口When interacting with today’s graphic user interfaces (GUI), we experience a sense of realism. As of now, certain aspects of realism (for example animations) create the appearance that user interface graphics behave in accordance with the …

GitHub 支持上传视频文件啦!

大家好&#xff0c;我是若川。今天周六&#xff0c;分享一篇热点新闻。文章较短&#xff0c;预计5分钟可看完。近日 Github 宣布支持了视频上传功能&#xff0c;意味着&#xff0c;大家在提 issue 时可以携带视频了&#xff0c;这极大地提高了开发者和维护者的效率&#xff0c;…

ui设计 网络错误_UI设计人员常犯的10个错误

ui设计 网络错误重点 (Top highlight)1.不考虑范围 (1. Disregarding scope)It’s not uncommon for designers to introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business o…

小程序 node.js mysql_基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)...

高仿网易严选的微信小程序商城(微信小程序客户端)界面高仿网易严选商城(主要是2016年wap版)测试数据采集自网易严选商城功能和数据库参考ecshop服务端api基于&#xff2e;ode.jsThinkJSMySQL计划添加基于Vue.js的后台管理系统、PC版、&#xff37;ap版项目截图功能列表首页分类…

推荐几个干货超多助你成长的前端大佬

不得不说&#xff0c;如今比前些年学习资料多很多了。现在的前端公众号也挺多的&#xff0c;这里推荐几个前端大佬运营的公众号&#xff0c;都是聚焦前端垂直领域的优质公众号&#xff0c;关注这些公众号至少可以&#xff1a;1、了解现在前端技术发展情况和未来发展趋势&#x…

背景图片_背景

背景图片A designer’s journey is one that’s littered with many portfolios. Many of which have been reduced to a mere 404 error page, an abandoned link or another archive in the folders. Recently, while updating my portfolio, all the forgotten versions tha…

解决《Mobile绘制背景图片》中的问题

与PC平台的开发相比&#xff0c;Mobile的开发麻烦了许多&#xff0c;至少这是我的感觉 。 谢谢&#xff0d;&#xff0d;“ Fly Pig(^^)” 的文章《Mobile开发(绘制背景图片) 》 http://www.cnblogs.com/Bright-Liang/archive/2009/06/11/1501309.html 不过对于我这种低手来说&…

mysql 5.6.31 winx64_详解介绍MySQL5.6.31winx64.zip安装配置的图文教程

这篇文章主要介绍了MySQL5.6.31 winx64.zip 安装配置教程详解,非常不错&#xff0c;具有参考借鉴价值&#xff0c;需要的朋友可以参考下#1. 下载##2.解压到本地 修改必要配置my*.ini#3.mysql installadmin模式启动cmdcd mysql目录/bin执行安装&#xff1a; mysqld -install启动…

如何使用Gitbook创建html技术文档

故事背景&#xff1a;很多时候对外发布的产品需要一份html格式的文档 首先要了解的是 word直接转成html是不现实的&#xff0c;需要通过md文件来转换。 我们本节课讨论的Gitbook即是在MD基础上进行操作的。 所以任务一&#xff1a;安装typora软件&#xff0c;用于编辑md文件&am…

徒手撸了个markdown笔记平台

大家好&#xff0c;我是若川。今天分享一篇markdown笔记平台的项目文章。点击下方卡片关注我、加个星标&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列一、前言作为开发者&#xff0c;我觉的用markdown写文档是一件很酷的事情。在之前&#…

This week I’ve been forging background illustrations for my website, epdillon.com (launching soon). I’ve been using Adobe Illustrator to do all the major casting, dabbling in Figma only to temper the colours. Fresh from the design furnace, my hands are a…

pyqt控件显示重叠_Python编程:一个不错的基于PyQt的Led控件显示库,建议收藏学习...

1、控件说明在Github上&#xff0c;偶然发现了一个基于PyQt5的第三方Led指示灯控件库&#xff0c;使用起来非常方便&#xff0c;控件外观也比较漂亮&#xff0c;更难能可贵的是作者源代码写得比较简洁&#xff0c;仅仅才约200行左右&#xff0c;可以作为一个在PyQt中写自定义控…

编写高质量可维护的代码:优雅命名

大家好&#xff0c;我是若川。今天分享一篇关于如何命名更优雅的文章。点击下方卡片关注我、加个星标&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列本文首发于政采云前端团队博客&#xff1a;编写高质量可维护的代码&#xff1a;优雅命名ht…

powerpoint技巧_几乎每个PowerPoint都烂鸡蛋

powerpoint技巧Almost 20 years ago — 2001! — Seth Godin wrote an ebook called Really Bad Powerpoint (and how to avoid it). In that book he detailed all of the things that tend to go wrong in slide presentations.差不多20年前-2001年&#xff01; —塞斯戈丁(S…

认识mysql总结_从根上理解Mysql - 读后个人总结1-搜云库

初识 MySQL通信介绍MySQL 也是典型的 C / S 模型&#xff0c;分为客户端及服务端&#xff0c;服务端一般部署在远端服务器中&#xff0c;也可以部署至本地&#xff0c;然后客户端跟服务端通信则可以使用依赖网络的 TCP 长连接或 Unix-like 的系统下可以使用 Socket文件的形式通…

面试官问:你在项目中做过哪些安全防范措施?

大家好&#xff0c;我是若川。今天分享一篇安全相关的文章。点击下方卡片关注我、加个星标&#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列如果你被面试官问到这个问题&#xff0c;不要急于描述自己遇到的问题以及如何处理的&#xff0c;你得…

消灭病毒_消灭遗产

消灭病毒The year was 1995, I was 10 years of age. The number 1 single in the UK was Think Twice by Celine Dion, and Batman Forever was the highest grossing movie across the pond in the States. Manchester United, unfortunately, won their 3rd Premier League …

logcat崩溃_使用logcat抓取Android崩溃日志

一、安装jdkJDK网上教程非常多&#xff0c;此处不再赘述。(好像不装也没关系&#xff0c;未实测)二、工具列表a) adb包(v.1.0.31版本或以上&#xff0c;下文提供下载地址)b) logcat.bat文件(下文制作)三、安装adb(二选一)a) 放到任意位置(推荐)因为adb…

基于 Ubuntu 16.04 LTS 的 KDE neon 到达维护周期

随着 KDE neon 在 Ubuntu 18.04 LTS 发布&#xff0c;开发团队已经决定 放弃维护基于 Ubuntu 16.04 LTS版本&#xff0c;大多数用户预警将希望升级到基于 Ubuntu LTS 的 KDE neno 新版本。“去年KDE neno 被重新定位到 Ubuntu bionic / 18.04上&#xff0c;并且升级已经基本顺利…