HTML5 CSS JavaScript深入學(xué)習(xí)實(shí)錄書(shū)本目錄

時(shí)間：2023-02-20 08:58:01 | 來(lái)源：營(yíng)銷(xiāo)百科

時(shí)間：2023-02-20 08:58:01 來(lái)源：營(yíng)銷(xiāo)百科

HTML5 CSS JavaScript深入學(xué)習(xí)實(shí)錄書(shū)本目錄：第1章　設(shè)計(jì)的靈魂源于靈感1

1.1 成為一名出色的網(wǎng)頁(yè)設(shè)計(jì)師 1

1.2 認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站 2

1.2.1 網(wǎng)頁(yè) 2

1.2.2 網(wǎng)站 3

1.3 制作網(wǎng)頁(yè)和網(wǎng)站的那些事 4

1.3.1 網(wǎng)站制作流程 4

1.3.2 網(wǎng)頁(yè)設(shè)計(jì)流程 5

1.3.3 發(fā)布站點(diǎn) 5

1.4Web標(biāo)準(zhǔn)布局介紹 5

1.4.1 看當(dāng)前的Web開(kāi)發(fā)標(biāo) 6

1.4.2 為什么使用Web標(biāo)準(zhǔn) 6

1.4.3 CSS布局標(biāo)準(zhǔn) 7

1.5 網(wǎng)頁(yè)制作工具面面觀(guān) 8

1.5.1 幾種可視化工具 8

1.5.2 安裝Dreamweaver 10

1.6 談HTML和JavaScript的必要性 13

1.7 靈感是設(shè)計(jì)師的設(shè)計(jì)之源 13

第2章　網(wǎng)頁(yè)設(shè)計(jì)三劍客15

2.1 三劍客之——體現(xiàn)身材的HTML 15

2.1.1 HTML概述15

2.1.2 HTML的特點(diǎn) 16

2.1.3 看HTML的身材如何 16

2.2 三劍客之——會(huì)化妝的CSS 16

2.2.1 CSS概述 17

2.2.2 CSS的特點(diǎn)17

2.2.3 CSS的好處18

2.3 三劍客之——JavaScript是美的升華 18

2.3.1 JavaScript概述 18

2.3.2 JavaScript基本概念 18

2.3.3 JavaScript的作用 19

2.4 一個(gè)典型頁(yè)面文件實(shí)例 20

第3章　網(wǎng)頁(yè)的記號(hào)23

3.1 為網(wǎng)頁(yè)設(shè)計(jì)發(fā)型——設(shè)置網(wǎng)頁(yè)頭部元素 23

3.1.1 設(shè)置文檔類(lèi)型 23

3.1.2 設(shè)置編碼類(lèi)型 26

3.1.3 設(shè)置頁(yè)面標(biāo)題 28

3.2 其他頭部元素 30

3.2.1 命名空間 30

3.2.2 meta標(biāo)記 31

3.2.3 關(guān)鍵詞 31

3.2.4 網(wǎng)頁(yè)描述 31

3.3 設(shè)置頁(yè)面正文 34

3.4 注釋是一種說(shuō)明 36

第4章　你不一定了解的文字和段落40

4.1 標(biāo)題文字 40

4.2 文本文字 42

4.2.1 文本文字標(biāo)記font43

4.2.2 字型設(shè)置 44

4.3 段落標(biāo)記 46

4.4 換行標(biāo)記 48

4.5 插入水平線(xiàn) 48

4.6 特殊符號(hào)處理 51

第5章　看超鏈接的跳躍56

5.1 鏈接概述 56

5.1.1 錨鏈 56

5.1.2 URL引用 57

5.2 建立內(nèi)部鏈接 57

5.3 建立外部鏈接 60

5.4 使用Telnet鏈接 63

5.5 創(chuàng)建E-mail鏈接 64

5.6 創(chuàng)建FTP鏈接 66

5.7 其他形式的鏈接 68

5.7.1 新聞組鏈接 69

5.7.2 WAIS鏈接 69

第6章　圖片是修飾網(wǎng)頁(yè)的最佳途徑71

6.1 常用的圖片格式介紹 71

6.1.1GIF格式71

6.1.2JPEG格式72

6.2 設(shè)置背景圖片 73

6.3 插入圖片 75

6.3.1 圖片的基本處理 76

6.3.2 圖片布局處理 77

6.4 設(shè)置圖片鏈接 80

第7章　你不一定了解的列表82

