本書從零基礎讀者的角度出發(fā),通過通俗易懂的語言、豐富多彩的實例,循序漸進地讓讀者在實踐中學習HTML、CSS 與JavaScript編程知識,提升自己的實際開發(fā)能力。
全書共分為5篇24章,內(nèi)容包括HTML基礎、文本、添加圖像、超鏈接的使用、表格與div標簽、CSS3概述、CSS3高級應用、列表、表單、多媒體播放、HTML5新特性、響應式網(wǎng)頁設計、響應式組件、JavaScript概述、JavaScript 語言基礎、JavaScript 基本語句、JavaScript 中的函數(shù)、JavaScript 中的對象、JavaScript 中的數(shù)組、Ajax技術、jQuery基礎、jQuery控制頁面和事件處理、設計叮叮商城網(wǎng)站、模仿王者榮耀游戲網(wǎng)站等。書中知識點講解細致,側(cè)重介紹每個知識點的使用場景,涉及的代碼給出了詳細的注釋,可以使讀者輕松領會前端開發(fā)的精髓,快速提高開發(fā)技能。同時,本書配套了大量教學視頻,掃碼即可觀看,還提供所有程序源文件,方便讀者實踐。
本書適合HTML、CSS、JavaScript初學者及前端開發(fā)入門者自學使用,也可用作高等院校相關專業(yè)的教材及參考書。
第1篇 HTML基礎篇
第1章 HTML基礎 2 視頻講解:5節(jié),58分鐘
1.1 HTML概述 3
1.1.1 什么是HTML 3
1.1.2 HTML的發(fā)展歷程 3
1.2 HTML文件的基本結(jié)構(gòu) 3
1.2.1 HTML的基本結(jié)構(gòu) 4
1.2.2 HTML的基本標簽 5
1.3 編寫第一個HTML文件 8
1.3.1 HTML文件的編寫方法 8
1.3.2 手工編寫頁面 9
1.3.3 使用WebStorm制作頁面 10
[實例1.1] 運用屬性,渲染頁面效果 15
本章知識思維導圖 16
第2章 文本 17 視頻講解:10節(jié),72分鐘
2.1 標題 18
2.1.1 標題標簽 18
[實例2.1] 巧用標題標簽,編寫開心一笑 18
2.1.2 標題的對齊方式 20
[實例2.2] 活用文字居中,推薦商品信息 20
2.2 文字 21
2.2.1 文字的斜體、下劃線、刪除線 21
[實例2.3] 活用文字裝飾,推薦商品信息 21
2.2.2 文字的上標與下標 22
[實例2.4] 使用上標與下標,展示數(shù)學公示表 23
2.2.3 特殊文字符號 23
[實例2.5] 巧用文字符,繪制字符畫 24
2.3 段落 24
2.3.1 段落標簽 25
[實例2.6] 巧用段落標簽,介紹創(chuàng)意文字 25
2.3.2 段落的換行標簽 26
[實例2.7] 巧用換行,書寫古詩 26
2.3.3 段落的原格式標簽 27
[實例2.8] 巧用原格式標簽,輸出元旦快樂 27
2.4 水平線 28
2.4.1 水平線標簽 28
[實例2.9] 巧用水平線,繪制行表格 28
2.4.2 水平線標簽的寬度 29
[實例2.10] 巧用
的寬度屬性,裝飾文字 29
本章知識思維導圖 30
第3章 添加圖像 31 視頻講解:5節(jié),74分鐘
3.1 添加圖像 32
3.1.1 圖像的基本格式 32
3.1.2 添加圖像 32
[實例3.1] 使用img標簽,實現(xiàn)象棋簡介 33
3.2 設置圖像屬性 34
3.2.1 圖像大小與邊框 34
[實例3.2] 改變手機商品圖像的大小和邊框 34
3.2.2 圖像間距與對齊方式 35
[實例3.3] 使用align和vspace等改變頭像的位置 36
3.2.3 替換文本與提示文字 36
[實例3.4] 設置圖像的提示文字與替換文本 37
本章知識思維導圖 38
第4章 超鏈接的使用 39 視頻講解:4節(jié),67分鐘
4.1 鏈 接 標 簽 40
4.1.1 文本鏈接 40
[實例4.1] 巧用文本鏈接,實現(xiàn)網(wǎng)站導航 40
4.1.2 書簽鏈接 41
[實例4.2] 巧用書簽鏈接,實現(xiàn)商城網(wǎng)頁內(nèi)部跳轉(zhuǎn) 41
4.2 圖像的超鏈接 43
4.2.1 圖像的超鏈接 43
[實例4.3] 添加圖像鏈接,實現(xiàn)“手機風暴”板塊 43
4.2.2 圖像熱區(qū)鏈接 44
[實例4.4] 使用熱區(qū)鏈接,添加多個鏈接地址 45
本章知識思維導圖 46
第5章 表格與
標簽 47 視頻講解:9節(jié),72分鐘
5.1 簡單表格 48
5.1.1 簡單表格的制作 48
[實例5.1] 使用表格標簽編寫值日表 48
5.1.2 表頭的設置 49
[實例5.2] 使用表頭標簽制作簡單課程表 50
5.2 表格的高級應用 51
5.2.1 表格的樣式 51
[實例5.3] 制作商品推薦表格 51
5.2.2 表格的合并 52
[實例5.4] 使用表格標簽,制作復雜的課程表 53
5.2.3 表格的分組 54
[實例5.5] 使用表格分組制作學生練習表 54
5.3
標簽 56
5.3.1
標簽的介紹 56
[實例5.6] 使用
標簽制作一首古詩 56
5.3.2
標簽的應用 57
[實例5.7] 使用
標簽制作個人簡歷 57
5.4
標簽 58
5.4.1 標簽的介紹 58
[實例5.8] 使用標簽制作春節(jié)介紹短文 59
5.4.2 標簽的應用 59
[實例5.9] 使用標簽制作公司介紹小短文 60
本章知識思維導圖 61
第2篇 CSS3與HTML5應用篇
第6章 CSS3概述 64 視頻講解:9節(jié),141分鐘
6.1 CSS概述 65
6.1.1 CSS的發(fā)展史 65
6.1.2 一個簡單的CSS示例 65
6.2 CSS3中的選擇器 67
6.2.1 屬性選擇器 68
[實例6.1] 實現(xiàn)51購商城中的手機風暴版塊 68
6.2.2 類和ID選擇器 69
[實例6.2] 實現(xiàn)商城首頁中爆款特賣版塊 70
6.2.3 偽類和偽元素選擇器 71
[實例6.3] 實現(xiàn)vivo X9s手機的宣傳頁面 72
6.2.4 其他選擇器 74
[實例6.4] 實現(xiàn)商城的分類版塊界面 74
6.3 常用屬性 76
6.3.1 文本相關屬性 76
[實例6.5] 實現(xiàn)51購商城的搶購頁面 78
6.3.2 背景相關屬性 79
[實例6.6] 實現(xiàn)為登錄頁面插入背景圖像 80
6.3.3 列表相關屬性 81
[實例6.7] 實現(xiàn)購物商城導航欄 81
本章知識思維導圖 83
第7章 CSS3高級應用 84 視頻講解:8節(jié),155分鐘
7.1 框模型 85
7.1.1 外邊距(margin) 85
[實例7.1] 實現(xiàn)vivo X9 Plus手機宣傳頁面 86
7.1.2 內(nèi)邊距(padding) 87
[實例7.2] 實現(xiàn)手機商城新品專區(qū)的商品頁面 88
7.1.3 邊框(border) 89
[實例7.3] 實現(xiàn)購物商城中的商品列表 91
7.2 布局常用屬性 92
7.2.1 浮動 93
[實例7.4] 比較各浮動方式的區(qū)別 93
7.2.2 定位 94
[實例7.5] 實現(xiàn)鼠標滑過文字顯示對應的內(nèi)容 95
7.3 動畫與特效 95
7.3.1 變換(transform) 96
[實例7.6] 實現(xiàn)鼠標滑過時圖像顯示對應的變形效果 96
7.3.2 過渡(transition) 98
[實例7.7] 實現(xiàn)鼠標滑過時逐漸展開圖像的效果 99
7.3.3 動畫(animation) 100
[實例7.8] 實現(xiàn)滾動廣告動畫 102
本章知識思維導圖 103
第8章 列表 104 視頻講解:7節(jié),32分鐘
8.1 列表的標簽 105
8.2 無序列表 105
8.2.1 無序列表標簽 105
[實例8.1] 無序列表列舉唐宋八大家 106
8.2.2 無序列表屬性 106
[實例8.2] 無序列表制作商品預覽效果 106
8.3 有序列表 108
8.3.1 有序列表標簽 108
[實例8.3] 運用有序列表輸出古詩 108
8.3.2 有序列表屬性 108
[實例8.4] 運用有序列表制作商城頁面 109
8.4 列表的嵌套 110
8.4.1 定義列表的嵌套 110
[實例8.5] 運用列表嵌套輸出古詩 111
8.4.2 無序列表和有序列表的嵌套 112
[實例8.6] 使用列表嵌套制作導航欄 112
本章知識思維導圖 114
第9章 表單 115 視頻講解:8節(jié),44分鐘
9.1 表單概述 116
9.1.1 概述 116
9.1.2 表單標簽