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