HTML5+CSS3+JavaScript入門很輕鬆（微課超值版）

第1章  HTML5基礎 001
1.1  HTML概述 001
1.1.1  什麼是HTML 001
1.1.2  HTML的發展歷程 002
1.2  HTML5檔的基本結構 002
1.2.1  認識標記 002
1.2.2  認識元素 003
1.2.3  HTML檔結構 003
1.3  HTML5的基本標記 004
1.3.1  檔案類型說明 004
1.3.2  檔開始標記 004
1.3.3  檔頭部標記 004
1.3.4  檔標題標記 005
1.3.5  元資訊標記 005
1.3.6  網頁主體標記 005
1.3.7  頁面注釋標記 006
1.4  編寫我的一個HTML檔 006
1.4.1  使用“記事本”編寫 006
1.4.2  使用WebStorm工具編寫 007
1.5  新手疑難問題解答 010
1.6  實戰訓練 011

第2章  網頁中的文本 012
2.1  設置標題格式 012
2.1.1  標題標記 012
2.1.2  標題對齊方式 013
2.2  設置文字格式 014
2.2.1  文字的字體、大小和顏色 014
2.2.2  文字的斜體、下畫線和刪除線 016
2.2.3  公式的上標和下標 017
2.3  設置段落格式 017
2.3.1  段落標記 017
2.3.2  段落換行標記 018
2.3.3  段落原格式標記 019
2.4  網頁的水平線 020
2.4.1  添加水平線 020
2.4.2  設置水平線的樣式 020
2.5  新手疑難問題解答 021
2.6  實戰訓練 021

第3章  圖像和連結 023
3.1  添加圖像 023
3.1.1  瞭解圖像格式 023
3.1.2  圖像中的路徑 024
3.1.3  插入圖像 025
3.2  設置圖像屬性 026
3.2.1  圖像的大小與邊框 026
3.2.2  圖像間距和對齊方式 027
3.2.3  替換文本與提示文字 028
3.3  網頁中的連結 030
3.3.1  文本連結 030
3.3.2  下載連結 031
3.3.3  書簽連結 032
3.3.4  電子郵件連結 033
3.4  圖像的連結 034
3.4.1  創建圖片連結 034
3.4.2  圖像熱點連結 035
3.5  新手疑難問題解答 036
3.6  實戰訓練 037

第4章  CSS3基礎入門 038
4.1  CSS概述 038
4.1.1  CSS發展歷史 038
4.1.2  CSS語法規則 039
4.1.3  CSS注釋方式 039
4.2  HTML5中調用CSS的方法 040
4.2.1  行內樣式 040
4.2.2  內嵌樣式 041
4.2.3  連結樣式 042
4.2.4  導入樣式 043
4.3  CSS3中的選擇器 044
4.3.1  標記選擇器 044
4.3.2  全域選擇器 045
4.3.3  類與ID選擇器 045
4.3.4  組合選擇器 047
4.3.5  屬性選擇器 048
4.3.6  偽類別選取器 049
4.3.7  結構偽類別選取器 050
4.3.8  UI元素狀態偽類別選取器 051
4.4  新手疑難問題解答 052
4.5  實戰訓練 052

第5章  CSS3常用屬性 054
5.1  文本相關屬性 054
5.1.1  定義字體類型 054
5.1.2  定義字體大小 055
5.1.3  定義文字的顏色 056
5.1.4  定義文本的水準對齊方式 057
5.2  圖片相關屬性 058
5.2.1  定義文字環繞圖片的樣式 058
5.2.2  定義圖片與文字的間距 059
5.3  邊框相關屬性 060
5.3.1  邊框樣式 060
5.3.2  邊框顏色 061
5.3.3  邊框線寬 063
5.3.4  邊框半徑 064
5.4  背景相關屬性 067
5.4.1  設置背景顏色 067
5.4.2  設置背景圖像 068
5.4.3  平鋪背景圖像 069
5.4.4  定位背景圖像 071
5.4.5  設置背景圖像大小 072
5.5  新手疑難問題解答 073
5.6  實戰訓練 074

第6章  CSS3的應用 075
6.1  盒子模型 075
6.1.1  盒子模型的外邊距 076
6.1.2  盒子模型的邊框 078
6.1.3  盒子模型的內邊距 079
6.1.4  盒子模型的高度和寬度 080
6.1.5  盒子模型的相關屬性 082
6.2  動畫與 083
6.2.1  變換動畫效果 084
6.2.2  過渡動畫效果 086
6.2.3  幀動畫效果 088
6.3  新手疑難問題解答 093
6.4  實戰訓練 093

