HTML5基礎(chǔ)知識(shí) 核心技術(shù)與前沿案例 劉歡 pdf掃描版

HTML5基礎(chǔ)知識(shí)核心技術(shù)與前沿案例是一本HTML5入門書籍，由劉歡編著。本書擁有詳細(xì)的HTML5、CSS3、JavaScript基礎(chǔ)知識(shí)，可以幫助你快速入門前端開發(fā)，全書前沿案例涵蓋初中級(jí)HTML5開發(fā)者遇到的幾乎所有實(shí)戰(zhàn)問(wèn)題，并滲透各種交互設(shè)計(jì)理念，并且書中知識(shí)還兼顧了PC端和移動(dòng)端開發(fā)，能夠讓讀者能夠輕松地學(xué)習(xí)基礎(chǔ)知識(shí)，有效掌握各種核心技巧，快速上手前沿應(yīng)用開發(fā)，并通過(guò)HTML5發(fā)現(xiàn)交互設(shè)計(jì)的樂(lè)趣。

內(nèi)容介紹

《HTML5基礎(chǔ)知識(shí)核心技術(shù)與前沿案例》是一本引導(dǎo)初、中級(jí)學(xué)習(xí)者深入了解并有效掌握HTML5核心技巧的技術(shù)實(shí)戰(zhàn)書籍，全書采用“基礎(chǔ)知識(shí)+案例驅(qū)動(dòng)”的雙軌模式，精心安排了大量經(jīng)典的HTML5設(shè)計(jì)實(shí)戰(zhàn)案例，包括頁(yè)面元素與布局、動(dòng)畫與動(dòng)效、圖形與圖像、交互操作、頁(yè)面組件、音頻與視頻、響應(yīng)式設(shè)計(jì)等，并精選了微信小游戲、創(chuàng)意網(wǎng)站等綜合性的前沿交互應(yīng)用。實(shí)例基本涵蓋了初、中級(jí)學(xué)習(xí)者在實(shí)戰(zhàn)中幾乎可能遇到的所有問(wèn)題，展示了各種流行的互動(dòng)設(shè)計(jì)理念，讓讀者能夠輕松地學(xué)習(xí)基礎(chǔ)知識(shí)，有效掌握各種核心技巧，快速上手前沿應(yīng)用開發(fā)，并通過(guò)HTML5發(fā)現(xiàn)交互設(shè)計(jì)的樂(lè)趣。

HTML5基礎(chǔ)知識(shí)核心技術(shù)與前沿案例章節(jié)目錄

第一部分HTML5基礎(chǔ)

第1章初探HTML5：制作一份邀請(qǐng)函010

1．1開發(fā)前的準(zhǔn)備工作010

1．1．1制定首個(gè)學(xué)習(xí)目標(biāo)010

1．1．2準(zhǔn)備開發(fā)環(huán)境011

1．2制作HTML頁(yè)面012

1．2．1創(chuàng)建首個(gè)HTML5頁(yè)面012

1．2．2增加必要的頁(yè)面元素014

1．2．3頁(yè)面中那些看不見(jiàn)的代碼015

1．3頁(yè)面的美化015

1．3．1制作邀請(qǐng)函的頁(yè)面背景015

1．3．2調(diào)整邀請(qǐng)函的內(nèi)容區(qū)域位置018

1．3．3調(diào)整邀請(qǐng)函的文字字體與字號(hào)020

1．3．4制作邀請(qǐng)函的按鈕021

1．3．5創(chuàng)建一個(gè)外部CSS文件022

1．4為頁(yè)面創(chuàng)建交互024

1．4．1創(chuàng)建按鈕的JavaScript交互024

1．4．2制作還未結(jié)束：頁(yè)面的移動(dòng)化026

第2章HTML5新手詳解028

2．1 HTML代碼基礎(chǔ)028

2．1．1 HTML基礎(chǔ)語(yǔ)法028

2．1．2頁(yè)面根元素029

2．1．3文檔元數(shù)據(jù)031

2．1．4區(qū)塊元素034

2．1．5分組內(nèi)容元素039

2．2 HTML常用元素042

2．2．1文本042

2．2．2表單043

2．2．3表格047

2．2．4 WAI-ARIA 050

第3章CSS3新手詳解052

3．1 CSS代碼基礎(chǔ)052

3．1．1 CSS基礎(chǔ)語(yǔ)法052

3．1．2繼承054

3．1．3選擇器057

3．2 CSS3常用屬性059

3．2．1文本和字體059

3．2．2邊框與背景062

3．2．3元素定位065

3．2．4框模型068

3．2．5列表071

3．3 CSS3常用效果與技巧075

3．3．1陰影效果075

3．3．2 2D與3D效果077

3．3．3優(yōu)先級(jí)078

第4章JavaScript新手詳解080

4．1 JavaScript代碼基礎(chǔ)080

4．1．1如何調(diào)試JavaScript？080

4．1．2為代碼添加注釋081

4．1．3創(chuàng)建一個(gè)簡(jiǎn)單的變量082

