HTML5 CSS3 jQuery Mobile Bootstrap開(kāi)發(fā)APP從入門(mén)到精圖書(shū)

時(shí)間：2023-02-17 11:26:01 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-02-17 11:26:01 來(lái)源：營(yíng)銷百科

HTML5 CSS3 jQuery Mobile Bootstrap開(kāi)發(fā)APP從入門(mén)到精圖書(shū)目錄：第1章 HTML5快速入門(mén) 1

1.1 HTML5概述 1

1.2 HTML5的文檔結(jié)構(gòu) 3

1.2.1 文檔類型說(shuō)明 3

1.2.2 HTML標(biāo)記 3

1.2.3 頭標(biāo)記head 3

1.2.4 網(wǎng)頁(yè)的主體標(biāo)記body 7

1.2.5 頁(yè)面注釋標(biāo)記!-- -- 7

1.3 HTML5文件的編寫(xiě)方法 8

1.3.1 使用記事本手工編寫(xiě)HTML文件 8

1.3.2 使用Dreamweaver CC編寫(xiě)HTML文件9

1.4 HTML5語(yǔ)法的新變化 11

1.4.1 標(biāo)簽不再區(qū)分大小寫(xiě) 11

1.4.2 允許屬性值不使用引號(hào) 12

1.4.3 允許部分屬性值的屬性省略 12

1.5 專家解惑 13

第2章 HTML5網(wǎng)頁(yè)中的文本和圖像 15

2.1 添加文本 15

2.1.1 普通文本 15

2.1.2 特殊文字符號(hào) 16

2.1.3 文本特殊樣式 17

2.2 文本排版 19

2.2.1 換行標(biāo)記br/與段落標(biāo)記p 19

2.2.2 標(biāo)題標(biāo)記h1～h6 22

2.3 文字列表 23

2.3.1 建立無(wú)序列表ul 23

2.3.2 建立有序列表ol 24

2.4 網(wǎng)頁(yè)中的圖像img 25

2.4.1 網(wǎng)頁(yè)中支持的圖片格式 26

2.4.2 使用路徑 26

2.4.3 網(wǎng)頁(yè)中插入圖像標(biāo)記img 28

2.5 綜合實(shí)例—圖文并茂房屋裝飾裝修網(wǎng)頁(yè) 31

2.6 專家解惑 33

第3章 用HTML5建立超鏈...

第3章用HTML5建立超鏈接 34

3.1URL的概念 34

3.1.1URL的格式 34

3.1.2URL的類型 35

3.2超鏈接標(biāo)記a 36

3.2.1設(shè)置文本和圖片的超鏈接 36

3.2.2超鏈接指向的目標(biāo)類型 37

3.2.3設(shè)置以新窗口顯示超鏈接頁(yè)面 39

3.3創(chuàng)建熱點(diǎn)區(qū)域 40

3.4浮動(dòng)框架iframe 41

3.5綜合實(shí)例—用Dreamweaver精確定位熱點(diǎn)區(qū)域 42

3.6專家解惑 45

第4章用HTML5創(chuàng)建表格 46

4.1表格基本結(jié)構(gòu)及操作 46

4.1.1表格基本結(jié)構(gòu) 46

4.1.2合并單元格48

4.2完整的表格標(biāo)記 52

4.3綜合實(shí)例—制作計(jì)算機(jī)報(bào)價(jià)單 54

4.4專家解惑 56

第5章使用表單 58

5.1表單概述 58

5.2表單基本元素的使用 59

5.2.1單行文本輸入框text 59

5.2.2多行文本框標(biāo)記textarea 60

5.2.3密碼域password 61

5.2.4單選按鈕radio 61

5.2.5復(fù)選框checkbox 62

5.2.6選擇列表標(biāo)記select 63

5.2.7普通按鈕button 64

5.2.8提交按鈕submit 65

5.2.9重置按鈕reset 66

5.3表單高級(jí)元素的使用 67

5.3.1url屬性 67

5.3.2eamil屬性 68

5.3.3date和Times 69

5.3.4number屬性 70

5.3.5range屬性 71

5.3.6required屬性 72