第7章  設計清單與功能表 094
7.1  認識清單標記 094
7.1.1  無序列表標記 094
7.1.2  有序列表標記 095
7.1.3  自訂清單標記 096
7.1.4  列表的嵌套 098
7.2  使用CSS設計清單樣式 098
7.2.1  無序項目列表 099
7.2.2  有序項目列表 100
7.2.3  圖片清單樣式 101
7.2.4  清單複合屬性 103
7.3  使用CSS 設計功能表樣式 104
7.3.1  製作動態導航功能表 104
7.3.2  製作水準方向菜單 105
7.3.3  製作多級菜單清單 106
7.4  新手疑難問題解答 108
7.5  實戰訓練 109

第8章  表格與標記 110
8.1  簡單表格 110
8.1.1  創建簡單表格 110
8.1.2  表格的表頭 112
8.2  表格的應用 113
8.2.1  表格的樣式 113
8.2.2  表格的合併 114
8.2.3  表格的分組 115
8.3  使用CSS3設計表格樣式 117
8.3.1  設置表格顏色 117
8.3.2  設置表格邊框 118
8.3.3  表格標題位置 120
8.3.4  隱藏空儲存格 120
8.3.5  儲存格的邊距 121
8.4 與標記 123
8.5  新手疑難問題解答 124
8.6  實戰訓練 124

隨著資訊技術的飛速發展，使用者頁面體驗要求也在不斷提升，使得頁面前端技術日趨重要，這也導致網頁設計技術在不斷進步。而HTML5、CSS3和JavaScript的組合使用，大大減輕了前端開發的工作量，很好地解決了HTML控制項功能單一和流覽器差異導致的各種問題，提高了網站前端開發的效率，節省了成本。

《HTML5CSS3JavaScript入門很輕鬆：微課超值版》主要講述HTML5CSS3JavaScript流行的黃金搭檔，從易到難引領大家入門網頁設計。

《HTML5CSS3JavaScript入門很輕鬆：微課超值版》的學習模式如下圖所示。

《HTML5CSS3JavaScript入門很輕鬆：微課超值版》特色由淺入深，編排合理：知識點講解由淺入深，結合流行有趣的熱點案例，基本涵蓋HTML5CSS3JavaScript開發的所有基礎知識，循序漸進地講解了網頁設計的要點和難點。

掃碼學習，視頻精講：為了讓初學者快速入門並提高網頁設計能力，《HTML5CSS3JavaScript入門很輕鬆：微課超值版》提供了微視頻資源，通過掃描二維碼，可以快速觀看視頻操作，如同專職老師隨時解決學習中的困惑。大家還可以關注公眾號codehome8，獲取視頻的下載位址。

項目實戰，檢驗技能：為了更好地檢驗學習成果，每章的結尾部分都設置有“實戰訓練”，讀者可以邊學習，邊進行實戰項目訓練，強化實戰開發能力。掃描實戰訓練的二維碼，可以查看實戰任務的解題思路和案例源碼，從而提升開發技能，拓展程式設計思維。

提示技巧，積累經驗：《HTML5CSS3JavaScript入門很輕鬆：微課超值版》對讀者在學習過程中可能會遇到的疑難問題以“大牛提醒”的形式進行說明，輔助讀者輕鬆掌握相關知識，規避程式設計陷阱，讓大家在自學的過程中少走彎路。
超值資源，海量贈送：《HTML5CSS3JavaScript入門很輕鬆：微課超值版》附贈了大量超值的資源，包括同步教學視頻、教學PPT課件、案例及專案源碼、教學大綱、求職資源庫、面試資源庫、筆試題庫和小白專案實戰手冊，大家可以隨時獲取使用。

名師指導，學習無憂：《HTML5CSS3JavaScript入門很輕鬆：微課超值版》還提供技術支援QQ群（912560309），歡迎大家加入QQ群獲取《HTML5CSS3JavaScript入門很輕鬆：微課超值版》的贈送資源並交流技術。

讀者對象

《HTML5CSS3JavaScript入門很輕鬆：微課超值版》是一本完整介紹HTML5CSS3JavaScript開發技術的教程，內容豐富、條理清晰、實用性強，適合以下讀者學習使用：

零基礎的網頁設計自學者；

希望快速、全面掌握HTML5CSS3JavaScript開發的人員；

高等院校的教師和學生；

相關培訓機構的教師和學生；

初中級網頁開發人員；

要完成畢業設計的學生。

鳴謝

《HTML5CSS3JavaScript入門很輕鬆：微課超值版》由雲尚科技團隊策劃並組織編寫，主要編寫人員為王秀英和劉玉萍。《HTML5CSS3JavaScript入門很輕鬆：微課超值版》雖然傾注了眾多編者的努力，但由於時間緊迫，書中難免有疏漏之處，歡迎讀者積極與我們聯繫，希望在探討的過程中我們能夠共同進步。

編者
2021年12月