7.1 無(wú)序列表 82

7.2 有序列表 84

7.3 更加緊湊的菜單列表 87

7.4 定義列表標(biāo)記 89

7.5 列表的嵌套使用 91

第8章　表格沒(méi)那么簡(jiǎn)單94

8.1 創(chuàng)建一個(gè)表格 94

8.2 表格標(biāo)題 97

8.3 跨行和跨列 99

8.3.1 實(shí)現(xiàn)跨列處理 100

8.3.2 實(shí)現(xiàn)跨行處理 102

8.3.3 實(shí)現(xiàn)同時(shí)跨行、跨列處理 105

8.4 設(shè)置表格頁(yè)眉 107

8.5 設(shè)置表格背景圖像 109

8.6 對(duì)齊處理 110

8.6.1 表格的整體對(duì)齊 110

8.6.2 對(duì)齊表格中的內(nèi)元素 112

8.7 設(shè)置單元格大小 115

第9章　特效和多媒體帶來(lái)的絢麗117

9.1 實(shí)現(xiàn)滾動(dòng)效果 117

9.2 設(shè)置背景音樂(lè) 119

9.2.1 代碼指定 119

9.2.2 媒體插件實(shí)現(xiàn) 120

9.3 插入Flash 122

9.4 插入Applet 126

9.5 ActiveX 控件129

第10章　使用框架133

10.1 框架標(biāo)記介紹 133

10.2 創(chuàng)建框架 135

10.3 設(shè)置框架大小 139

10.4 為框架創(chuàng)建鏈接142

10.5 框架嵌套 146

第11章　看表單帶來(lái)的革命性意義152

11.1 表單標(biāo)記 152

11.2 使用form標(biāo)記 153

11.3 使用文本域154

11.4 使用文本區(qū)域 156

11.5 使用按鈕 159

11.6 使用單選按鈕和復(fù)選框 161

11.7 使用列表菜單 164

11.8 使用文件域167

11.9 使用圖像域169

11.10 使用隱藏域171

11.11 使用單選組按鈕173

11.12 表單的綜合使用176

第12章　div布局處理188

12.1 div標(biāo)記介紹 188

12.1.1 div的格式 188

12.1.2 使用div 189

12.2 插入div標(biāo)記 190

12.3 插入AP div 192

第13章　HTML 5來(lái)了196

13.1 HTML 5 是下一代的HTML 196

13.1.1 發(fā)展歷程 196

13.1.2 HTML 5的吸引力 197

13.2 新特性之視頻處理 197

13.2.1 video標(biāo)記 198

13.2.2 video標(biāo)記的屬性198

13.3 新特性之音頻處理 203

13.3.1 audio標(biāo)記 203

13.3.2 audio標(biāo)記的屬性204

13.4 新特性之Canvas 208

13.4.1 canvas標(biāo)記介紹 208

13.4.2 HTML DOM Canvas 對(duì)象 209

13.4.3 Canvas實(shí)踐 209

13.5 新特性之Web存儲(chǔ) 219

13.5.1 Web存儲(chǔ)介紹 219

13.5.2 HTML 5中Web存儲(chǔ)的意義 220

13.5.3 兩種存儲(chǔ)方法 220

13.6 新特性之表單新特性223

13.6.1 全新的Input 類(lèi)型 223

13.6.2 全新的表單元素 227

13.6.3 全新的表單屬性 229

第14章　等了很久的CSS基礎(chǔ)236

14.1 CSS語(yǔ)法 236

14.2 使用選擇符239

14.2.1 命名機(jī)制 239

14.2.2 通配選擇符 240

14.2.3 類(lèi)型選擇符 242

14.2.4 群組選擇符 244

14.2.5 包含選擇符 246

14.2.6 ID選擇符248

14.2.7 class選擇符 250

14.2.8 組合選擇符 250

14.3 CSS屬性介紹 250

14.4 CSS編碼規(guī)范 252

14.4.1 書(shū)寫(xiě)規(guī)范 253

14.4.2 命名規(guī)范 253

14.5 顏色介紹 253

14.5.1 顏色名稱(chēng)定義 254

14.5.2 十六進(jìn)制定義 255

14.6 長(zhǎng)度單位 257

14.6.1 絕對(duì)長(zhǎng)度單位 257

14.6.2 相對(duì)長(zhǎng)度單位 257

14.7 百分比值 258

14.8 URL是地址 261

