本書全面、系統(tǒng)地講解了 HTML 5、CSS 3 和 jQuery Mobile 從 Web 界面設(shè)計(jì)到移動應(yīng)用開發(fā)的各種技術(shù)和知識點(diǎn)。本書難度適中,知識結(jié)構(gòu)嚴(yán)謹(jǐn),內(nèi)容由淺入深、從易到難,講解通俗易懂,并注重讀者興趣的培養(yǎng),在知識點(diǎn)介紹過程中配合大量案例進(jìn)行講解,以幫助讀者提高實(shí)戰(zhàn)技能。
本書共 20 章,分為四部分。第一部分為第 1 章內(nèi)容,介紹了移動互聯(lián)網(wǎng)與移動 Web 技術(shù)的相關(guān)知識,使讀者對移動 Web 應(yīng)用有一定的了解;第二部分為第 2 ~ 8 章,介紹了 HTML 5 各方面的知識點(diǎn),重點(diǎn)介紹了繪圖、音頻和視頻、新型表單等內(nèi)容;第三部分為第 9 ~ 13 章,介紹了 CSS 樣式各屬性的設(shè)置和使用方法,包括CSS 3 中新增的彈性盒模型、多列布局、動畫效果、漸變填充等內(nèi)容;第四部分為第 14 ~ 20 章,介紹了 jQueryMobile 的相關(guān)知識,重點(diǎn)介紹了 jQuery Mobile 的頁面、組件、主題、事件和插件等內(nèi)容,并通過實(shí)用案例講解了綜合運(yùn)用 HTML 5、CSS 3 和 jQuery Mobile 開發(fā)移動應(yīng)用的方法和技巧。
本書附贈 1 張 DVD 光盤,其中提供了所有案例的源文件、素材以及相關(guān)的視頻教程,為讀者學(xué)習(xí)提供方便。
本書適合 Web 設(shè)計(jì)與開發(fā)的初學(xué)者和愛好者自學(xué),也適合有一定 Web 前端開發(fā)基礎(chǔ)的網(wǎng)頁開發(fā)人員閱讀,同時(shí)也可作為各院校相關(guān)專業(yè)的教材使用。
本書從實(shí)際應(yīng)用的角度出發(fā),系統(tǒng)地介紹了 HTML 5、CSS 3 和 jQuery Mobile 的核心知識,采用實(shí)用案例與知識點(diǎn)相結(jié)合的方式,避免枯燥無味的基礎(chǔ)知識講解,使讀者能夠?qū)W以致用,掌握新的移動應(yīng)用開發(fā)技術(shù)。
● 內(nèi)容全面:本書內(nèi)容全面,涵蓋 HTML 5、CSS 3 和 jQuery Mobile 的各方面知識。
● 以案例為中心:脫離單純的知識點(diǎn)講解,通過案例與知識點(diǎn)相結(jié)合的方式進(jìn)行講解,生動貼切地詮釋了知識點(diǎn)在實(shí)際工作中的應(yīng)用。
● 語言簡潔流暢:本書語言流暢、圖文并茂,以大量的案例講解在實(shí)際移動應(yīng)用開發(fā)中的制作方法和技巧,避免了枯燥無味的說教。
● 視頻輔助教學(xué):將案例的制作與教學(xué)視頻相結(jié)合,使讀者更加容易理解所講內(nèi)容。
移動互聯(lián)網(wǎng)是繼互聯(lián)網(wǎng)之后的又一次信息技術(shù)革命,各種與之相應(yīng)的新技術(shù)、新應(yīng)用層出不窮,移動 Web 技術(shù)逐漸成為大家關(guān)注的新熱點(diǎn)之一。HTML 5 和 CSS 3 代表了下一代的 HTML 和 CSS 技術(shù),它們勢必推動互聯(lián)網(wǎng)的快速發(fā)展。特別是在移動互聯(lián)網(wǎng)領(lǐng)域,HTML 5 和 CSS 3 肩負(fù)著不可替代的使命,并且移動設(shè)備對 HTML 5 和CSS 3 都提供了良好的支持。jQuery Mobile 的宗旨是在各移動設(shè)備的瀏覽器平臺中形成統(tǒng)一、靈活、漸進(jìn)增強(qiáng)的系統(tǒng),它的簡略之處在于以純 HTML 結(jié)構(gòu)為中心的布局,頁面放置 Div 和其他標(biāo)準(zhǔn)的 HTML組件元素,這種結(jié)構(gòu)方式更容易集成其他的 Web 服務(wù),同時(shí)與 jQuery 的集成也將更加有利于移動框架的擴(kuò)展。
本書從實(shí)用的角度出發(fā),將知識點(diǎn)與應(yīng)用案例相結(jié)合,使讀者真正地掌握每個(gè)知識點(diǎn)并能夠?qū)W以致用。通過本書希望能夠幫助讀者輕松地掌握 HTML 5、CSS 3 和 jQuery Mobile 的核心知識,快速進(jìn)入移動應(yīng)用制作開發(fā)領(lǐng)域。
本書內(nèi)容
本書主要圍繞移動應(yīng)用開發(fā)的核心技術(shù)展開,全面介紹了 HTML 5、CSS 3 和 jQuery Mobile的核心知識點(diǎn),通過實(shí)用案例與知識點(diǎn)相結(jié)合的方式,使讀者能夠更容易理解和輕松應(yīng)用,并且還在難以理解的地方加以提示進(jìn)行點(diǎn)撥。全書共分 20 章,每章的主要內(nèi)容如下。
第 1 章 移動設(shè)備與 Web 技術(shù),本章向讀者介紹了移動互聯(lián)網(wǎng)、智能手機(jī)和移動 Web 應(yīng)用的相關(guān)知識,使讀者對移動應(yīng)用有更加深入的了解和認(rèn)識。
第 2 章 初識 HTML 5,本章全面介紹了 HTML 5 的基礎(chǔ)知識,包括 HTML 5 的語法、新增標(biāo)簽,讀者能夠?qū)?HTML 5 有全面的了解。
第 3 章 使用網(wǎng)頁基本標(biāo)簽,本章向讀者介紹了文字、段落、列表、圖片和超鏈接這些網(wǎng)頁中常見元素的相關(guān)標(biāo)簽和其設(shè)置方法。
第 4 章 使用 HTML 5 結(jié)構(gòu)標(biāo)簽,本章介紹了 HTML 5 中新增的文檔結(jié)構(gòu)標(biāo)簽和語義模塊標(biāo)簽,并通過案例的制作,使讀者能夠理解并掌握 HTML 5 結(jié)構(gòu)標(biāo)簽的作用和使用方法。
第 5 章 使用 HTML 5 繪圖,canvas 元素是 HTML 5 的亮點(diǎn)之一,通過使用 canvas 元素可以在網(wǎng)頁中繪制出各種幾何圖形,本章詳細(xì)介紹了使用 HTML 5 中的 canvas 元素在網(wǎng)頁中繪制圖形、文字、漸變的方法。
第 6 章 使用 HTML 5 在頁面中嵌入視頻和音頻,多媒體的應(yīng)用也是 HTML 5 的一大亮點(diǎn),本章詳細(xì)介紹了 HTML 5 中 Video 與 Audio 元素的使用方法和屬性設(shè)置技巧。
第 7 章 HTML 5 中的表單,本章詳細(xì)介紹了傳統(tǒng)的表單元素和 HTML 5 中新增的表單元素,通過新增的 HTML 5 表單元素可以在移動應(yīng)用中創(chuàng)建更加友好的表單應(yīng)用。
第 8 章 HTML 5 本 地 存 儲, 本 章 介 紹 了 HTML 5 中 的 兩 種 本 地 存 儲 方 式, 分 別 是 WebStorage 和 Web SQL 數(shù)據(jù)庫,通過使用 HTML 5 的本地存儲功能,可以更輕松地開發(fā)移動應(yīng)用程序。
第 9 章 CSS 樣式基礎(chǔ),本章向讀者介紹了有關(guān) CSS 樣式的基礎(chǔ)知識,包括 CSS 樣式的語法、CSS 選擇器、CSS 3 新增的選擇器以及應(yīng)用 CSS 樣式的方法。
第 10 章 文字與背景設(shè)置,本章主要介紹了對文字與背景進(jìn)行設(shè)置的相關(guān) CSS 屬性和設(shè)置方法,以及使用 CSS 3 新增的文字與背景相關(guān)屬性所實(shí)現(xiàn)的效果。
第 11 章 邊框與超鏈接設(shè)置,本章主要介紹了對元素邊框和超鏈接進(jìn)行設(shè)置的相關(guān) CSS 屬性 移動互聯(lián)網(wǎng)之路——HTML 5+CSS 3+jQuery Mobile APP 與移動網(wǎng)站設(shè)計(jì)從入門到精通和設(shè)置方法,并且對 CSS 3 中新增的邊框樣式屬性進(jìn)行了詳細(xì)的講解。
第 12 章 CSS 3 盒模型和界面設(shè)計(jì),本章對傳統(tǒng)的 CSS 盒模型與 CSS 3 新增的彈性盒模型進(jìn)行了詳細(xì)的講解,并且介紹了網(wǎng)頁元素的各種定位方法和用戶界面設(shè)計(jì)屬性。
第 13 章 CSS 3 動畫效果,動畫效果是 CSS 3 最突出的亮點(diǎn),通過對相關(guān) CSS 屬性的設(shè)置,即可輕松地在網(wǎng)頁中實(shí)現(xiàn)各種動畫效果。本章詳細(xì)向讀者介紹了 CSS 3 各種動畫效果的制作方法和技巧。
第 14 章 jQuery 和 jQuery Mobile 基礎(chǔ),本章向讀者介紹了 JavaScript、jQuery 和 jQueryMobile 的相關(guān)基礎(chǔ)知識,使讀者能更好地理解這三者之間的聯(lián)系。
第 15 章 jQuery Mobile 頁面,本章向讀者介紹了 jQuery Mobile 頁面以及各部分結(jié)構(gòu)的創(chuàng)建和設(shè)置方法,并且還介紹了結(jié)構(gòu)化 jQuery Mobile 頁面內(nèi)容的方法。
第 16 章 jQuery Mobile 頁面組件,本章向讀者介紹了 jQuery Mobile 中的各種頁面組件的使用和設(shè)置方法,包括按鈕組件、表單組件、列表組件等。
第 17 章 使用 jQuery Mobile 主題,本章向讀者介紹了 jQurey Mobile 頁面主題的相關(guān)知識,包括如何使用默認(rèn)主題、自定義主題等,并且還介紹了使用 ThemeRoller 創(chuàng)建 jQuery Mobile 主題的方法。
第 18 章 使用 jQuery Mobile 事件,本章向讀者介紹了 jQuery Mobile 中常用事件的設(shè)置和使用方法,通過使用 jQuery Mobile 事件可以輕松地實(shí)現(xiàn)各種交互效果。
第 19 章 使用 jQuery Mobile 插件,本章通過多款 jQuery Mobile 實(shí)用插件的介紹,使讀者能夠輕松地在 jQuery Mobile 頁面中創(chuàng)建常見的特效。
第 20 章 移動應(yīng)用開發(fā)實(shí)戰(zhàn),本章通過 3 個(gè)實(shí)用的移動應(yīng)用案例進(jìn)行制作講解,向讀者介紹了綜合應(yīng)用 HTML 5、CSS 3 和 jQuery Mobile 開發(fā)移動應(yīng)用的方法。
本書特點(diǎn)
本書從實(shí)際應(yīng)用的角度出發(fā),系統(tǒng)地介紹了 HTML 5、CSS 3 和 jQuery Mobile 的核心知識,采用實(shí)用案例與知識點(diǎn)相結(jié)合的方式,避免枯燥無味的基礎(chǔ)知識講解,使讀者能夠?qū)W以致用,掌握移動應(yīng)用開發(fā)技術(shù)。
● 內(nèi)容全面:本書內(nèi)容全面,涵蓋 HTML 5、CSS 3 和 jQuery Mobile 的各方面知識。
● 以案例為中心:脫離單純的知識點(diǎn)講解,通過案例與知識點(diǎn)相結(jié)合的方式進(jìn)行講解,生動貼
切地詮釋了知識點(diǎn)在實(shí)際工作中的應(yīng)用。
● 語言簡潔流暢:本書語言流暢、圖文并茂,以大量的案例講解在實(shí)際移動應(yīng)用開發(fā)中的制作
方法和技巧,避免了枯燥無味的說教。
● 視頻輔助教學(xué):將案例的制作與教學(xué)視頻相結(jié)合,使讀者更加容易理解所講內(nèi)容。
本書作者
本書由李曉斌編著,另外張曉景、解曉麗、孫慧、程雪翩、劉明秀、陳燕、胡丹丹、遆玉婷、劉強(qiáng)、范明、鄭竣天、王明、史建華、于海波、孟權(quán)國、張國勇、賈勇、鄒志連、肖閡、王延楠、林學(xué)遠(yuǎn)、黃尚智、陶瑪麗、王大遠(yuǎn)、尚丹丹、劉明明、張航、張偉等人也參與了部分編寫工作。本書在寫作過程中力求嚴(yán)謹(jǐn),但書中難免有疏漏和不足之處,希望廣大讀者批評指正。
編 者
李曉斌,從事網(wǎng)頁設(shè)計(jì)開發(fā)有十五年的時(shí)間。一直致力于提高網(wǎng)站的安全性。對HTML5的功能有深刻解讀。并熟知HTML5在網(wǎng)頁中的應(yīng)用。同時(shí)將HTML5應(yīng)用到手機(jī)移動端的技術(shù)有深刻體會。參與多項(xiàng)案例的操作,并編寫同類暢銷書多本。
第1章 移動設(shè)備與Web技術(shù)
1.1 了解移動互聯(lián)網(wǎng) 1
1.1.1 移動互聯(lián)網(wǎng)的特點(diǎn) 1
1.1.2 移動互聯(lián)網(wǎng)的發(fā)展方向 2
1.2 智能手機(jī)與手機(jī)瀏覽器 2
1.2.1 智能手機(jī)的發(fā)展 2
1.2.2 智能手機(jī)系統(tǒng) 3
1.2.3 智能手機(jī)瀏覽器 5
1.2.4 移動Web瀏覽器的特點(diǎn) 6
1.3 關(guān)于移動Web應(yīng)用 6
1.3.1 移動Web應(yīng)用的發(fā)展 6
1.3.2 基于Web的應(yīng)用開發(fā) 7
1.3.3 基于HTML 5的移動應(yīng)用 7
1.3.4 移動應(yīng)用開發(fā)框架 8
1.4 移動應(yīng)用開發(fā)注意事項(xiàng) 8
1.4.1 了解移動設(shè)備的屏幕尺寸和分辨率 8
1.4.2 確定移動應(yīng)用的內(nèi)容 8
1.4.3 簡潔的HTML、CSS和JavaScript代碼 9
1.4.4 測試移動應(yīng)用 9
1.5 本章小結(jié) 9
第2章 初識HTML 5
2.1 了解HTML 5 10
2.1.1 HTML的發(fā)展 10
2.1.2 HTML 5概述 11
2.1.3 HTML 5的優(yōu)勢 11
2.2 HTML 5語法結(jié)構(gòu) 12
2.2.1 HTML 5文檔結(jié)構(gòu) 12
2.2.2 HTML 5的基本語法 13
2.2.3 HTML 5中精簡的頭部 14
2.3 HTML 5中新增的標(biāo)簽 14
2.3.1 結(jié)構(gòu)標(biāo)簽 14
2.3.2 文本標(biāo)簽 15
2.3.3 應(yīng)用和輔助標(biāo)簽 15
2.3.4 進(jìn)度標(biāo)簽 15
2.3.5 交互性標(biāo)簽 16
2.3.6 在文檔和應(yīng)用中使用的標(biāo)簽 16
2.3.7 標(biāo)簽 16
2.3.8 其他標(biāo)簽 16
2.4 HTML 5的標(biāo)準(zhǔn)屬性 17
2.5 HTML 5的事件屬性 17
2.6 本章小結(jié) 18
第3章 使用網(wǎng)頁基本標(biāo)簽
3.1 設(shè)置文字效果 19
3.1.1 文字樣式標(biāo)簽 19
3.1.2 文字加粗和標(biāo)簽 21
3.1.3 文字傾斜和標(biāo)簽 21
3.1.4 文字
了解移動互聯(lián)網(wǎng)
移動互聯(lián)網(wǎng)是所有移動應(yīng)用的基礎(chǔ),越來越多的人在購物、用餐、出行、工作時(shí),都習(xí)慣性地掏出手機(jī),查看信息、查找位置、分享感受、協(xié)同工作等,移動互聯(lián)網(wǎng)給人們的生活方式帶來了翻天覆地的變化。
1.1.1 移動互聯(lián)網(wǎng)的特點(diǎn)
移動互聯(lián)網(wǎng)是使用智能手機(jī)、平板電腦等移動終端,可同時(shí)提供語音、數(shù)據(jù)、多媒體等業(yè)務(wù)應(yīng)用的開放式互聯(lián)網(wǎng)絡(luò)。移動互聯(lián)網(wǎng)為視聽節(jié)目、游戲、電子書籍等數(shù)字內(nèi)容的傳播注入了新的活力,也為用戶消費(fèi)數(shù)字內(nèi)容提供了多樣化的選擇。在當(dāng)今社會,移動互聯(lián)網(wǎng)已不僅僅是一種普通的通信工具,而更多的是人們的“得力助手”。移動互聯(lián)網(wǎng)相較于傳統(tǒng)互聯(lián)網(wǎng),具有便捷性、智能性、個(gè)性化的特點(diǎn)。
●● 便捷性
便捷性不僅體現(xiàn)在用戶攜帶的便捷性,更表現(xiàn)在用戶使用時(shí)間的便捷性,可隨時(shí)隨地非常方便地接入無線網(wǎng)絡(luò)。
●● 智能性
移動互聯(lián)網(wǎng)相比較傳統(tǒng)互聯(lián)網(wǎng),在操作方面更加智能,可通過手動、語音、智能手機(jī)自動識別獲取等功能實(shí)現(xiàn)信息收集進(jìn)而進(jìn)行智能機(jī)操作。
●● 個(gè)性化
移動互聯(lián)網(wǎng)可在用戶許可的情況下自動獲取關(guān)于用戶的位置、歷史記錄、日常使用習(xí)慣,并對此進(jìn)行后臺處理、分析,從而將最為符合用戶習(xí)慣的個(gè)性化內(nèi)容呈現(xiàn)給用戶
……