21世紀(jì)高等學(xué)校計(jì)算機(jī)類課程創(chuàng)新規(guī)劃教材·微課版

網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程

HTML5、CSS3、JavaScript

主編： 莫小梅

副主編： 毛衛(wèi)英

參編： 隋慧蕓張浩斌應(yīng)可珍

視頻錄制： 毛衛(wèi)英王華瓊

內(nèi) 容 簡(jiǎn) 介

本書分為理論篇和應(yīng)用篇兩個(gè)部分。其中，理論篇在內(nèi)容上詳細(xì)剖析了最新Web標(biāo)準(zhǔn)的三大部分HTML5、CSS3、JavaScript，及其在網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)中的應(yīng)用； 應(yīng)用篇?jiǎng)t從實(shí)用的角度補(bǔ)充了綜合實(shí)訓(xùn)指導(dǎo)及課業(yè)拓展知識(shí)等。本書知識(shí)結(jié)構(gòu)體系較新，較全面地覆蓋了目前企業(yè)前端工程師所需的相關(guān)理論和應(yīng)用技能，同時(shí)案例形式豐富，既有針對(duì)單一知識(shí)點(diǎn)的小實(shí)例及貫穿特定案例網(wǎng)站的開發(fā)實(shí)錄，也有針對(duì)Web前端技術(shù)重點(diǎn)和難點(diǎn)的案例實(shí)踐，更有階段性的綜合案例實(shí)戰(zhàn)。在案例設(shè)計(jì)方面，既突出新知識(shí)點(diǎn)的應(yīng)用技巧，又以不同的方式鞏固學(xué)過(guò)的技能，使讀者能夠一步一個(gè)腳印、循序漸進(jìn)地扎實(shí)掌握網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)的各項(xiàng)技能。
本書提供了配備的課程資源包，內(nèi)容包括教學(xué)大綱、制作精良的教學(xué)課件（PPT）、電子教案、重點(diǎn)及難點(diǎn)綜合案例的教學(xué)視頻、
本書所有的實(shí)例和綜合案例的程序源碼、
課后題庫(kù)的參考答案等。其中，程序源碼全部經(jīng)過(guò)精心測(cè)試，能夠在Windows 系統(tǒng)及以Chrome為代表的主流瀏覽器下編譯和運(yùn)行。
本書可作為普通高校計(jì)算機(jī)及相關(guān)專業(yè)教材、高職高專教材，適用于課堂教學(xué)、實(shí)驗(yàn)實(shí)訓(xùn)及綜合課程設(shè)計(jì)等相關(guān)的教學(xué)活動(dòng)，并可供從事網(wǎng)頁(yè)設(shè)計(jì)與制作、Web前端開發(fā)、網(wǎng)頁(yè)編程等行業(yè)人員參考。

本書封面貼有清華大學(xué)出版社防偽標(biāo)簽，無(wú)標(biāo)簽者不得銷售。

版權(quán)所有，侵權(quán)必究。侵權(quán)舉報(bào)電話： 010��6278298913701121933

圖書在版編目（CIP）數(shù)據(jù)
網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)案例教程： HTML5、CSS3、JavaScript/莫小梅主編.北京： 清華大學(xué)出版社，2019
（21世紀(jì)高等學(xué)校計(jì)算機(jī)類課程創(chuàng)新規(guī)劃教材·微課版）
ISBN 978��7��302��53453��2
Ⅰ. ①網(wǎng)…Ⅱ. ①莫…Ⅲ. ①超文本標(biāo)記語(yǔ)言-程序設(shè)計(jì)-高等學(xué)校-教材 ②網(wǎng)頁(yè)制作工具-高等學(xué)校-教材 ③JAVA語(yǔ)言-程序設(shè)計(jì)-高等學(xué)校-教材Ⅳ. ①TP312.8 ②TP393.092

中國(guó)版本圖書館CIP數(shù)據(jù)核字（2019）第162825號(hào)