4．1．4幾種常用的JavaScript運(yùn)算符083

4．1．5 JavaScript中的條件語(yǔ)句085

4．1．6 JavaScript中的循環(huán)語(yǔ)句087

4．2 JavaScript編程進(jìn)階089

4．2．1數(shù)組及其操作089

4．2．2日期和時(shí)間091

4．2．3初涉函數(shù)092

4．2．4函數(shù)的變量作用域094

4．2．5 Object簡(jiǎn)介095

4．2．6 JavaScript的DOM操作097

4．2．7 DOM事件處理100

4．2．8利用JavaScript實(shí)現(xiàn)HTML5拖放101

第5章移動(dòng)端HTML5開發(fā)詳解103

5．1桌面端開發(fā)概述103

5．1．1桌面端和移動(dòng)端有何不同？103

5．1．2響應(yīng)式設(shè)計(jì)還是移動(dòng)版網(wǎng)站？104

5．2移動(dòng)端開發(fā)技巧105

5．2．1 Viewport設(shè)置105

5．2．2百分比布局106

5．2．3 Flexbox：輕松實(shí)現(xiàn)彈性布局111

5．2．4 Media Query 114

5．2．5雪碧圖116

5．2．6圖標(biāo)字體119

5．2．7移動(dòng)端交互121

5．2．8移動(dòng)端調(diào)試122

5．2．9移動(dòng)端其他技巧124

第6章事半功倍：運(yùn)用流行開源類庫(kù)126

6．1開源類庫(kù)jQuery介紹126

6．1．1強(qiáng)大的jQuery 126

6．1．2 jQuery選擇器128

6．1．3 jQuery的屬性和DOM操作130

6．1．4 jQuery動(dòng)態(tài)效果132

6．1．5 jQuery事件134

6．1．6 jQuery的優(yōu)缺點(diǎn)136

6．2其他開源類庫(kù)介紹136

6．2．1使用jQuery Mobile開發(fā)移動(dòng)站點(diǎn)136

6．2．2 Zepto——移動(dòng)端的jQuery 137

6．2．3前端開發(fā)框架BootStrap 138

6．2．4設(shè)計(jì)工具包Flat UI 139

6．2．5瀏覽器檢測(cè)工具M(jìn)odernizr 140

6．2．6數(shù)據(jù)可視化工具D3 141

6．2．7使用Hammer輕松控制觸摸手勢(shì)141

6．2．8前端在線編輯工具142

第7章HTML5與周邊編程語(yǔ)言、軟件143

7．1 HTML5與Flash 143

7．1．1 HTML5與Flash的結(jié)合143

7．1．2使用Google Swiffy進(jìn)行Flash轉(zhuǎn)換145

7．2 HTML5與其他周邊語(yǔ)言和軟件146

7．2．1 HTML5與應(yīng)用開發(fā)146

7．2．2 HTML5與Illustrator的結(jié)合148

7．2．3 HTML5與Photoshop的結(jié)合149

7．2．4 HTML5開發(fā)桌面端應(yīng)用151

第二部分?HTML5前沿經(jīng)典應(yīng)用篇

第8章HTML5頁(yè)面元素與布局153

8．1頁(yè)面元素與布局核心技巧153

8．2 HTML5布局基礎(chǔ)153

8．2．1圖文混排與題圖文字布局154

8．2．2 Hero Unit圖標(biāo)題文混排156

8．2．3兩列均分布局159

8．2．4格子布局164

8．2．5多列等高布局168

8．3 HTML5布局進(jìn)階170

8．3．1兩列自適應(yīng)布局171

8．3．2三列自適應(yīng)布局175

8．3．3瀑布流布局179

第9章HTML5動(dòng)畫與動(dòng)效182

9．1動(dòng)畫與動(dòng)效核心技巧182

9．2 CSS3動(dòng)畫與動(dòng)效182

9．2．1按鈕元素動(dòng)畫效果183

9．2．2圖標(biāo)元素動(dòng)畫效果186

9．2．3頁(yè)面切換動(dòng)畫效果192

9．2．4加載動(dòng)畫效果198

9．2．5逐幀動(dòng)畫效果204

9．2．6 3D翻頁(yè)動(dòng)畫效果208

9．3 JavaScript動(dòng)畫與動(dòng)效211

9．3．1 Canvas粒子動(dòng)畫效果211

9．3．2 GSAP類庫(kù)動(dòng)畫效果214

第10章HTML5圖形與圖像217

10．1圖形與圖像核心技巧217

10．2 CSS3圖形與圖像繪制218

10．2．1關(guān)閉按鈕繪制218

10．2．2菜單圖標(biāo)繪制219

10．2．3三角圖標(biāo)繪制221

10．2．4漸變色繪制225

10．2．5 Pattern圖案繪制227

10．2．6鋸齒圖形繪制229

10．3 Canvas圖形與圖像繪制231

10．3．1 Canvas圖形繪制231

10．3．2 Canvas像素控制235

10．4 SVG圖形與圖像繪制237

10．4．1 SVG圖形繪制237

10．4．2 SVG圖像遮罩242