14.8.1 相對(duì)路徑 261

14.8.2 絕對(duì)路徑 261

14.8.3 應(yīng)用實(shí)例 261

14.9 CSS的調(diào)用 264

第15章　先看頁(yè)面布局268

15.1 CSS元素介紹 268

15.1.1 塊元素 268

15.1.2 內(nèi)聯(lián)元素 271

15.1.3 可變?cè)?272

15.2 CSS元素定位介紹 272

15.2.1 元素的定位 272

15.2.2 定位屬性 277

15.3 內(nèi)容控制屬性 282

15.3.1 控制頁(yè)面內(nèi)容屬性display 282

15.3.2 是否顯示屬性visibility 283

15.3.3 居中顯示屬性text-align 286

15.3.4 邊界屬性margin 289

15.4 控制頁(yè)面背景 291

15.4.1 頁(yè)面背景概述 291

15.4.2 使用背景顏色 292

15.4.3 使用背景圖片 293

15.4.4 背景顏色和背景圖片混用 301

15.4.5 設(shè)置文本樣式 303

15.4.6 設(shè)置鏈接樣式 305

15.5 使用浮動(dòng)屬性 307

15.5.1 浮動(dòng)屬性簡(jiǎn)介 307

15.5.2 固定元素相鄰 307

15.5.3 兩個(gè)浮動(dòng)元素相鄰 309

15.5.4 多個(gè)浮動(dòng)元素相鄰 310

15.6 清除浮動(dòng)屬性 311

15.6.1 清除浮動(dòng)屬性簡(jiǎn)介 311

15.6.2 使用清除浮動(dòng)屬性 313

15.7 使用列表屬性 315

15.7.1 列表樣式屬性list-style-type 315

15.7.2 列表位置屬性list-style-position 317

15.7.3 列表圖片屬性list-style- image 318

15.7.4 列表綜合屬性list-style 320

第16章　將網(wǎng)頁(yè)打造成一個(gè)容器322

16.1 盒模型簡(jiǎn)介322

16.1.1 盒模型的內(nèi)容 322

16.1.2 盒模型的背景 324

16.2 使用補(bǔ)白屬性 324

16.2.1 補(bǔ)白屬性概述 324

16.2.2 使用補(bǔ)白屬性百分比值 327

16.2.3 使用單側(cè)補(bǔ)白屬性 329

16.3 使用邊框?qū)傩? 331

16.3.1 邊框樣式屬性 331

16.3.2 邊框?qū)挾葘傩?333

16.3.3 邊框顏色屬性 335

16.3.4 邊框?qū)傩缘木C合使用 336

16.3.5 使用表格邊框?qū)傩?338

16.4 使用邊界屬性 340

16.4.1 邊界屬性 340

16.4.2 單側(cè)邊界屬性 342

16.4.3 相鄰邊界屬性 344

16.5 父子元素之間的距離349

16.5.1 子元素邊界為0 349

16.5.2 父元素補(bǔ)白為0 351

16.6 嵌套元素使用負(fù)邊界353

16.7 固定元素的大小355

第17章　CSS設(shè)置和修飾358

17.1 CSS文本設(shè)置 358

17.1.1 文本縮進(jìn) 358

17.1.2 對(duì)齊文本 362

17.1.3 圖文混排對(duì)齊處理 365

17.1.4 設(shè)置行高和間隔 367

17.1.5 設(shè)置文本間隔和空白 372

17.1.6 實(shí)現(xiàn)文本轉(zhuǎn)換 375

17.1.7 實(shí)現(xiàn)水平和垂直居中 376

17.2 文本修飾鏈接 380

17.2.1 文本修飾 380

17.2.2 使用鏈接屬性 383

17.2.3 設(shè)置鼠標(biāo)懸停樣式 389

17.3 CSS修飾圖片 391

17.3.1 背景圖片修飾 391

17.3.2 修飾內(nèi)容圖片 392

17.4 CSS表單修飾 395

17.4.1 修飾表單文本域 396

17.4.2 修飾表單文本區(qū)域 396

17.4.3 修飾表單按鈕 398

17.4.4 修飾表單復(fù)選框 399

17.4.5 修飾表單單選按鈕 400

17.4.6 修飾表單列表 401

17.4.7 修飾表單文件域 402

17.4.8 修飾表單圖像域 403

17.5 修飾頁(yè)面滾動(dòng)條404

17.6 修飾水平線(xiàn)406