策劃編輯： 魏江江

責(zé)任編輯： 王冰飛

封面設(shè)計(jì)： 劉鍵

責(zé)任校對(duì)： 梁毅

責(zé)任印制： 宋林

出版發(fā)行： 清華大學(xué)出版社

網(wǎng)址： http://www.tup.com.cn， http://www.wqbook.com

地址： 北京清華大學(xué)學(xué)研大廈A座
郵編： 100084

社總機(jī)： 010��62770175郵購(gòu)： 010��62786544

投稿與讀者服務(wù)： 010��62776969, c�瞫ervice@tup.tsinghua.edu.cn

質(zhì)量反饋： 010��62772015, zhiliang@tup.tsinghua.edu.cn

課件下載： http://www.tup.com.cn,010��62795954

印裝者： 清華大學(xué)印刷廠

經(jīng)銷： 全國(guó)新華書店

開本： 185mm260mm印張： 30.5字?jǐn)?shù)： 743千字

版次： 2019年9月第1版印次： 2019年9月第1次印刷

印數(shù)： 1~1500

定價(jià)： 79.80元

產(chǎn)品編號(hào)： 081636��01

前言

本書是在編者的2012年版《網(wǎng)頁(yè)編程基礎(chǔ)XHTML、CSS、JavaScript》教材多年使用的基礎(chǔ)上，參考了現(xiàn)有大量同類書刊、資料，吸收眾家之長(zhǎng)后結(jié)合多年網(wǎng)頁(yè)編程基礎(chǔ)教學(xué)的經(jīng)驗(yàn)以及學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)的最新技術(shù)進(jìn)展優(yōu)化、增改而成的。
隨著互聯(lián)網(wǎng)技術(shù)和企業(yè)需求的發(fā)展日新月異，Web標(biāo)準(zhǔn)的定位和發(fā)展方向也發(fā)生了根本的變化，XHTML規(guī)范不再更新，而HTML5則成為了當(dāng)今Web時(shí)代的前沿技術(shù)。在本書成稿之際，時(shí)間已是2019年的5月，距離上一版教材的完稿時(shí)間已過(guò)去了7年多。在這過(guò)去的7年里，我們見證了以HTML5、CSS3、JavaScript為三大基石的H5技術(shù)的快速發(fā)展和強(qiáng)大功能，H5技術(shù)增強(qiáng)了包括傳統(tǒng)PC端Web頁(yè)面制作在內(nèi)的，兼容手機(jī)、iPad等各種設(shè)備和平臺(tái)的響應(yīng)式和自適應(yīng)布局等Web前端技術(shù)，強(qiáng)化了包括新增的音頻、視頻標(biāo)簽等多媒體播放技術(shù)，以及Canvas圖形繪制和動(dòng)畫制作等表現(xiàn)能力，追加了localStorage等本地存儲(chǔ)數(shù)據(jù)功能，同時(shí)JavaScript的語(yǔ)法也從ES5升級(jí)到ES6這一更簡(jiǎn)潔、實(shí)用的語(yǔ)法。H5的應(yīng)用不僅覆蓋到網(wǎng)頁(yè)的前端制作，還包括游戲開發(fā)、輕應(yīng)用、Web APP、微站、小程序等方方面面，游戲化、場(chǎng)景化、跨屏互動(dòng)等全新特性使得H5未來(lái)會(huì)在更多的領(lǐng)域展示其獨(dú)特的魅力和應(yīng)用前景。因此，本書的改版是順應(yīng)時(shí)代的潮流，為讀者梳理和分享與HTML5、CSS3、JavaScript等H5前端開發(fā)相關(guān)的前沿技術(shù)和案例應(yīng)用，為迎接時(shí)代的變革和分享技術(shù)的紅利打好扎實(shí)的基礎(chǔ)。
主要內(nèi)容
本書主要圍繞Web最新標(biāo)準(zhǔn)的三大關(guān)鍵技術(shù)（ HTML5、CSS3和JavaScript）來(lái)介紹網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)的必備知識(shí)及相關(guān)應(yīng)用。其中，HTML5負(fù)責(zé)網(wǎng)頁(yè)結(jié)構(gòu)； CSS3負(fù)責(zé)網(wǎng)頁(yè)樣式及表現(xiàn)； JavaScript負(fù)責(zé)網(wǎng)頁(yè)行為和功能。
全書共9章，分為理論篇和應(yīng)用篇兩大部分。其中，第1~7章為理論篇，從技術(shù)的角度重點(diǎn)介紹Web前端開發(fā)的基礎(chǔ)概念及相關(guān)技術(shù)； 第8~9章為應(yīng)用篇，從實(shí)用的角度補(bǔ)充介紹了綜合實(shí)踐指導(dǎo)及課業(yè)拓展知識(shí)。
在第一部分理論篇的編寫上，編者全面、系統(tǒng)地介紹了當(dāng)前最新的Web前端知識(shí)體系，以一個(gè)綜合案例網(wǎng)站的實(shí)際開發(fā)為主線，采用知識(shí)點(diǎn)結(jié)合典型實(shí)例、重難點(diǎn)結(jié)合案例實(shí)踐、階段性復(fù)習(xí)結(jié)合綜合案例實(shí)戰(zhàn)的多層次、全方位的配套實(shí)踐案例體系，使讀者既能夠真正從網(wǎng)站建設(shè)的全局上把握Web標(biāo)準(zhǔn)各個(gè)部分的語(yǔ)法、聯(lián)系和應(yīng)用，又能結(jié)合不同階段、不同層次的案例實(shí)踐學(xué)以致用，扎實(shí)掌握相關(guān)的理論和實(shí)踐應(yīng)用技能。
第1、2章為基礎(chǔ)知識(shí)和HTML入門，為后續(xù)知識(shí)的學(xué)習(xí)打下初步的基礎(chǔ)。其中，第1章介紹了網(wǎng)頁(yè)設(shè)計(jì)與Web前端基礎(chǔ)中相關(guān)的概念、網(wǎng)站開發(fā)的工作流程和開發(fā)工具，在網(wǎng)站開發(fā)的工作流程部分列舉了網(wǎng)站架構(gòu)與內(nèi)容、素材收集實(shí)用技能、案例網(wǎng)站的首頁(yè)設(shè)計(jì)草圖和實(shí)體模型等實(shí)用的案例和技能，使得讀者對(duì)網(wǎng)站開發(fā)的流程有一個(gè)初步、清晰、具體的印象； 第2章介紹了HTML的語(yǔ)言基礎(chǔ)、常用標(biāo)簽和相關(guān)的典型實(shí)例。
第3、4章主要涉及PC端的主流前端布局技術(shù)。其中，第3章詳細(xì)介紹了CSS3樣式表的基本概念、使用方法和常用的CSS3屬性，以及相關(guān)的實(shí)例； 第4章重點(diǎn)介紹了HTML CSS的相關(guān)布局技術(shù)及各種應(yīng)用。這一部分是全書的重點(diǎn)和Web前端技術(shù)的基礎(chǔ)。
第5章重點(diǎn)介紹了HTML5 CSS3的移動(dòng)網(wǎng)站布局技術(shù)，這一章體現(xiàn)了較多的HTML5和CSS3的新技術(shù)和新應(yīng)用，同時(shí)也有一些難點(diǎn)。
第6章詳細(xì)介紹了JavaScript包括ES5和ES6的兩種主流語(yǔ)法和基于對(duì)象的編程技術(shù)，重點(diǎn)介紹了JavaScript在操作HTML頁(yè)面、響應(yīng)用戶操作及驗(yàn)證數(shù)據(jù)等方面的應(yīng)用。
第7章重點(diǎn)介紹了HTML5新增的Canvas元素及其在繪制Web頁(yè)面中的圖形、圖像和動(dòng)畫方面的應(yīng)用。由于Canvas元素需要通過(guò)JavaScript語(yǔ)句實(shí)現(xiàn)具體的繪制功能，所以安排在理論篇的最后。
第3~7章共同的特點(diǎn)是除了通過(guò)列舉大量的典型實(shí)例來(lái)介紹基本的概念和語(yǔ)法以外，還結(jié)合了案例網(wǎng)站的首頁(yè)及相關(guān)頁(yè)面的實(shí)例，配以大量的案例實(shí)踐，以及每章一個(gè)綜合案例實(shí)戰(zhàn)加以鞏固。
理論部分的各章把Web標(biāo)準(zhǔn)三大部分的分工及合作一步一步地展現(xiàn)在讀者面前，使讀者在學(xué)習(xí)了這一部分內(nèi)容以后，能夠?qū)�Web標(biāo)準(zhǔn)及其內(nèi)涵有更具體和深入的了解，并能在實(shí)際的網(wǎng)站開發(fā)中加以運(yùn)用。
在第二部分應(yīng)用篇的編寫思路上，主要是考慮到從綜合實(shí)踐的角度為讀者提供實(shí)用性的指導(dǎo)。其中，第8章結(jié)合兩個(gè)商業(yè)網(wǎng)站案例項(xiàng)目書的目錄結(jié)構(gòu)及課程網(wǎng)站的開發(fā)全程，全面介紹了網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)的完整流程，并提供了相關(guān)課程設(shè)計(jì)的要求及指導(dǎo)； 第9章則從讀者后續(xù)的自我提高角度出發(fā)，指出一些課業(yè)拓展的方向和參考，并為使用本書進(jìn)行授課的教師提供一些建立學(xué)生實(shí)踐環(huán)境的建議。

