移動網站開發——標記語言

移動互聯網被稱為“第五次科技革命”,而隨著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.pswp.cn/news/275898.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275898.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275898.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mysql適配器_MySQL適配器PyMySQL詳解

import pymysqlimport datainfoimport time#獲取參數host datainfo.hostusername datainfo.usernamepassword datainfo.passworddatabase datainfo.dbprint()#測試數據庫連接def testconnect():#打開數據庫鏈接db pymysql.connect(host,username,password,database)#使用c…

獲取當前Tomcat實例的端口

有時需要在當前代碼中獲取當前Server實例的端口號, 通過HttpServletRequest請求可以, 但有時也需要在沒有請求的情況下獲取到端口號. 用以下方法是可以獲取到的: public int getHttpPort() {try {MBeanServer server;if (MBeanServerFactory.findMBeanServer(null).size() >…

前端技術未來三年前瞻性思考

大家好&#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 …

程序員,當你寫程序寫累了怎么辦。

記得泡泡網的CEO李想說過這樣一句話&#xff0c;大體就是&#xff1a;做一件事情&#xff0c;一開始是興趣使然&#xff0c;然而當三分鐘熱度過去之后&#xff0c;就要靠毅力支撐自己來完成它。至少我到現在是能非常深刻的體會這句話。一開始再怎么喜歡做一件事&#xff0c;要想…

mysql 導致iis 假死_解決IIS無響應假死狀態

1 查看服務器iis的w3wp.exe對應的應用程序池在IIS6下&#xff0c;經常出現w3wp的內存占用不能及時釋放&#xff0c;從而導致服務器響應速度很慢。今天研究了一下&#xff0c;可以做以下配置&#xff1a;1、在IIS中對每個網站進行單獨的應用程序池配置。即互相之間不影響。2、設…

Swift 5將強制執行內存獨占訪問

Swift 5將帶來改進的Swift程序內存安全性&#xff0c;在程序的其他部分修改變量時&#xff0c;不允許通過其他變量名來訪問這些變量。這個變更對現有應用程序的行為和Swift編譯器本身都有重要影響。Swift 5將帶來改進的Swift程序內存安全性&#xff0c;在程序的其他部分修改變量…

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版項目截圖功能列表首頁分類…

前端菜鳥筆記 Day-5 CSS 高級

文章大綱來源&#xff1a;【Day 5】CSS 高級 CSS 選擇器CSS 拓展CSS 單位CSS 參考手冊CSS 選擇器 內容引用&#xff1a;CSS 選擇器 元素選擇器 html { ... } 復制代碼選擇器分組 h2, p { ... } 復制代碼類選擇器 .important { ... } p.warning { ... } .important.warning { .…

推薦幾個干貨超多助你成長的前端大佬

不得不說&#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…

【轉】Vector與ArrayList區別

在寫java的時候&#xff0c;基本上都喜歡用arraylist&#xff0c;甚至我都不知道有個vector的存在。查了一下發現又是線程安全問題。。。咋個線程安全天天圍著我轉呢。。。多得阿里巴巴&#xff0c;讓我開始認識java的所謂線程安全問題。 the following is from&#xff1a;htt…