本書(shū)介紹了HTML5、CSS3和JavaScript三項(xiàng)Web前端開(kāi)發(fā)常用技術(shù)及綜合實(shí)例。首先介紹HTML5設(shè)計(jì)網(wǎng)頁(yè)的文檔結(jié)構(gòu)、文本、圖像、超鏈接、表格、表單等。其次介紹CSS3對(duì)表格、表單、圖片、背景、邊框等頁(yè)面元素進(jìn)行樣式美化以及CSS3變形和動(dòng)畫(huà)等內(nèi)容。再次介紹JavaScript內(nèi)置對(duì)象、對(duì)象編程以及通過(guò)JavaScript操作CSS3和HTML5,實(shí)現(xiàn)Web前端的交互功能。后介紹綜合實(shí)例將三部分技術(shù)結(jié)合起來(lái),簡(jiǎn)單直觀地介紹Web前端的開(kāi)發(fā)思路和過(guò)程。
本書(shū)通俗易懂、構(gòu)思清晰,理論與實(shí)踐并行,通過(guò)大量的實(shí)例,引導(dǎo)讀者逐步深入,全面掌握Web前端開(kāi)發(fā)技術(shù)。
本書(shū)既可作為高等院校本專(zhuān)科計(jì)算機(jī)專(zhuān)業(yè)的教學(xué)用書(shū),也可作為相關(guān)技術(shù)人員的參考用書(shū)。
本書(shū)配有授課電子教案,需要的教師可登錄www.cmpedu.com免費(fèi)注冊(cè),審核通過(guò)后下載,或聯(lián)系編輯索取(QQ:2850823885,電話(huà):010-88379739)。
適讀人群 :網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)制作,前端開(kāi)發(fā)
以html5+css+javascript的組合,通過(guò)實(shí)際案例介紹前端開(kāi)發(fā)的知識(shí),非常適合初入門(mén)的讀者學(xué)習(xí)前端開(kāi)發(fā),掌握前端開(kāi)發(fā)的基本技能。
HTML5的時(shí)代已經(jīng)到來(lái),各大瀏覽器早已做好準(zhǔn)備,能很好地支持HTML5規(guī)范。當(dāng)前互聯(lián)網(wǎng)技術(shù)飛速發(fā)展,但幾乎每一個(gè)互聯(lián)網(wǎng)產(chǎn)品,都無(wú)法回避前端開(kāi)發(fā)這一環(huán)節(jié)。
本書(shū)主要介紹Web前端開(kāi)發(fā)技術(shù),從HTML5基礎(chǔ)標(biāo)簽到CSS3頁(yè)面布局和特效,再通過(guò)JavaScript技術(shù)進(jìn)一步提升網(wǎng)頁(yè)前端的交互性和實(shí)用性。通過(guò)實(shí)例循序漸進(jìn),逐步引導(dǎo)讀者深入學(xué)習(xí)。
本書(shū)的主要特色不僅在于通過(guò)豐富的小實(shí)例來(lái)介紹知識(shí)點(diǎn),而且將一個(gè)完整的案例貫穿全書(shū)始終,并且在全書(shū)最后的章節(jié)進(jìn)行思路的匯總和整理,幫助讀者將所學(xué)知識(shí)應(yīng)用到實(shí)際項(xiàng)目當(dāng)中。避免學(xué)習(xí)知識(shí)的局限性和片面性,使讀者在獲取知識(shí)的同時(shí),掌握實(shí)際應(yīng)用的方法和技巧。
本書(shū)是一本介紹HTML5、CSS3和JavaScript前端開(kāi)發(fā)的實(shí)用型教材,全書(shū)可分四部分。
第 1 章至第 5 章,全面介紹HTML5的常用標(biāo)簽及其屬性,并且為每個(gè)標(biāo)簽及屬性都設(shè)計(jì)了范例頁(yè)面,這些內(nèi)容是很好的學(xué)習(xí)參考。
第 6 章至第 9 章,詳細(xì)介紹CSS3的選擇器和屬性,也設(shè)計(jì)了對(duì)應(yīng)的范例頁(yè)面,便于讀者進(jìn)行參考和學(xué)習(xí)。需要說(shuō)明的是,由于CSS3相關(guān)內(nèi)容非常豐富,本書(shū)選取了一部分常用內(nèi)容進(jìn)行介紹。
第 10 章至第 13 章,重點(diǎn)介紹JavaScript編程的相關(guān)內(nèi)容,包括基礎(chǔ)語(yǔ)法、函數(shù)、對(duì)象、編程、事件處理等知識(shí),涵蓋了初學(xué)者所需掌握的內(nèi)容和知識(shí)。
第 14 章至第 16章,綜合運(yùn)用所學(xué)內(nèi)容,開(kāi)發(fā)一個(gè)完整的網(wǎng)站——茗茶館。通過(guò)這個(gè)實(shí)例讓讀者鞏固前面所學(xué)知識(shí),同時(shí)掌握Web前端項(xiàng)目開(kāi)發(fā)的思路和技巧。
本書(shū)由張波主編,邵彧、師曉利為副主編,其中師曉利編寫(xiě)第1~3、5章,王佳編寫(xiě) 第4章,邵彧編寫(xiě)第6~9章,張波編寫(xiě)第11~13章,李帷笳編寫(xiě)第14章,鄒雪艷編寫(xiě)第15、16章,第 10 章及課件的制作、資料的整理由李建彬、劉大學(xué)、彭守旺、駱秋容、劉克純、繆麗麗、陳文娟、劉大蓮、莊建新、崔瑛瑛、翟麗娟、徐維維、韓建敏、莊恒、徐云林、劉瑞新、馬春鋒完成。全書(shū)由張波統(tǒng)稿,劉瑞新教授主審。書(shū)中部分內(nèi)容參考了網(wǎng)上部分資料,由于參考內(nèi)容來(lái)源廣泛,篇幅有限,恕不一一列出,在此一并表示感謝。
由于Web前端開(kāi)發(fā)技術(shù)發(fā)展迅速,書(shū)中難免有不足之處,懇請(qǐng)各位同仁及讀者提出寶貴意見(jiàn)和建議。
目 錄
前言
第1章 Web前端開(kāi)發(fā)概述
1.1 Web前端開(kāi)發(fā)相關(guān)概念
1.1.1 瀏覽器
1.1.2 URL
1.1.3 WWW
1.1.4 網(wǎng)站
1.1.5 Web標(biāo)準(zhǔn)
1.2 Web前端開(kāi)發(fā)相關(guān)技術(shù)
1.2.1 HTML
1.2.2 CSS
1.2.3 JavaScript
1.3 Web前端開(kāi)發(fā)工具
1.3.1 NotePad
1.3.2 TextPad
1.3.3 WebStorm
1.3.4 Dreamweaver
1.4 練習(xí)
第2章 HTML5基礎(chǔ)
2.1 HTML語(yǔ)法基礎(chǔ)
2.1.1 HTML文檔結(jié)構(gòu)
2.1.2 HTML標(biāo)簽
2.1.3 標(biāo)簽的屬性
2.2 文本控制標(biāo)簽
2.2.1 標(biāo)題段落標(biāo)簽
2.2.2 文本格式化標(biāo)簽
2.2.3 特殊字符標(biāo)簽
2.3 圖片標(biāo)簽
2.3.1 圖片的格式與分辨率
2.3.2 嵌入圖片
2.3.3 路徑的表示方法
2.4 超鏈接標(biāo)簽
2.4.1 創(chuàng)建超鏈接
2.4.2 創(chuàng)建圖片鏈接
2.4.3 創(chuàng)建電子郵件鏈接
2.4.4 創(chuàng)建下載鏈接
2.4.5 鏈接到同一頁(yè)面的不同位置
2.5 表格標(biāo)簽
2.5.1 創(chuàng)建表格
2.5.2 設(shè)置屬性
2.6 元標(biāo)簽
2.7 link標(biāo)簽
2.8 練習(xí)
第3章 頁(yè)面元素和屬性
3.1 結(jié)構(gòu)元素
3.1.1 header元素
3.1.2 article元素
3.1.3 aside元素
3.1.4 footer元素
3.1.5 figure和figcaption元素
3.2 頁(yè)面結(jié)點(diǎn)
3.2.1 section元素
3.2.2 nav元素
3.2.3 address元素
3.3 交互元素
3.3.1 progress元素
3.3.2 meter元素
3.3.3 details元素和summary元素
3.3.4 menu元素
3.3.5 command元素
3.4 文本層次語(yǔ)義元素
3.4.1 cite元素
3.4.2 mark元素
3.4.3 time元素
3.5 分組元素
3.5.1 ul元素
3.5.2 ol元素
3.5.3 dl元素
3.6 全局屬性
3.6.1 hidden屬性
3.6.2 spellcheck屬性
3.6.3 contenteditable屬性
3.6.4 contextmenu 屬性
3.7 練習(xí)
第4章 構(gòu)建Web表單
4.1 HTML5對(duì)表單的改進(jìn)
4.2 表單的結(jié)構(gòu)
4.3 輸入控件
4.3.1 創(chuàng)建文本框
4.3.2 創(chuàng)建密碼框
4.3.3 創(chuàng)建單選按鈕
4.3.4 創(chuàng)建復(fù)選框
4.3.5 創(chuàng)建文本區(qū)域
4.3.6 創(chuàng)建選擇框
4.3.7 創(chuàng)建隱藏字段
4.3.8 創(chuàng)建按鈕
4.4 處理表單
4.4.1 對(duì)表單元素進(jìn)行組織
4.4.2 對(duì)表單進(jìn)行驗(yàn)證
4.4.3 為表單組件添加說(shuō)明標(biāo)簽
4.4.4 表單提交方式的選擇
4.5 表單綜合實(shí)例
4.6 練習(xí)
第5章 音頻與視頻
5.1 關(guān)于編解碼器
5.1.1 音頻編解碼器
5.1.2 視頻編解碼器
5.2 在HTML5中播放音頻
5.2.1 認(rèn)識(shí)audio元素
5.2.2 播放音頻
5.3 在HTML5中播放視頻
5.3.1 認(rèn)識(shí)video元素
5.3.2 播放視頻
5.4 音頻與視頻相關(guān)屬性、方法與事件
5.5 HTML5部分綜合案例——茶文化網(wǎng)站的制作
5.5.1 設(shè)計(jì)分析
5.5.2 模塊組成
5.5.3 Logo與導(dǎo)航菜單
5.5.4 主體內(nèi)容區(qū)
5.5.5 底部區(qū)
5.5.6 注冊(cè)頁(yè)面的實(shí)現(xiàn)
5.6 練習(xí)
第6章 CSS3概述
6.1 為什么要使用CSS樣式
6.1.1 什么是CSS樣式
6.1.2 CSS與DIV之緣
6.2 CSS樣式的發(fā)展
6.2.1 CSS1.0和CSS2.0概述
6.2.2 CSS3的出現(xiàn)
6.3 CCS3的前景展望
6.3.1 CSS3的應(yīng)用范圍
6.3.2 當(dāng)前支持CSS3的瀏覽器
6.4 練習(xí)
第7章 CSS3語(yǔ)法
7.1 CSS3的語(yǔ)法基礎(chǔ)
7.1.1 構(gòu)造CSS3樣式規(guī)則
7.1.2 為樣式規(guī)則添加注釋
7.2 CSS3選擇器
7.2.1 通用選擇器
7.2.2 標(biāo)簽選擇器
7.2.3 類(lèi)選擇器
7.2.4 id選擇器
7.2.5 偽類(lèi)選擇器
7.2.6 群組選擇器
7.2.7 派生選擇器
7.2.8 屬性選擇器
7.2.9 組合選擇器
7.3 在網(wǎng)頁(yè)中應(yīng)用CSS的4種方式
7.3.1 內(nèi)聯(lián)CSS樣式
7.3.2 嵌入CSS樣式
7.3.3 鏈入外部CSS樣式
7.3.4 導(dǎo)入外部CSS樣式
7.4 CSS樣式的特性
7.4.1 CSS樣式的繼承性
7.4.2 CSS樣式的特殊性
7.4.3 CSS樣式的層疊性
7.4.4 CSS樣式的重要性
7.5 CSS3常用樣式屬性
7.5.1 字體文本樣式
7.5.2 背景樣式
7.5.3 邊框樣式
7.5.4 列表樣式
7.6 練習(xí)
第8章 CSS3頁(yè)面布局
8.1 網(wǎng)頁(yè)布局的類(lèi)型
8.1.1 固定寬度網(wǎng)頁(yè)布局
8.1.2 流式網(wǎng)頁(yè)布局
8.1.3 響應(yīng)式網(wǎng)頁(yè)布局
8.2 DIV+CSS網(wǎng)頁(yè)布局
8.2.1 創(chuàng)建DIV
8.2.2 CSS盒模型
8.2.3 網(wǎng)頁(yè)元素的定位
8.2.4 CSS頁(yè)面布局實(shí)例
8.3 設(shè)計(jì)多列布局
8.3.1 設(shè)置多列顯示樣式
8.3.2 定義列間距
8.3.3 定義列邊框樣式
8.3.4 定義跨列顯示
8.4 CSS3的彈性盒布局
8.5 設(shè)計(jì)導(dǎo)航欄
8.6 練習(xí)
第9章 CSS3高級(jí)應(yīng)用
9.1 濾鏡屬性filter
9.2 漸變gradient
9.3 2D轉(zhuǎn)換transform
9.4 過(guò)渡transition
9.5 動(dòng)畫(huà) animation
9.6 CSS3綜合實(shí)例——茶文化網(wǎng)站的CSS樣式
9.6.1 茶文化網(wǎng)站的網(wǎng)頁(yè)布局CSS3樣式實(shí)現(xiàn)
9.6.2 茶文化網(wǎng)站的頁(yè)面美觀CSS3樣式實(shí)現(xiàn)
9.6.3 茶文化網(wǎng)站中注冊(cè)表單CSS3樣式實(shí)現(xiàn)
9.7 練習(xí)
第10章 JavaScript概述
10.1 JavaScript簡(jiǎn)介
10.1.1 JavaScript是什么
10.1.2 JavaScript和Java的關(guān)系
10.1.3 JavaScript的發(fā)展歷史
10.1.4 JavaScript開(kāi)發(fā)及運(yùn)行環(huán)境
10.2 在HTML5文件中使用JavaScript代碼
10.2.1 JavaScript嵌入HTML5文件內(nèi)
10.2.2 外部JavaScript文件
10.3 練習(xí)
第11章 JavaScript語(yǔ)言基礎(chǔ)
11.1 數(shù)據(jù)類(lèi)型與變量
11.1.1 數(shù)據(jù)類(lèi)型
11.1.2 變量
11.1.3 保留關(guān)鍵字
11.2