隨著前端技術(shù)的發(fā)展，越來越多的Web系統(tǒng)注重前端界面的漂亮、友好與易操作，企業(yè)對前端技術(shù)人才需求量逐年增加。目前很多高校都開設了HTML、JavaScript等技術(shù)相關的課程，隨著技術(shù)的發(fā)展，特別是移動互聯(lián)網(wǎng)的出現(xiàn)，促使移動設備大量增加，用手機上網(wǎng)的用戶越來越多，為了適應技術(shù)的發(fā)展，本書以HTML5作為網(wǎng)頁開發(fā)基礎，還介紹了設計響應式開發(fā)框架Bootstrap，jQuery庫的使用讓學生從學習之初就對前端相關技術(shù)有一個概括的了解，為學生深入學習相關內(nèi)容打下基礎。
本書采用知識與案例結(jié)合的編寫方式，首先介紹相關知識的理論內(nèi)容，然后給出示例代碼講解知識的應用，后通過實踐任務讓學生進行實踐練習，完成知識的遷移。學生在看書的過程中還可以掃描二維碼觀看視頻，直觀地了解每個知識點的用法，這樣避免了看書后不知道如何操作的弊端。本書涉及面廣，在內(nèi)容上對前端工程師所需要的基礎技術(shù)都進行了介紹，還引入了一些比較常見的框架技術(shù)，使得學生能夠快速地開發(fā)適應各種屏幕設備的網(wǎng)頁。
本書分為4個模塊8章，HTML模塊（第1章）、CSS模塊（第2 ~ 6章）、Bootstrap模塊（第7章）、JavaScript與jQuery模塊（第8章）。具體安排如下：
第1章為網(wǎng)頁開發(fā)起步，包括VS Code介紹、HTML 5網(wǎng)頁的基本結(jié)構(gòu)、文本相關的標簽、圖片標簽、超鏈接標簽和標簽的分類。后能夠制作一個個人簡歷頁面。
第2章為CSS樣式入門，包括CSS樣式的語法、CSS的三種使用方式、文本修飾的樣式、背景樣式、盒子模型樣式相關的屬性等。后學生要模仿制作出百度首頁和登錄頁面。
第3章為排列網(wǎng)頁內(nèi)容，包括無序列表、有序列表、定義列表、基本的表格與表格的美化。后要完成銷售報表頁面的制作。
第4章為表單與框架，包括form標簽、文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等表單元素，還介紹了iframe內(nèi)嵌框架的使用。后需要完成SHOPMALL的登錄與注冊頁面。
第5章為網(wǎng)頁布局設計，包括標準文檔流、網(wǎng)頁元素的定位、盒子的浮動、常用的布局類型，這些知識是全書的重難點。后需要完成網(wǎng)頁整體布局與菜單的局部布局。
第6章為CSS樣式進階，包括并集選擇器、交集選擇器、屬性選擇器、層次選擇器等，還介紹了CSS3中引入的新樣式屬性，后需要完成照片墻和推薦商品列表的任務。
第7章為響應式網(wǎng)頁設計，包括響應式頁面設計的原理與方法、Bootstrap框架的使用、柵格系統(tǒng)、Bootstrap組件等內(nèi)容。后需要完成一個典型企業(yè)網(wǎng)站頁面的設計。
第8章為網(wǎng)頁腳本編程，包括JavaScript技術(shù)基礎、函數(shù)與事件、DOM模型、jQuery庫的使用。后需要完成論壇發(fā)帖的案例。
本書配套有PPT電子課件、教學大綱、教學計劃和參考代碼，讀者可以從中國鐵道出版社有限公司網(wǎng)站（http://www.tdpress.com/51eds/）獲取。本書由羅劍（武漢晴川學院）、尹薇婷（武漢信息傳播職業(yè)技術(shù)學院）、廖春瓊（武漢信息傳播職業(yè)技術(shù)學院）、段巧靈（武漢晴川學院）編著。在編寫的過程中，得到了中國鐵道出版社有限公司、武漢晴川學院、武漢信息傳播職業(yè)技術(shù)學院領導的支持，在此深表感謝。
本書是全國高等院校計算機基礎教育研究會計算機基礎教育教學研究項目（2019-AFCEC-319）的成果。
由于作者水平有限，技術(shù)更新較快，篇幅受限，書中難免有不妥之處，敬請讀者指正。
編 者
2020年5月
目 錄
第1章 網(wǎng)頁開發(fā)起步...............1
1.1 HTML文檔的結(jié)構(gòu)...................................2
1.1.1 HTML的基本結(jié)構(gòu)...................2
1.1.2 使用記事本開發(fā)HTML頁面....3
【示例1.1】使用記事本開發(fā)HTML........3
1.1.3 使用VS Code開發(fā)網(wǎng)頁............4
1.1.4 設置頁面背景色和背景圖片....8
【示例1.2】設置網(wǎng)頁背景顏色...........9
【示例1.3】設置背景圖片...................9
1.2 基礎標簽........................................................10
1.2.1 文本類標簽..............................10
【示例1.4】標題標簽的使用.............11
【示例1.5】 p標簽的使用................12
【示例1.6】行內(nèi)標簽的使用.............13
【示例1.7】換行標簽的使用.............14
1.2.2 水平線標簽..............................14
【示例1.8】水平線的使用.................15
1.2.3 HTML文檔注釋和特殊符號....15
【示例1.9】 在網(wǎng)頁底部添加
版權(quán)部分........................16
1.3 圖像標簽........................................................17
1.3.1 圖像標簽的使用......................17
【示例1.10】圖片的使用...................18
1.3.2 圖片的相對路徑與路徑..19
1.4 超鏈接標簽..................................................20
1.4.1 頁面間鏈接..............................20
【示例1.11】超鏈接的使用...............21
【示例1.12】網(wǎng)站內(nèi)頁面間的鏈接....22
1.4.2 錨點鏈接..................................23
【示例1.13】錨點鏈接......................23
1.4.3 電子郵件鏈接..........................25
【示例1.14】郵箱鏈接的使用...........25
1.5 塊級標簽與行內(nèi)標簽.............................26
1.5.1 div標簽和span標簽...............26
【示例1.15】div標簽的使用.............26
【示例1.16】span 標簽的使用...........27
1.5.2 HTML的標簽分類................27
實踐任務....................................................................28
小 結(jié)....................................................................29
習 題....................................................................29
第2章 CSS樣式入門.............31
2.1 CSS的基本語法.......................................32
2.1.1 CSS樣式表概述......................32
2.1.2 樣式表的基本語法..................34
2.1.3 樣式表的選擇器......................34
【示例2.1】標簽選擇器應用.............35
【示例2.2】類樣式選擇器案例.........37
【示例2.3】ID樣式選擇器示例........38
2.2 常見的樣式屬性及其應用..................39
2.2.1 文本及字體屬性......................39
【示例2.4】文本及字體樣式設置.....40
2.2.2 盒子模型..................................41
【示例2.5】邊框樣式設置.................44
【示例2.6】填充樣式設置.................45
【示例2.7】 塊級元素和行內(nèi)元素
設置寬與高....................47
2.2.3 背景屬性..................................49
【示例2.8】背景相關樣式設置.........50
2.3 樣式使用分類.............................................51
2.3.1 行內(nèi)樣式表..............................51
【示例2.9】行內(nèi)樣式設置................. 52
2.3.2 內(nèi)嵌樣式表..............................52
2.3.3 外部樣式表..............................52
實踐任務.................................................................... 55
小 結(jié).................................................................... 63
習 題.................................................................... 64
第3 章 排列網(wǎng)頁內(nèi)容..............66
3.1 列表標簽........................................................ 67
3.1.1 無序列表..................................67
【示例3.1】無序列表標簽的使用..... 68
3.1.2 有序列表..................................69
【示例3.2】有序列表標簽的使用..... 69
3.1.3 定義列表..................................70
【示例3.3】定義列表標簽的使用..... 71
【示例3.4】定義列表混合布局......... 72
3.2 表格標簽........................................................ 73
3.2.1 表格的基本結(jié)構(gòu)......................73
3.2.2 表格的使用..............................74
【示例3.5】表格標簽的應用............. 75
3.2.3 合并單元格..............................76
【示例3.6】colspan 屬性的用法........ 77
【示例3.7】rowspan 屬性的用法....... 79
【示例3.8】跨行與跨列的同時應用.... 81
3.2.4 表格的高級用法......................82
【示例3.9】表格高級標簽的應用..... 83
3.3 表格的美化與布局.................................. 85
3.3.1 表格的美化..............................85
【示例3.10】 表格寬度、高度、.
邊框?qū)傩缘挠梅?.......... 85
【示例3.11】表格背景和對齊設置.... 87
【示例3.12】 設置表格單元格的.
間距與填充................... 89
3.3.2 表格布局..................................90
實踐任務.................................................................... 94
小 結(jié).................................................................... 95
習 題.................................................................... 96
第4 章 表單與框架................98
4.1 表單................................................................... 99
4.1.1 表單概述..................................99
4.1.2 表單的基本語法....................100
【示例4.1】用戶登錄...................... 101
4.2 表單元素..................................................... 102
4.2.1 表單元素的基本格式............102
4.2.2 表單元素介紹........................103
4.3 表單的綜合應用..................................... 110
4.4 內(nèi)嵌框架..................................................... 114
4.4.1
書單推薦