5.4綜合實(shí)例—?jiǎng)?chuàng)建用戶反饋表單 73

5.5專家解惑 74

第6章HTML5中的音頻和視頻 75

6.1audio標(biāo)記 75

6.1.1audio標(biāo)記概述 75

6.1.2audio標(biāo)記的屬性 76

6.1.3音頻解碼器77

6.1.4audio標(biāo)記瀏覽器的支持情況 77

6.2video標(biāo)記 77

6.2.1video標(biāo)記概述 77

6.2.2video標(biāo)記的屬性 78

6.2.3視頻解碼器 79

6.2.4video標(biāo)記瀏覽器的支持情況 79

6.3音頻和視頻中的方法 80

6.3.1canPlayType()方法 80

6.3.2load()方法 81

6.3.3play()方法和pause()方法 82

6.4音頻和視頻中的屬性 83

6.4.1autoplay屬性 83

6.4.2buffered屬性 84

6.4.3controls屬性 86

6.4.4currentSrc屬性 87

6.5專家解惑 88

第7章HTML5繪制圖形 90

7.1canvas概述 90

7.1.1添加canvas元素90

7.1.2繪制矩形 91

7.2繪制基本形狀 92

7.2.1繪制圓形 92

7.2.2使用moveTo與lineTo繪制直線 94

7.2.3使用bezierCurveTo繪制貝濟(jì)埃曲線 95

7.3繪制漸變圖形 97

7.3.1繪制線性漸變 98

7.3.2繪制徑向漸變 99

7.4繪制變形圖形 101

7.4.1變換原點(diǎn)坐標(biāo) 101

7.4.2圖形縮放 102

7.4.3旋轉(zhuǎn)圖形 103

7.5圖形組合 105

7.6繪制帶陰影的圖形 107

7.7使用圖像 108

7.7.1繪制圖像 108

7.7.2圖像平鋪 110

7.7.3圖像裁剪 112

7.7.4像素處理 113

7.8繪制文字 116

7.9圖形的保存與恢復(fù) 117

7.9.1保存與恢復(fù)狀態(tài) 117

7.9.2保存文件 119

7.10綜合實(shí)例1—繪制商標(biāo) 120

7.11綜合實(shí)例2—繪制火柴棒人物 122

7.12綜合實(shí)例3—繪制時(shí)鐘 126

7.13專家解惑 129

第8章地理定位、離線Web應(yīng)用和Web存儲(chǔ) 131

8.1獲取地理位置 131

8.1.1地理地位的原理 131

8.1.2地理定位的函數(shù) 132

8.1.3指定緯度和經(jīng)度坐標(biāo) 132

8.1.4目前瀏覽器對(duì)地理定位的支持情況 134

8.2HTML5離線Web應(yīng)用 134

8.2.1新增的本地緩存 134

8.2.2本地緩存的管理者—manifest文件 134

8.2.3瀏覽器網(wǎng)頁(yè)緩存與本地緩存的區(qū)別 136

8.2.4目前瀏覽器對(duì)Web離線應(yīng)用的支持情況 136

8.3Web存儲(chǔ) 136

8.3.1本地存儲(chǔ)和Cookies的區(qū)別 137

8.3.2在客戶端存儲(chǔ)數(shù)據(jù) 137

8.3.3sessionStorage函數(shù) 137

8.3.4localStorage函數(shù) 139

8.3.5目前瀏覽器對(duì)Web存儲(chǔ)的支持情況 141

8.4專家解惑 141

第9章CSS3快速入門(mén) 142

9.1CSS3介紹 142

9.1.1CSS3功能 142

9.1.2CSS3發(fā)展歷史 143

9.1.3瀏覽器與CSS3 143

9.2編輯和瀏覽CSS 144

9.2.1CSS基礎(chǔ)語(yǔ)法 144

9.2.2使用記事本手工編寫(xiě)CSS文件 145

9.2.3使用DreamweaverCC創(chuàng)建CSS文件 146

9.3在HTML5中使用CSS3的方法 147

9.3.1行內(nèi)樣式 148

9.3.2內(nèi)嵌樣式 149

9.3.3鏈接樣式 150