以上的編寫方法不僅符合理論和實(shí)踐相結(jié)合的學(xué)習(xí)規(guī)律，而且還為讀者后續(xù)學(xué)習(xí)動(dòng)態(tài)數(shù)據(jù)庫(kù)網(wǎng)站的制作打下了堅(jiān)實(shí)的基礎(chǔ)。
本書特點(diǎn)
（1） 時(shí)新性、系統(tǒng)性和實(shí)用性相結(jié)合： 本書結(jié)合當(dāng)前新興的企業(yè)前端工程師的必備知識(shí)體系和技能要求，以企業(yè)前端開發(fā)工程師的能力需求為導(dǎo)向，系統(tǒng)、全面地覆蓋時(shí)下網(wǎng)頁(yè)設(shè)計(jì)與Web前端開發(fā)的知識(shí)體系和實(shí)踐技巧。本書在原有的基礎(chǔ)知識(shí)體系的基礎(chǔ)上引入了HTML5、CSS3，以及JavaScript中ES6的新特性和應(yīng)用案例，囊括了傳統(tǒng)HTML CSS布局、新興的HTML5 CSS3移動(dòng)端布局、JavaScript基于對(duì)象的編程和交互應(yīng)用，以及HTML5的Canvas圖形圖像和動(dòng)畫繪制技能。
（2） 以項(xiàng)目帶動(dòng)全局： 本書延續(xù)了上一版本教材中以項(xiàng)目帶動(dòng)全局的綜合性案例教學(xué)特點(diǎn)，即從第1章開始就以一個(gè)案例網(wǎng)站首頁(yè)的設(shè)計(jì)草圖和實(shí)體模型為例，引導(dǎo)初學(xué)者在學(xué)習(xí)具體的技術(shù)之前先對(duì)網(wǎng)站開發(fā)的工作流程有一個(gè)簡(jiǎn)單而又明確的了解，并在后面的Web標(biāo)準(zhǔn)三大技術(shù)學(xué)習(xí)的過(guò)程中貫穿整個(gè)案例網(wǎng)站的建設(shè)和完善過(guò)程，以幫助讀者理順這三大技術(shù)的分工與合作，同時(shí)在課后的實(shí)踐練習(xí)中也始終貫穿這種以項(xiàng)目帶動(dòng)全局的思路。
（3） 基礎(chǔ)實(shí)例與綜合案例相結(jié)合，典型案例實(shí)踐與綜合案例實(shí)戰(zhàn)相結(jié)合： 本書在保留已有教材中基礎(chǔ)實(shí)例與項(xiàng)目案例相結(jié)合的基礎(chǔ)上，進(jìn)一步對(duì)主要章節(jié)的重點(diǎn)和難點(diǎn)配備了典型的案例實(shí)踐，以幫助讀者加強(qiáng)理解和運(yùn)用能力。此外，在第4~7章中通過(guò)規(guī)模性和復(fù)雜度更強(qiáng)的綜合案例實(shí)戰(zhàn)提供階段性的綜合實(shí)訓(xùn)案例和方法，使讀者能夠循序漸進(jìn)地在不同的層面上扎實(shí)掌握相關(guān)理論和綜合實(shí)踐技能。
（4） 與時(shí)俱進(jìn)的實(shí)用知識(shí)和配套資源： 本書在第二部分應(yīng)用篇的第8章綜合實(shí)訓(xùn)部分全面介紹了當(dāng)前主流的網(wǎng)頁(yè)布局方案，綜合實(shí)訓(xùn)中的案例首頁(yè)布局也升級(jí)為綜合運(yùn)用理論篇所介紹的HTML5結(jié)構(gòu)標(biāo)簽、彈性布局、怪異盒模型等最新的實(shí)用布局技術(shù)； 第9章課業(yè)拓展部分也刪除了部分過(guò)時(shí)的內(nèi)容，并引入了大量實(shí)用、前沿的拓展知識(shí)和技能。
教學(xué)資源

