滿額折
Web前端開發技術（簡體書）
商品資訊
相關商品
商品簡介
作者簡介
名人/編輯推薦
目次
商品簡介
本書系統地介紹了Web前端開發的基礎知識和實際應用，主要內容包括網頁開發起步、CSS樣式入門、排列網頁內容、表單與框架、網頁佈局設計、CSS樣式進階、響應式網頁設計、網頁腳本編程。
本書採用理論與實踐相結合的編寫方式，每個重要知識都配有示例代碼，每章最後一節為學生實踐任務，採用任務驅動的方式完成實踐內容。本書還配有大量的微課視頻幫助學生理解知識點，方便學生預習和實踐。
本書適合作為高職或應用型本科院校計算機及相關專業的教材，也可作為Web開發愛好者的入門參考用書。
本書採用理論與實踐相結合的編寫方式，每個重要知識都配有示例代碼，每章最後一節為學生實踐任務，採用任務驅動的方式完成實踐內容。本書還配有大量的微課視頻幫助學生理解知識點，方便學生預習和實踐。
本書適合作為高職或應用型本科院校計算機及相關專業的教材，也可作為Web開發愛好者的入門參考用書。
作者簡介
羅劍，中山大學碩士研究生畢業並獲得碩士學位。原在武漢信息傳播職業技術學院工作，自2019年至今在武漢晴川學院擔任軟件工程教師、高級工程師。主講課程：《JavaEE綜合應用開發》、《Android綜合應用開發》、《大型應用軟件開發綜合實訓》、《大數據案例實踐》。學術成果：主持全國高等院校計算機基礎教育研究會項目：在線課程、課程整體解決方案的優質教學資源建設融合的研究；主編 “十三五”高等職業教育規劃教材《C語言程序設計》、主編普通高等教育“十三五”規劃教材《Java基礎案例教程》、主編《Python程序設計基礎教程》，近年來申請軟件著作權4項，以第一作者發表論文4篇。主要榮譽：指導學生參加“2019年全國高校計算機能力挑戰賽”獲得Python程序設計全國決賽三等獎，被評為優秀指導教師。
尹薇婷，女，漢族，高級工程師，中共黨員，現任武漢信息傳播職業技術學院信息工程學院教師。持有信息系統項目管理師證書。主要從事軟件開發前端開發。高職院校任職多年，主要講授軟件技術專業核心專業課，負責軟件技術專業人才培養的課程規劃與專業建設工作。公開發表論文多篇。
廖春瓊，女，漢族，高級工程師，中共黨員，現任武漢信息傳播職業技術學院軟件技術教研室主任。持有信息系統項目管理師證書。主要從事軟件開發前端開發。2005年畢業于長江大學計算科學與技術專業；在企業一線工作2年，在軟件培訓機構任教4年，高職院校任職多年，主要講授軟件技術專業核心專業課，負責軟件技術專業人才培養的課程規劃與專業建設工作。公開發表論文7篇，出版教材2本，完成科研項目2個，參與教研項目2個，4個專業著作權，4個科技成果獎。
尹薇婷，女，漢族，高級工程師，中共黨員，現任武漢信息傳播職業技術學院信息工程學院教師。持有信息系統項目管理師證書。主要從事軟件開發前端開發。高職院校任職多年，主要講授軟件技術專業核心專業課，負責軟件技術專業人才培養的課程規劃與專業建設工作。公開發表論文多篇。
廖春瓊，女，漢族，高級工程師，中共黨員，現任武漢信息傳播職業技術學院軟件技術教研室主任。持有信息系統項目管理師證書。主要從事軟件開發前端開發。2005年畢業于長江大學計算科學與技術專業；在企業一線工作2年，在軟件培訓機構任教4年，高職院校任職多年，主要講授軟件技術專業核心專業課，負責軟件技術專業人才培養的課程規劃與專業建設工作。公開發表論文7篇，出版教材2本，完成科研項目2個，參與教研項目2個，4個專業著作權，4個科技成果獎。
名人/編輯推薦
本書採用理論與實踐相機和的編寫方式，配有豐富的微課視頻。
目次
目 錄
第1章 網頁開發起步...............1
1.1 HTML文檔的結構...................................2
1.1.1 HTML的基本結構...................2
1.1.2 使用記事本開發HTML頁面....3
【示例1.1】使用記事本開發HTML........3
1.1.3 使用VS Code開發網頁............4
1.1.4 設置頁面背景色和背景圖片....8
【示例1.2】設置網頁背景顏色...........9
【示例1.3】設置背景圖片...................9
1.2 基礎標簽........................................................10
1.2.1 文本類標簽..............................10
【示例1.4】標題標簽的使用.............11
【示例1.5】 p標簽的使用................12
【示例1.6】行內標簽的使用.............13
【示例1.7】換行標簽的使用.............14
1.2.2 水平線標簽..............................14
【示例1.8】水平線的使用.................15
1.2.3 HTML文檔注釋和特殊符號....15
【示例1.9】 在網頁底部添加
版權部分........................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】網站內頁面間的鏈接....22
1.4.2 錨點鏈接..................................23
【示例1.13】錨點鏈接......................23
1.4.3 電子郵件鏈接..........................25
【示例1.14】郵箱鏈接的使用...........25
1.5 塊級標簽與行內標簽.............................26
1.5.1 div標簽和span標簽...............26
【示例1.15】div標簽的使用.............26
【示例1.16】span 標簽的使用...........27
1.5.2 HTML的標簽分類................27
實踐任務....................................................................28
小 結....................................................................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】 塊級元素和行內元素
設置寬與高....................47
2.2.3 背景屬性..................................49
【示例2.8】背景相關樣式設置.........50
2.3 樣式使用分類.............................................51
2.3.1 行內樣式表..............................51
【示例2.9】行內樣式設置................. 52
2.3.2 內嵌樣式表..............................52
2.3.3 外部樣式表..............................52
實踐任務.................................................................... 55
小 結.................................................................... 63
習 題.................................................................... 64
第3 章 排列網頁內容..............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 表格的基本結構......................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】 表格寬度、高度、.
邊框屬性的用法........... 85
【示例3.11】表格背景和對齊設置.... 87
【示例3.12】 設置表格單元格的.
間距與填充................... 89
3.3.2 表格佈局..................................90
實踐任務.................................................................... 94
小 結.................................................................... 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 內嵌框架..................................................... 114
4.4.1 '; $('#DviFaceBook').html(form); var SilderBottom = new Swiper(".ProductImageSilder >.Silder-Bottom", { spaceBetween: 5, slidesPerView: 5, freeMode: true, watchSlidesProgress: true, }); var SilderTop = new Swiper(".ProductImageSilder >.Silder-Top", { spaceBetween: 10, thumbs: { swiper: SilderBottom, }, }); $('.ZoomIn').click(function () { var $silder = $('.ProductCover'); var $top = $('.Silder-Top'); if ($silder.hasClass('bg-mask')) { $silder.removeClass('bg-mask'); $(this).find('i').attr('class', 'bi bi-search'); } else { $silder.addClass('bg-mask'); $(this).find('i').attr('class', 'bi bi-x-lg'); } SilderTop.update(); SilderBottom.update(); }); App_History.add('007977701','711327150', 'Web前端開發技術（簡體書）', 'https://cdnec.sanmin.com.tw/product_images/711/711327150.jpg'); var History = ProductHistory('#ProductHistory'); if (History.log.length == 0) { $('#ProdBrowse').hide(); } setTimeout(function () { $('#IndexRelation').load('/product/relation/007977701') }, 100); $('.IntroSection').each(function () { var $body = $(this).find('.SectionBody'); var h = $body.height(); var title = $(this).find('.SectionTitle').text(); if (h >= 150) { //$body.css('max-height', 150); var $btn = $('').addClass('IntroMore').html('More'); $btn.appendTo($body); $btn.click(function () { $body.css('max-height', 5000); $(this).remove(); }); } }); }) function PlatformAlert(title, url) { var r = confirm("您將離開本網站，前往" + title); if (r == true) { window.open(url); } }
第1章 網頁開發起步...............1
1.1 HTML文檔的結構...................................2
1.1.1 HTML的基本結構...................2
1.1.2 使用記事本開發HTML頁面....3
【示例1.1】使用記事本開發HTML........3
1.1.3 使用VS Code開發網頁............4
1.1.4 設置頁面背景色和背景圖片....8
【示例1.2】設置網頁背景顏色...........9
【示例1.3】設置背景圖片...................9
1.2 基礎標簽........................................................10
1.2.1 文本類標簽..............................10
【示例1.4】標題標簽的使用.............11
【示例1.5】 p標簽的使用................12
【示例1.6】行內標簽的使用.............13
【示例1.7】換行標簽的使用.............14
1.2.2 水平線標簽..............................14
【示例1.8】水平線的使用.................15
1.2.3 HTML文檔注釋和特殊符號....15
【示例1.9】 在網頁底部添加
版權部分........................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】網站內頁面間的鏈接....22
1.4.2 錨點鏈接..................................23
【示例1.13】錨點鏈接......................23
1.4.3 電子郵件鏈接..........................25
【示例1.14】郵箱鏈接的使用...........25
1.5 塊級標簽與行內標簽.............................26
1.5.1 div標簽和span標簽...............26
【示例1.15】div標簽的使用.............26
【示例1.16】span 標簽的使用...........27
1.5.2 HTML的標簽分類................27
實踐任務....................................................................28
小 結....................................................................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】 塊級元素和行內元素
設置寬與高....................47
2.2.3 背景屬性..................................49
【示例2.8】背景相關樣式設置.........50
2.3 樣式使用分類.............................................51
2.3.1 行內樣式表..............................51
【示例2.9】行內樣式設置................. 52
2.3.2 內嵌樣式表..............................52
2.3.3 外部樣式表..............................52
實踐任務.................................................................... 55
小 結.................................................................... 63
習 題.................................................................... 64
第3 章 排列網頁內容..............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 表格的基本結構......................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】 表格寬度、高度、.
邊框屬性的用法........... 85
【示例3.11】表格背景和對齊設置.... 87
【示例3.12】 設置表格單元格的.
間距與填充................... 89
3.3.2 表格佈局..................................90
實踐任務.................................................................... 94
小 結.................................................................... 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 內嵌框架..................................................... 114
4.4.1 '; $('#DviFaceBook').html(form); var SilderBottom = new Swiper(".ProductImageSilder >.Silder-Bottom", { spaceBetween: 5, slidesPerView: 5, freeMode: true, watchSlidesProgress: true, }); var SilderTop = new Swiper(".ProductImageSilder >.Silder-Top", { spaceBetween: 10, thumbs: { swiper: SilderBottom, }, }); $('.ZoomIn').click(function () { var $silder = $('.ProductCover'); var $top = $('.Silder-Top'); if ($silder.hasClass('bg-mask')) { $silder.removeClass('bg-mask'); $(this).find('i').attr('class', 'bi bi-search'); } else { $silder.addClass('bg-mask'); $(this).find('i').attr('class', 'bi bi-x-lg'); } SilderTop.update(); SilderBottom.update(); }); App_History.add('007977701','711327150', 'Web前端開發技術（簡體書）', 'https://cdnec.sanmin.com.tw/product_images/711/711327150.jpg'); var History = ProductHistory('#ProductHistory'); if (History.log.length == 0) { $('#ProdBrowse').hide(); } setTimeout(function () { $('#IndexRelation').load('/product/relation/007977701') }, 100); $('.IntroSection').each(function () { var $body = $(this).find('.SectionBody'); var h = $body.height(); var title = $(this).find('.SectionTitle').text(); if (h >= 150) { //$body.css('max-height', 150); var $btn = $('').addClass('IntroMore').html('More'); $btn.appendTo($body); $btn.click(function () { $body.css('max-height', 5000); $(this).remove(); }); } }); }) function PlatformAlert(title, url) { var r = confirm("您將離開本網站，前往" + title); if (r == true) { window.open(url); } }