9.3.4導(dǎo)入樣式 151

9.3.5優(yōu)先級(jí)問(wèn)題 153

9.4CSS3選擇器 155

9.4.1標(biāo)記選擇器 156

9.4.2類選擇器 157

9.4.3ID選擇器 158

9.4.4全局選擇器 160

9.4.5組合選擇器 161

9.4.6繼承選擇器 162

9.4.7偽類 164

9.4.8屬性選擇器 165

9.4.9結(jié)構(gòu)偽類選擇器 167

9.4.10UI元素狀態(tài)偽類選擇器 168

9.5選擇器聲明 170

9.5.1集體聲明 170

9.5.2多重嵌套聲明 171

9.6綜合實(shí)例1—制作五彩標(biāo)題 172

9.7綜合實(shí)例2—制作新聞菜單 175

9.8專家解惑 178

第10章CSS3字體與段落屬性 180

10.1字體屬性 180

10.1.1字體font-family 180

10.1.2字號(hào)font-size 181

10.1.3字體風(fēng)格font-style 183

10.1.4加粗字體font-weight 184

10.1.5小寫(xiě)字母轉(zhuǎn)為大寫(xiě)字母font-variant 185

10.1.6字體復(fù)合屬性font 186

10.1.7字體顏色color 187

10.2文本高級(jí)樣式 189

10.2.1陰影文本text-shadow 189

10.2.2溢出文本text-overflow 190

10.2.3控制換行word-wrap 192

10.2.4保持字體尺寸不變font-size-adjust 193

10.3段落屬性 194

10.3.1單詞間隔word-spacing 194

10.3.2字符間隔letter-spacing 195

10.3.3文字修飾text-decoration 196

10.3.4垂直對(duì)齊方式vertial-align 197

10.3.5文本轉(zhuǎn)換text-transform 199

10.3.6水平對(duì)齊方式text-align 200

10.3.7文本縮進(jìn)text-indent 202

10.3.8文本行高line-height 203

10.3.9處理空白white-sapce 204

10.3.10文本反排unicode-bidi和direction 206

10.4綜合實(shí)例1—制作旅游宣傳網(wǎng)頁(yè) 207

10.5綜合實(shí)例2—網(wǎng)頁(yè)簡(jiǎn)單圖文混排 211

10.6專家解惑 213

第11章CSS3美化表格和表單樣式 214

11.1表格基本樣式 214

11.1.1表格邊框樣式 214

11.1.2表格邊框?qū)挾?217

11.1.3表格邊框顏色 218

11.2CSS3與表單 219

11.2.1美化表單中元素 220

11.2.2美化提交按鈕 222

11.2.3美化下拉菜單 223

11.3綜合實(shí)例1—隔行變色 225

11.4綜合實(shí)例2—表格圖文網(wǎng)頁(yè)布局 228

11.5綜合實(shí)例3—變色表格 230

11.6綜合實(shí)例4—登錄表單 233

11.7綜合實(shí)例5—注冊(cè)表單 235

11.8專家解惑 238

第12章CSS3美化圖像 239

12.1圖片樣式 239

12.1.1圖片邊框 239

12.1.2圖片縮放 241

12.2對(duì)齊圖片 244

12.2.1橫向?qū)R方式 244

12.2.2縱向?qū)R方式 245

12.3圖文混排 247

12.3.1文字環(huán)繞 247

12.3.2設(shè)置圖片與文字間距 248

12.4綜合實(shí)例1—一句話新聞 250

12.5綜合實(shí)例2—學(xué)校宣傳單 254

12.6專家解惑 256

第13章CSS3美化背景與邊框 257

13.1背景相關(guān)屬性 257

13.1.1背景顏色 257

13.1.2背景圖片 259

13.1.3背景圖片重復(fù) 260

13.1.4背景圖片顯示 261

13.1.5背景圖片位置 263

13.1.6背景圖片大小 265

13.1.7背景顯示區(qū)域 267

13.1.8背景圖像裁剪區(qū)域 268

13.1.9背景復(fù)合屬性 270

13.2邊框 270

13.2.1邊框樣式 270

13.2.2邊框顏色 272