為了幫助讀者和任課教師更好地使用本書，編者特意準(zhǔn)備了一些輔助教學(xué)材料，具體如下：

（1） 教學(xué)大綱。
（2） 教學(xué)課件（PPT）。
（3） 電子教案。
（4） 習(xí)題解答手冊(cè)。
注： 掃描封底的書圈二維碼，可以下載以上配套資源。
（5） 各章實(shí)例（含基礎(chǔ)實(shí)例、案例網(wǎng)站、案例實(shí)踐和實(shí)戰(zhàn)）程序源碼。掃描目錄上方的二維碼，可以下載程序源碼。

（6） 主要綜合案例的配套教學(xué)視頻，共計(jì)1000分鐘。掃描書中的二維碼，可以在線觀看、學(xué)習(xí)。本書的附錄部分列出了書中視頻對(duì)應(yīng)的二維碼的匯總表，方便讀者查閱。
（7） 應(yīng)用篇中提到的本課程學(xué)習(xí)網(wǎng)站，課程網(wǎng)址為http://real.zjicm.edu.cn/mxm。
本書編者
本書的編者都是工作在教學(xué)和科研第一線的骨干教師，具有豐富的教學(xué)實(shí)踐經(jīng)驗(yàn)。全書由莫小梅負(fù)責(zé)規(guī)劃。
本書編寫的具體分工如下： 第1章的個(gè)別節(jié)、第2~3章、第5~6章以及第8章的大部分（除8.8節(jié)外）由莫小梅編寫，第1章的大部分、第4章由毛衛(wèi)英和應(yīng)可珍共同編寫，第7章由隋慧蕓編寫，第8.8節(jié)以及第9章由張浩斌編寫。

配套案例教學(xué)視頻錄制的分工如下： 毛衛(wèi)英負(fù)責(zé)第4章案例的視頻錄制，王華瓊負(fù)責(zé)第3、5、6章案例的視頻錄制。
本書初稿由各位編者共同進(jìn)行編排和審定，由莫小梅進(jìn)行統(tǒng)稿。
由于編者水平有限，書中難免出現(xiàn)不足之處，請(qǐng)廣大讀者批評(píng)指正。

編者

2019年5月