17.7 修飾表格 407

17.7.1 修飾表格邊線(xiàn)和背景 407

17.7.2 設(shè)置表格的寬度和高度 408

17.7.3 實(shí)現(xiàn)表格居中 409

17.7.4 設(shè)置表格內(nèi)容高度 412

第18章　引入JavaScript414

18.1 JavaScript簡(jiǎn)介 414

18.1.1 JavaScript格式414

18.1.2 一個(gè)典型的JavaScript文件 414

18.2 數(shù)據(jù)類(lèi)型 416

18.2.1 數(shù)據(jù)類(lèi)型概述 416

18.2.2 JavaScript常量417

18.2.3 JavaScript變量417

18.3 表達(dá)式和運(yùn)算符420

18.3.1 JavaScript表達(dá)式 420

18.3.2 JavaScript運(yùn)算符 420

18.4 JavaScript循環(huán)語(yǔ)句 424

18.4.1 if條件語(yǔ)句 424

18.4.2 for循環(huán)語(yǔ)句 427

18.4.3 while循環(huán)語(yǔ)句 429

18.4.4 do…while循環(huán)語(yǔ)句 430

18.4.5 break控制 432

18.4.6 switch循環(huán)語(yǔ)句 432

18.5 JavaScript函數(shù) 432

18.5.1 函數(shù)的構(gòu)成 433

18.5.2 JavaScript常用函數(shù)434

18.6 JavaScript對(duì)象 436

18.6.1 對(duì)象基礎(chǔ)知識(shí) 436

18.6.2 JavaScript常用對(duì)象和方法 438

18.7 JavaScript事件 441

18.7.1 JavaScript常用事件441

18.7.2 事件處理程序 443

18.8 JavaScript窗口對(duì)象 444

18.8.1 窗口對(duì)象 444

18.8.2 窗口對(duì)象的事件驅(qū)動(dòng) 444

18.8.3 窗口對(duì)象中的屬性 444

18.8.4 窗口對(duì)象的方法 445

18.8.5 JavaScript窗口對(duì)象的應(yīng)用 445

18.9JavaScript框架對(duì)象 448

第19章　行為操作451

19.1 行為介紹 451

19.1.1 行為簡(jiǎn)介 451

19.1.2 行為事件 453

19.1.3 行為的使用 453

19.2 調(diào)用JavaScript 455

19.3 URL轉(zhuǎn)移 456

19.4 交換圖像 458

19.5 打開(kāi)瀏覽器窗口460

19.6 顯示隱藏元素 462

19.7 播放聲音 463

19.8 改變屬性 465

19.9 彈出信息 467

19.10 跳轉(zhuǎn)菜單 469

19.11 拖動(dòng)AP元素 472

第20章　談一談設(shè)計(jì)師這個(gè)行業(yè)474

20.1 網(wǎng)頁(yè)設(shè)計(jì)師這一行業(yè)474

20.2 從合格到優(yōu)秀其實(shí)并不遙遠(yuǎn) 475

20.3 企業(yè)需要什么樣的人才 476

20.4 設(shè)計(jì)師們的三塊大蛋糕 476

20.5 從設(shè)計(jì)師的擔(dān)心談出路 477

第21章　從面試中談設(shè)計(jì) 479

21.1 面試 479

21.1.1 面試前的準(zhǔn)備 479

21.1.2 常見(jiàn)的面試錯(cuò)誤 480

21.2 面試中最大的問(wèn)題 481

21.2.1 網(wǎng)頁(yè)設(shè)計(jì)師要抓住設(shè)計(jì)的靈魂 481

21.2.2 需要牢記的原則 481

21.2.3 考官的問(wèn)題——網(wǎng)頁(yè)設(shè)計(jì)理念 484

21.2.4 考官的問(wèn)題——網(wǎng)頁(yè)設(shè)計(jì)的誤區(qū) 484

21.3 在面試中所得——什么才是好的網(wǎng)頁(yè)設(shè)計(jì) 484

21.4 配色的問(wèn)題485

21.5 不得不說(shuō)的標(biāo)題486

21.6 面試問(wèn)題——網(wǎng)頁(yè)設(shè)計(jì)布局 487

21.7 網(wǎng)頁(yè)設(shè)計(jì)必須注意的26個(gè)問(wèn)題 488

21.8 探索無(wú)止境，學(xué)習(xí)無(wú)歸期491

第22章　從項(xiàng)目中談模塊493