13.2.3邊框線寬 274

13.2.4邊框復(fù)合屬性 275

13.3圓角邊框 276

13.3.1圓角邊框?qū)傩?276

13.3.2指定兩個(gè)圓角半徑 277

13.3.3繪制4個(gè)不同圓角邊框 278

13.3.4繪制邊框種類 281

13.4圖片邊框 283

13.4.1圖片邊框?qū)傩?283

13.4.2設(shè)置圖像邊框顯示方式 284

13.5綜合實(shí)例—設(shè)計(jì)公司主頁(yè) 287

13.6專家解惑 290

第14章網(wǎng)頁(yè)的定位與布局 292

14.1定位方式 292

14.1.1定位屬性 292

14.1.2position定位 293

14.1.3層疊順序z-index 298

14.1.4邊偏移屬性 300

14.2float浮動(dòng)定位 301

14.3overflow溢出定位 303

14.4visibility隱藏定位 305

14.5塊和行內(nèi)元素display 307

14.5.1塊元素 307

14.5.2行內(nèi)元素 309

14.6綜合實(shí)例—定位布局新聞 310

14.7專家解惑 314

第15章CSS3盒子和DIV布局 315

15.1認(rèn)識(shí)div層 315

15.1.1層在HTML布局應(yīng)用 315

15.1.2div和span區(qū)別 316

15.2盒子模型 317

15.2.1什么是盒子模型 317

15.2.2border邊框 319

15.2.3padding內(nèi)邊距 320

15.2.4margin外邊距 322

15.3CSS3新增彈性盒模型 326

15.3.1盒子布局取向box-orient 326

15.3.2盒子布局順序box-direction 328

15.3.3盒子布局位置box-ordinal-group 329

15.3.4盒子彈性空間box-flex 331

15.3.5管理盒子空間box-pack和box-align 333

15.3.6空間溢出管理box-lines 335

15.4綜合實(shí)例1—圖文排版效果 337

15.5綜合實(shí)例2—淘寶導(dǎo)購(gòu)菜單 339

15.6專家解惑 342

第16章CSS3 DIV頁(yè)面基本排版 344

16.1CSS3排版概念 344

16.1.1將頁(yè)面用DIV分塊 344

16.1.2設(shè)置各塊位置 345

16.1.3用CSS定位345

16.2固定寬度布局 349

16.2.1上中下版式 349

16.2.2左右版式 353

16.3新增CSS3多列布局 359

16.3.1列寬度column-width 359

16.3.2列數(shù)column-count 361

16.3.3列間距column-gap 362

16.3.4列邊框樣式column-rule 364

16.4綜合實(shí)例—電子企業(yè)首頁(yè) 366

16.5專家解惑 371

第17章熟悉jQueryMobile 373

17.1認(rèn)識(shí)jQueryMobile 373

17.2跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁(yè)jQueryMobile 374

17.2.1移動(dòng)設(shè)備模擬器 374

17.2.2jQueryMobile的安裝 376

17.2.3jQueryMobile網(wǎng)頁(yè)的架構(gòu) 377

17.3創(chuàng)建多頁(yè)面的jQueryMobile網(wǎng)頁(yè) 379

17.4將頁(yè)面作為對(duì)話框使用 380

17.5絢麗多彩的頁(yè)面切換效果 382

17.6專家解惑 384

第18章jQueryMobileUI組件 385

18.1套用UI組件 385

18.1.1表單組件 385

18.1.2按鈕和按鈕組 395

18.1.3按鈕圖標(biāo) 398

18.1.4彈窗 399

18.2列表 401

18.2.1列表視圖 401

18.2.2列表內(nèi)容 404

18.2.3列表過(guò)濾 406

18.3面板和可折疊塊 407

18.3.1面板 407

18.3.2可折疊塊 409

18.4導(dǎo)航條 411

18.5jQueryMobile主題 415

18.6專家解惑 419

第19章jQueryMobile事件 420

19.1頁(yè)面事件 420

19.1.1初始化事件 420

19.1.2外部頁(yè)面加載事件 423

19.1.3頁(yè)面過(guò)渡事件 425

