本書(shū)按照《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》，以HTML CSS JavaScript為主線編寫(xiě)，書(shū)中實(shí)例應(yīng)用流行的HTML5和CSS3。本書(shū)共包括12章。第1章~第3章介紹網(wǎng)站制作的基本技術(shù)，包括HTML語(yǔ)言、基本網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)元素等； 第4章~第7章介紹CSS，包括網(wǎng)頁(yè)格式和布局技術(shù)等； 第8章和第9章介紹JavaScript腳本語(yǔ)言技術(shù)； 第10章~第12章介紹JavaScript框架技術(shù)jQuery。本書(shū)提供PPT課件、微課、源代碼、企業(yè)實(shí)戰(zhàn)案例等配套資源。 本書(shū)適合應(yīng)用型本科、高職高專院的校軟件技術(shù)、移動(dòng)應(yīng)用開(kāi)發(fā)等專業(yè)的課程教學(xué)，對(duì)于培訓(xùn)機(jī)構(gòu)和一般開(kāi)發(fā)者也具有較高的參考價(jià)值。
本書(shū)以一個(gè)完整的企業(yè)網(wǎng)站開(kāi)發(fā)的思路進(jìn)行講解，將相關(guān)知識(shí)點(diǎn)分解到各個(gè)章節(jié)案例網(wǎng)站的具體制作環(huán)節(jié)中，針對(duì)性強(qiáng)，可操作性強(qiáng)。滿足零基礎(chǔ)讀者使用需求，配套企業(yè)案例可通過(guò)書(shū)中二維碼閱讀。
隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展和移動(dòng)互聯(lián)網(wǎng)應(yīng)用的快速普及，用戶體驗(yàn)的要求越來(lái)越高，網(wǎng)站開(kāi)發(fā)的難度也越來(lái)越大。在這種情況下，Web前端技術(shù)成為熱門技術(shù)，越來(lái)越受到開(kāi)發(fā)者的重視。
本書(shū)基于《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》，深入淺出地介紹了Web前端設(shè)計(jì)技術(shù)的基礎(chǔ)知識(shí)。本書(shū)圍繞Web標(biāo)準(zhǔn)的三大關(guān)鍵技術(shù)（HTML、CSS和JavaScript/jQuery）介紹前端網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的知識(shí)及相關(guān)應(yīng)用。其中，HTML負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)，CSS負(fù)責(zé)網(wǎng)頁(yè)外觀及布局，JavaScript/jQuery負(fù)責(zé)網(wǎng)頁(yè)行為和功能。目前，很多高校的計(jì)算機(jī)專業(yè)和IT培訓(xùn)班都將HTML CSS JavaScript jQuery作為教學(xué)內(nèi)容之一，這對(duì)培養(yǎng)學(xué)生的前端設(shè)計(jì)與開(kāi)發(fā)能力具有非常重要的意義。
本書(shū)內(nèi)容是校企合作的成果，以HTML CSS JavaScript為主線，實(shí)例應(yīng)用流行的HTML5和CSS3。各個(gè)章節(jié)通過(guò)二維碼配套案例，前言后的二維碼對(duì)應(yīng)企業(yè)提供的綜合案例，可在學(xué)習(xí)全書(shū)后進(jìn)行演練。各章節(jié)內(nèi)容相對(duì)獨(dú)立，各章節(jié)的案例與綜合案例關(guān)系密切。本書(shū)提供PPT課件、微課、源代碼等配套資源。
本書(shū)采用任務(wù)驅(qū)動(dòng)、模塊設(shè)計(jì)的編寫(xiě)模式。本書(shū)的任務(wù)來(lái)自企業(yè)的真實(shí)問(wèn)題，解決問(wèn)題時(shí)，將它分解成一系列的子問(wèn)題； 每一個(gè)子問(wèn)題的解決過(guò)程就是一個(gè)模塊的學(xué)習(xí)過(guò)程。每個(gè)模塊學(xué)習(xí)一組概念、鍛煉一組技能； 全部模塊加起來(lái)，即完成一種知識(shí)的學(xué)習(xí)，形成一種相應(yīng)的能力。
在任務(wù)驅(qū)動(dòng)學(xué)習(xí)的具體實(shí)施中，以網(wǎng)站建設(shè)和網(wǎng)頁(yè)設(shè)計(jì)為中心，以實(shí)例為引導(dǎo)，把介紹知識(shí)與實(shí)例設(shè)計(jì)、制作、分析融于一體，自始至終貫穿于本書(shū)之中。
本書(shū)包含12章。第1章~第3章介紹網(wǎng)站制作的基本技術(shù)，包括HTML語(yǔ)言、基本網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)元素等； 第4章~第7章介紹CSS，包括網(wǎng)頁(yè)格式和布局技術(shù)等； 第8章和第9章介紹JavaScript腳本語(yǔ)言技術(shù)； 第10章~第12章介紹JavaScript框架技術(shù)jQuery。本書(shū)結(jié)構(gòu)清晰，循序漸進(jìn)，每個(gè)部分又相對(duì)獨(dú)立，方便讀者根據(jù)自己的需要選擇學(xué)習(xí)。內(nèi)容兼顧基礎(chǔ)知識(shí)和流行的新技術(shù)、新應(yīng)用，案例工程性突出，實(shí)用性強(qiáng)。
本書(shū)適合應(yīng)用型本科、高職高專院校的軟件技術(shù)、移動(dòng)應(yīng)用開(kāi)發(fā)等專業(yè)的課程教學(xué)，對(duì)于培訓(xùn)機(jī)構(gòu)和一般開(kāi)發(fā)者也具有較好的參考價(jià)值。本書(shū)具有以下特點(diǎn)。
（1） 滿足零基礎(chǔ)讀者使用需求，采用可視化開(kāi)發(fā)模式，方便易學(xué)。
（2） 本書(shū)通過(guò)一個(gè)完整的牛道云企業(yè)網(wǎng)站的講解，將相關(guān)知識(shí)點(diǎn)分解到各個(gè)章節(jié)中案例的具體制作環(huán)節(jié)中，針對(duì)性和可操作性較強(qiáng)。
（3） 語(yǔ)言通俗易懂，簡(jiǎn)單明了，讀者能夠輕松掌握有關(guān)知識(shí)。
（4） 知識(shí)結(jié)構(gòu)安排合理，循序漸進(jìn)，適合教師教學(xué)與學(xué)生自學(xué)。
本書(shū)基于北京信息職業(yè)技術(shù)學(xué)院相關(guān)專業(yè)的教學(xué)實(shí)踐進(jìn)行編寫(xiě)，北京起步科技有限公司給予了技術(shù)支持。北京信息職業(yè)技術(shù)學(xué)院朱立、劉瑞新?lián)沃骶�，孫立友擔(dān)任副主編，負(fù)責(zé)全書(shū)編寫(xiě)策劃和定稿； 朱立編寫(xiě)了第1、2、5、6、7章，劉瑞新編寫(xiě)了第8~12章，孫立友編寫(xiě)了第3、4章。
參加編寫(xiě)的人員都是具有多年計(jì)算機(jī)教學(xué)與培訓(xùn)經(jīng)驗(yàn)的教師。但由于作者水平有限，書(shū)中難免有不足之處，懇請(qǐng)讀者提出寶貴意見(jiàn)和建議。
編者
2021年2月
朱立，副教授，計(jì)算機(jī)應(yīng)用技術(shù)碩士。北京信息職業(yè)技術(shù)學(xué)院軟件與信息學(xué)院應(yīng)用軟件開(kāi)發(fā)教研室主任，軟件技術(shù)專業(yè)帶頭人。曾參與中日合作計(jì)算機(jī)自動(dòng)設(shè)計(jì)制造系統(tǒng)項(xiàng)目，參與課題多項(xiàng)，編寫(xiě)計(jì)算機(jī)類教材多本。
第1章HTML5基礎(chǔ)知識(shí)
1．1HTML5概述
1．1．1什么是HTML
1．1．2什么是HTML5
1．1．3HTML5的應(yīng)用
1．2HTML5的基本結(jié)構(gòu)
1．2．1HTML5語(yǔ)法結(jié)構(gòu)
1．2．2HTML5編寫(xiě)規(guī)范
1．2．3HTML5文檔結(jié)構(gòu)
習(xí)題1
第2章編輯網(wǎng)頁(yè)元素
2．1文本元素
2．1．1標(biāo)題文字標(biāo)簽
2．1．2文本格式化標(biāo)簽
2．2文本層次語(yǔ)義元素
2．2．1time標(biāo)簽
2．2．2cite標(biāo)簽
2．2．3mark標(biāo)簽
2．3基本排版元素
2．3．1段落標(biāo)簽
2．3．2換行標(biāo)簽
2．3．3預(yù)格式化標(biāo)簽
2．3．4縮排標(biāo)簽
2．3．5水平線標(biāo)簽
2．4圖像
2．4．1網(wǎng)頁(yè)圖像的格式及使用要點(diǎn)
2．4．2圖像標(biāo)簽
2．4．3設(shè)置網(wǎng)頁(yè)背景圖像
2．4．4圖文混排
2．5超鏈接
2．5．1超鏈接概述
2．5．2超鏈接的應(yīng)用
2．6列表
2．6．1無(wú)序列表
2．6．2有序列表
2．6．3定義列表
2．6．4嵌套列表
2．7表格
2．7．1表格的結(jié)構(gòu)
2．7．2表格的基本語(yǔ)法
2．7．3表格的屬性
2．7．4不規(guī)則表格
2．7．5表格數(shù)據(jù)的分組
2．8div標(biāo)簽
2．9span標(biāo)簽
2．9．1基本語(yǔ)法
2．9．2span標(biāo)簽與div標(biāo)簽的區(qū)別
2．9．3使用div標(biāo)簽和span標(biāo)簽布局網(wǎng)頁(yè)內(nèi)容
習(xí)題2
第3章頁(yè)面的布局與交互
3．1結(jié)構(gòu)元素
3．1．1header元素
3．1．2nav元素
3．1．3section元素
3．1．4footer元素
3．1．5article元素
3．1．6aside元素
3．1．7分組元素
3．2頁(yè)面交互元素
3．2．1details和summary元素
3．2．2progress元素
3．2．3meter元素
3．3表單
3．3．1表單的基本概念
3．3．2表單標(biāo)簽
3．3．3表單元素
3．3．4表單分組
3．3．5使用表格布局表單
3．3．6表單的高級(jí)用法
習(xí)題3
第4章CSS3基礎(chǔ)
4．1CSS概述
4．1．1什么是CSS
4．1．2網(wǎng)頁(yè)中引用CSS的方法
4．2CSS語(yǔ)法基礎(chǔ)
4．2．1CSS樣式規(guī)則
4.2.2選擇符
4．2．3文檔結(jié)構(gòu)
習(xí)題4
第5章使用CSS修飾頁(yè)面外觀
5．1設(shè)置字體樣式
5．2設(shè)置文本樣式
5．2．1文本水平對(duì)齊方式
5．2．2行高
5．2．3文本的修飾
5．2．4段落首行縮進(jìn)
5．2．5首字下沉
5．2．6文本的截?cái)?
5．2．7文本的顏色
5．2．8文本的背景顏色
5．3設(shè)置圖像樣式
5．3．1圖像縮放
5．3．2圖像邊框
5．3．3圖像的不透明度
5．3．4背景圖像
5．3．5背景重復(fù)
5．3．6背景圖像定位
5．3．7設(shè)置背景圖像固定
5．3．8背景圖像大小
5．4設(shè)置表格樣式
5．5設(shè)置表單樣式
5．6設(shè)置鏈接
5．6．1設(shè)置文字鏈接的外觀
5．6．2圖文鏈接
5．7創(chuàng)建導(dǎo)航菜單
5．7．1縱向列表模式的導(dǎo)航菜單
5．7．2橫向列表模式的導(dǎo)航菜單
習(xí)題5
第6章盒模型
6．1盒模型簡(jiǎn)介
6．2盒模型的屬性
6．2．1邊框
6．2．2外邊距
6．2．3內(nèi)邊距
6．3盒模型的大小
6．3．1盒模型的寬度與高度
6．3．2設(shè)置塊級(jí)元素與行級(jí)元素的寬度和高度
6．4盒子的定位
6．4．1定位屬性
6．4．2定位方式
6．5浮動(dòng)與清除浮動(dòng)
6．5．1浮動(dòng)
6．5．2清除浮動(dòng)
習(xí)題6
第7章CSS布局技術(shù)
7．1Div CSS布局技術(shù)簡(jiǎn)介
7．1．1認(rèn)識(shí)Div CSS布局
7．1．2正確理解Web標(biāo)準(zhǔn)
7．2典型的CSS布局樣式
7．2．1嵌套的Div布局
7．2．2兩列布局樣式
7．2．3三列布局樣式
7．3百分比布局
7．3．1百分比布局樣式
7．3．2百分比布局案例
習(xí)題7
第8章JavaScript程序設(shè)計(jì)基礎(chǔ)
8．1JavaScript概述
8．2在網(wǎng)頁(yè)中使用JavaScript
8．2．1在HTML文檔中嵌入腳本程序
8．2．2鏈接腳本文件
8．2．3在HTML標(biāo)簽內(nèi)添加腳本
8．3基本語(yǔ)法
8．3．1基本數(shù)據(jù)類型
8．3．2常量
8．3．3變量
8．3．4運(yùn)算符和表達(dá)式
8．4JavaScript的程序結(jié)構(gòu)
8．4．1簡(jiǎn)單語(yǔ)句
8．4．2程序控制流程
8．5函數(shù)
8．5．1函數(shù)的定義
8．5．2函數(shù)的調(diào)用
8．5．3全局變量與局部變量
8．6基于對(duì)象的JavaScript語(yǔ)言
8．6．1對(duì)象
8．6．2對(duì)象的屬性
8．6．3對(duì)象的事件
8．6．4對(duì)象的方法
8．7DOM編程
8．7．1window對(duì)象
8．7．2document對(duì)象
8．7．3location對(duì)象
8．7．4history對(duì)象
8．7．5form對(duì)象
8．8JavaScript的對(duì)象事件處理程序
8．8．1對(duì)象的事件
8．8．2常用的事件及處理
8．8．3表單對(duì)象與交互性
習(xí)題8
第9章HTML5的高級(jí)應(yīng)用
9．1HTML5 canvas
9．1．1什么是 canvas
9．1．2繪制矩形
9．1．3繪制路徑
9．1．4canvas文本
9．1．5繪制圖片
9．1．6狀態(tài)的保存和恢復(fù)
9．2多媒體播放
9．2．1HTML5的多媒體支持
9．2．2音頻標(biāo)簽
9．2．3視頻標(biāo)簽
9．2．4HTML5多媒體API
習(xí)題9
第10章jQuery基礎(chǔ)
10．1jQuery概述
10．1．1jQuery簡(jiǎn)介
10．1．2jQuery的特點(diǎn)
10．1．3下載與引入jQuery插件
10．2DOM對(duì)象和jQuery對(duì)象
10．2．1DOM對(duì)象和jQuery對(duì)象簡(jiǎn)介
10．2．2jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換
10．3jQuery選擇器簡(jiǎn)介
10．3．1基礎(chǔ)選擇器
10．3．2層次選擇器
10．3．3過(guò)濾選擇器
10．3．4表單選擇器
習(xí)題10
第11章jQuery的動(dòng)畫(huà)效果
11．1jQuery的動(dòng)畫(huà)方法簡(jiǎn)介
11．2顯示與隱藏效果
11．2．1隱藏元素的方法
11．2．2顯示元素的方法
11．2．3切換元素的顯示狀態(tài)
11．3淡入/淡出效果
11．3．1淡入效果
11．3．2淡出效果
11．3．3元素的不透明效果
11．3．4交替淡入淡出效果
11．4滑動(dòng)效果
11．4．1向下展開(kāi)效果
11．4．2向上收縮效果
11．4．3交替伸縮效果
習(xí)題11
第12章jQuery UI插件的用法
12．1jQuery UI概述
12．1．1jQuery UI簡(jiǎn)介
12．1．2jQuery UI的下載
12．1．3jQuery UI的使用
12．1．4jQuery UI的工作原理
12．2jQuery UI的常用插件
12．2．1日期選擇器插件
12．2．2折疊面板插件
12．2．3標(biāo)簽頁(yè)插件
12．2．4自動(dòng)完成插件
習(xí)題12
參考文獻(xiàn)
書(shū)單推薦