22.1 一個(gè)項(xiàng)目引發(fā)的問(wèn)題493

22.2 JavaScript特效的應(yīng)用 495

22.3 文字處理 496

22.3.1 實(shí)例概述 496

22.3.2 定義文本顏色 497

22.3.3 指定文本內(nèi)容 498

22.3.4 文本增亮處理 498

22.3.5 文本減亮處理 498

22.3.6 定義變換頻率 499

22.4 時(shí)間處理 502

22.5 圖像處理 506

22.5.1 實(shí)例概述 507

22.5.2 設(shè)置圖像屬性 507

22.5.3 亮度增加處理 507

22.5.4 亮度減小處理 508

22.6 背景處理 511

22.7 鼠標(biāo)光標(biāo)處理 515

22.7.1 實(shí)例概述 515

22.7.2 指定跟隨文本 515

22.7.3 文本效果處理 515

22.7.4 頁(yè)面顯示 516

22.8 菜單處理 518

22.8.1 實(shí)例概述 518

22.8.2 設(shè)置菜單元素內(nèi)容 518

22.8.3 設(shè)置滾動(dòng)區(qū)域?qū)傩?519

第23章　為Android手機(jī)設(shè)計(jì)網(wǎng)頁(yè)523

23.1 搭建開(kāi)發(fā)環(huán)境 523

23.1.1 搭建Android開(kāi)發(fā)環(huán)境 523

23.1.2 搭建網(wǎng)頁(yè)運(yùn)行環(huán)境 525

23.2 先看一段代碼 528

23.2.1 實(shí)現(xiàn)主頁(yè) 528

23.2.2 編寫(xiě)CSS文件 529

23.2.3 實(shí)現(xiàn)頁(yè)面自動(dòng)縮放 531

23.3 添加Android的CSS 532

23.3.1 編寫(xiě)基本的樣式 532

23.3.2 添加視覺(jué)效果 534

23.4 添加JavaScript 535

23.4.1 jQuery框架介紹 535

23.4.2 具體實(shí)踐 536

23.5 使用Ajax 539

23.5.1 編寫(xiě)HTML文件 539

23.5.2 編寫(xiě)JavaScript文件 543

23.5.3 最后的修飾 544

23.6 讓網(wǎng)頁(yè)動(dòng)起來(lái) 545

23.6.1 一個(gè)開(kāi)源框架——JQTouch 546

23.6.2 一個(gè)簡(jiǎn)單應(yīng)用 546

第24章　SEO優(yōu)化555

24.1 SEO基礎(chǔ) 555

24.2 搜索引擎 556

24.2.1 搜索引擎的工作 556

24.2.2 搜索引擎之間的差異 557

24.3 非常重要的關(guān)鍵詞 557

24.3.1 優(yōu)化正確的關(guān)鍵詞 557

24.3.2關(guān)鍵詞密度558

24.3.3 特殊的關(guān)鍵詞 559

24.3.4 利用相關(guān)性提高網(wǎng)站關(guān)鍵詞排名 560

24.3.5 挖掘準(zhǔn)確的長(zhǎng)尾關(guān)鍵詞562

24.4 鏈接 563

24.4.1 內(nèi)向鏈接和外向鏈接 563

24.4.2 錨文本 564

24.5 做好數(shù)據(jù)分析 565

24.6 網(wǎng)站排名算法總結(jié) 566

24.7 幾個(gè)有效的SEO排名策略567

第25章　個(gè)人博客網(wǎng)站569

25.1 網(wǎng)站規(guī)劃 569

25.1.1 站點(diǎn)需求分析 569

25.1.2 預(yù)期效果分析 570

25.1.3 站點(diǎn)結(jié)構(gòu)規(guī)劃 571

25.2 切圖分析 571

25.3 制作站點(diǎn)首頁(yè) 572

25.3.1 實(shí)現(xiàn)流程分析 572

25.3.2 制作頂部導(dǎo)航 573

25.3.3 設(shè)計(jì)中間內(nèi)容部分 577

25.3.4 制作底部版權(quán)部分 583

25.4 制作日志頁(yè)面 585

25.4.1 實(shí)現(xiàn)流程分析 585

25.4.2 日志內(nèi)容實(shí)現(xiàn) 585

25.5 制作日志詳情頁(yè)面 586

25.5.1 實(shí)現(xiàn)流程分析 586

25.5.2 頁(yè)面具體實(shí)現(xiàn) 587