19.2觸摸事件 427

19.2.1點(diǎn)擊事件 427

19.2.2滑動(dòng)事件 429

19.3滾屏事件 431

19.4定位事件 435

19.5專家解惑 436

第20章使用最新Bootstrap4框架 437

20.1Bootstrap概述 437

20.1.1Bootstrap特色 437

20.1.2Bootstrap4的更新 438

20.2下載Bootstrap 439

20.3安裝Bootstrap 441

20.3.1本地安裝Bootstrap 441

20.3.2初次使用Bootstrap 441

20.4使用常用組件 442

20.4.1使用下拉菜單 442

20.4.2使用按鈕組 444

20.4.3使用導(dǎo)航組件 445

20.4.4綁定導(dǎo)航和下拉菜單 448

20.4.5面包屑導(dǎo)航 449

20.4.6使用廣告屏 451

20.4.7使用card（卡片） 452

20.4.8使用進(jìn)度條 454

20.4.9使用模態(tài)框 459

20.4.10使用滾動(dòng)監(jiān)聽(tīng) 461

20.5案例實(shí)戰(zhàn)—膠囊導(dǎo)航選項(xiàng)卡（Tab欄） 463

20.6專家解惑 465

第21章開(kāi)發(fā)計(jì)算器APP 467

21.1項(xiàng)目概述 467

21.1.1功能梳理 467

21.1.2開(kāi)發(fā)環(huán)境 467

21.1.3項(xiàng)目結(jié)構(gòu)目錄 468

21.1.4項(xiàng)目打包 468

21.1.5項(xiàng)目效果展示 469

21.2項(xiàng)目設(shè)計(jì) 470

21.2.1index.html文件 471

21.2.2index.css文件 472

21.2.3calc.js文件 477

21.2.4common.js文件 483

第22章開(kāi)發(fā)求職招聘APP 487

22.1項(xiàng)目概述 487

22.1.1項(xiàng)目結(jié)構(gòu)目錄 487

22.1.2項(xiàng)目效果展示 488

22.2項(xiàng)目設(shè)計(jì) 490

22.2.1設(shè)計(jì)登錄和注冊(cè)頁(yè)面 491

22.2.2設(shè)計(jì)個(gè)人中心頁(yè)面 493

22.2.3設(shè)計(jì)簡(jiǎn)歷預(yù)覽頁(yè)面 494

22.2.4設(shè)計(jì)簡(jiǎn)歷編輯頁(yè)面 496

22.2.5設(shè)計(jì)投遞記錄和職位收藏頁(yè)面 497

22.2.6設(shè)計(jì)職位列表頁(yè)面 500

22.2.7設(shè)計(jì)職位詳情頁(yè)面 502

22.3項(xiàng)目打包成APP 503

第23章項(xiàng)目實(shí)訓(xùn)3—開(kāi)發(fā)購(gòu)物網(wǎng)站APP 507

23.1項(xiàng)目概述 507

23.1.1項(xiàng)目結(jié)構(gòu)目錄 507

23.1.2項(xiàng)目效果展示 508

23.2首頁(yè)設(shè)計(jì) 511

23.2.1設(shè)計(jì)廣告欄 511

23.2.2設(shè)計(jì)導(dǎo)航欄 514

23.2.3設(shè)計(jì)輪播 515

23.2.4設(shè)計(jì)蔬菜欄 517

23.2.5設(shè)計(jì)干果欄 520

23.2.6設(shè)計(jì)底部欄 524

23.3購(gòu)買(mǎi)頁(yè)面設(shè)計(jì) 526

23.4蔬菜展示頁(yè)面設(shè)計(jì) 529

23.5項(xiàng)目打包成APP 532

第24章項(xiàng)目實(shí)訓(xùn)4—開(kāi)發(fā)游戲APP 533

24.1游戲概述 533

24.1.1游戲結(jié)構(gòu)目錄 533

24.1.2項(xiàng)目效果演示 534

24.2游戲設(shè)計(jì) 534

24.2.1index.html文件 534

24.2.2style.css文件 535

24.2.3index.js文件 536

24.3項(xiàng)目打包成APP 538